3D interactive house visualization built with Three.js, that allows users to explore a detailed house model with lighting, weather effects, and immersive controls.
- 3D house model : Includes two floors with rooms, walls, stairs, and glass windows
- Realistic textures : Brick walls, roof tiles, wooden doors, and grass terrain
- Door controllers : Open and close multiple doors
independentlyandsmoothly - Lamp Posts : Decorative street-style lamp posts for outdoor lighting at night (added via Three.js)
- View Modes : Switch between Front, Top, and Back views
- Orbit Controls : Camera movement with mouse controls
- Guided House Tour : Automated walkthrough from the front door to the back of the house
- Smooth Camera Movement: Seamlessly transition between different camera positions
- Day Cycle : Clear sky and bright sun
- Evening Mode :Warm golden-hour lighting
- Night Cycle : Moonlit sky with stars
- Rain System : Animated rainfall with ambient sound effects
- Thunderstorm : Lightning flashes with thunder sounds
- Night Sounds: Insect sounds for nighttime atmosphere
- Rain: Rainfall sound
- Thunderstorm: Thunder sound effects
- FPS Counter: Displays real-time frames per second to monitor performance
- Three.js (r179): Primary framework used for rendering the 3D house model
- Bootstrap 5: For styling of the interface
- Node.js v22.11.0
- npm 11.4.2
git clone https://github.com/mohammedAljadd/3d-model-web-page
cd 3d-model-web-pagenpm installnpx vite- Navigate to http://localhost:5173/
3d-model-web-page/
├── index.html # Main HTML file
├── main.js # Three.js application
├── utils.js # Utility functions
├── house.gltf # 3D house model (.gltf)
├── textures/ # Texture assets
├── audios/ # Audio files
└── favicon_io/ # Favicon assets
-
Door Controls :
- Open Front Door: Main entrance access
- Open Inner Door: Interior door between rooms
- Open Back Door: Rear exit of the house
-
View Controls :
- Top View: See the entire house from above
- Front View: Look at the house from the front side
- Back View: View the house from the Back side
-
Weather Controls :
- Start Rain: Activates animated rainfall with sound
- Start Thunderstorm: Lightning and thunder effects
-
Time Controls :
- Switch to Evening: Golden hour lighting
- Switch to Night: Night mode with interior lighting and stars
-
Special Features :
- Animate: Rotate the house 360°
- House Tour: Automated guided walkthrough of rooms and floors
The house model used in this project is based on the Civitas Modular House 3x3 LV1-001 from GrabCAD.
Before importing into Three.js, the model was optimized and modified in Blender to improve performance and interactivity:
-
Separate Doors – The original model treated all doors as a single object. They were separated into individual objects to enable proper opening and closing animations.
-
UV Mapping for Textures – Applied UV mapping to walls, doors, and the roof to ensure textures display correctly in the 3D scene.
-
Rescaling – The model was very large in Three.js coordinates, so it was scaled down by 0.001 in Blender. (This scaling could also be done directly in Three.js if preferred.)
-
Format Conversion – Instead of working with 24 separate .obj files, the model was combined and exported as a single .glTF file for better loading performance and easier asset management.
- GitHub Pages: The project is automatically deployed to GitHub Pages using GitHub Actions. Any updates to the main branch trigger a deployment, so the live demo is always up-to-date.
Contributions are welcome! Please feel free to submit a Pull Request. For major changes, please open an issue first to discuss what you would like to change.
Mohammed Al Jadd
LinkedIn: @aljadd
GitHub: @mohammedAljadd