https://github.com/aniketghodmare/3d-floorplan

An interactive 3D floor plan built with React, Three.js, React Three Fiber, and Drei. Explore property layouts in stunning 3D detail right in your browser—navigate through rooms, visualize spaces, and experience architectural visualization with seamless interactivity and smooth performance.
https://github.com/aniketghodmare/3d-floorplan

reactjs reactthreedrei reactthreefiber threejs threejs-example threejs-learning

Last synced: 3 months ago
JSON representation

An interactive 3D floor plan built with React, Three.js, React Three Fiber, and Drei. Explore property layouts in stunning 3D detail right in your browser—navigate through rooms, visualize spaces, and experience architectural visualization with seamless interactivity and smooth performance.

• Host: GitHub
• URL: https://github.com/aniketghodmare/3d-floorplan
• Owner: AniketGhodmare
• Created: 2025-08-30T10:39:30.000Z (4 months ago)
• Default Branch: main
• Last Pushed: 2025-08-30T12:37:08.000Z (4 months ago)
• Last Synced: 2025-08-30T14:34:29.981Z (4 months ago)
• Topics: reactjs, reactthreedrei, reactthreefiber, threejs, threejs-example, threejs-learning
• Language: JavaScript
• Homepage: https://aniket-floorplan.netlify.app/
• Size: 8.91 MB
• Stars: 0
• Watchers: 0
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# 🏠 3D Interactive Floor Plan  

An interactive **3D floor plan visualization** of a property built with **React, Three.js, React Three Fiber, and Drei**. Explore property layouts in stunning 3D detail right from your browser—navigate through rooms, visualize spaces, and experience architectural visualization with seamless interactivity.  

## 🚀 Live Demo  

🔗 [View Demo](https://aniket-floorplan.netlify.app/)  

## ✨ Features  

- 🏡 **Fully Interactive 3D Floor Plan** – Navigate and explore the property layout.  

- 🔍 **Room Navigation** – Click to explore different rooms like living room, bedroom, and more.  

- 🎨 **Realistic 3D Rendering** – Powered by **Three.js** and **React Three Fiber**.  

- ⚡ **Seamless Interactivity** – Enhanced with **Drei** helpers for smoother experience.  

- 🌐 **Runs in Browser** – No extra installation required for users.  

## 🛠️ Tech Stack  

- **React.js** – Frontend framework  

- **Three.js** – 3D rendering engine  

- **React Three Fiber** – React renderer for Three.js  

- **Drei** – Useful helpers for R3F