Demo

3D WebXR Furniture

About   |   Features   |   Technologies   |   Requirements   |   Starting   |   License   |   Author

🎯 About

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/

demo.mov

🏁 Starting

1. Using your phone, go to the live website at: https://cynthia-3d-webxr-furniture-placement.netlify.app/
2. See the Enter AR button at the bottom of the screen and click it
3. Allow phone permissions to use the camera
4. See the row of furniture selections in the bottom banner that is horizontally scrollable. When you click the furniture thumbnail, a white border appears around your selection
5. Pan your phone and walk around and see that a white ring reticle appears to show where you can place your furniture selection
6. In your phone, white the white ring reticle present, tap the phone screen and see your furniture selection appear in place of the reticle
7. You can switch furniture selections and continue walking around and placing furniture
8. See that as you walk around and pan your phone, you are able to walk around the furniture and view it in 3D in real-time
9. Clik Stop AR to exit the experience

✨ Features

✔️ Hit Testing
✔️ Real-Time Environment Light Estimation
✔️ Augmented Reality with WebXR
✔️ Realistic 3D Models with Textures
✔️ Horizontally Scrollable Furniture Selection
✔️ Dom-Overlay

🚀 Technologies

The following tools were used in this project:

• ThreeJS
• Node.js
• TypeScript

✅ Requirements

Before starting 🏁, you need to have Git and Node installed.

🏁 Starting

# 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.

📝 License

This project is under license from MIT. For more details, see the LICENSE file.

Made with ❤️ by cynthiachiu

 

Back to top