AR webapp to pick and place a selection of furniture models into your surroundings in real-time using your mobile's live video footage of your current surroundings: leverages ThreeJS and WebXR to enable AR mode with estimated real-time environment lighting, hit testing, and dom-verlay in furniture selection and placement.
Demo
Use augmented reality (AR) to pick and place a selection of furniture models into your surroundings in real-time using your mobile's live video footage of your current surroundings. This project leverages ThreeJS to render the scene and furniture models, WebXR to enable AR mode with estimated real-time environment lighting, hit testing for furniture placement on the floor, and dom-overlay to render the UI.
View the live demo on your mobile at: https://cynthia-3d-webxr-furniture-placement.netlify.app/
Enter AR
button at the bottom of the screen and click itStop AR
to exit the experience✔️ Hit Testing ✔️ Real-Time Environment Light Estimation ✔️ Augmented Reality with WebXR ✔️ Realistic 3D Models with Textures ✔️ Horizontally Scrollable Furniture Selection ✔️ Dom-Overlay
The following tools were used in this project:
Before starting 🏁, you need to have Git and Node installed.
# Clone this project
$ git clone https://github.com/cynthiachiu/3D-WebXR-Furniture
# Access
$ cd 3D-WebXR-Furniture
# Install dependencies
$ npm install
# Run the project
$ npm start
# The server will initialize in the <http://localhost:3000>.
# You can use ngrok to generate a link and try on your mobile with the secure ngrok link.
This project is under license from MIT. For more details, see the LICENSE file.
Made with ❤️ by cynthiachiu
Back to top