55 lines
1.7 KiB
Markdown
55 lines
1.7 KiB
Markdown
# Three.js Dark Room Experience
|
|
|
|
A Three.js experience featuring two point lights in a dark room with mouse-controlled camera direction.
|
|
|
|
## Features
|
|
|
|
- **Dark Room Environment**: A fully enclosed room with walls, floor, and ceiling
|
|
- **Two Point Lights**:
|
|
- Warm orange/red light positioned at (-6, 3, -6)
|
|
- Cool blue/cyan light positioned at (6, 3, 6)
|
|
- **Fixed Camera Position**: Camera stays at (0, 2, 0) but direction follows mouse movement
|
|
- **Interactive Objects**: Floating cubes, central pedestal, and corner pillars
|
|
- **Atmospheric Lighting**: Subtle animations and shadows for immersive experience
|
|
|
|
## How to Run
|
|
|
|
### Option 1: Using Node.js Server (Recommended)
|
|
```bash
|
|
node server.js
|
|
```
|
|
Then open your browser to `http://localhost:3000`
|
|
|
|
### Option 2: Using Python HTTP Server
|
|
```bash
|
|
python3 -m http.server 8000
|
|
```
|
|
Then open your browser to `http://localhost:8000`
|
|
|
|
### Option 3: Using any other local server
|
|
Simply serve the files from this directory using any local HTTP server.
|
|
|
|
## Controls
|
|
|
|
- **Mouse Movement**: Look around the room (camera direction follows mouse)
|
|
- **Camera Position**: Fixed at the center of the room, slightly elevated
|
|
|
|
## Technical Details
|
|
|
|
- Built with Three.js (loaded via CDN)
|
|
- Uses WebGL renderer with shadow mapping
|
|
- Point lights with dynamic intensity animation
|
|
- Responsive design that adapts to window size
|
|
- Smooth camera rotation interpolation for fluid mouse control
|
|
|
|
## Files
|
|
|
|
- `index.html` - Main HTML file with the Three.js setup
|
|
- `app.js` - JavaScript code for the 3D scene
|
|
- `server.js` - Simple Node.js HTTP server for local development
|
|
- `README.md` - This file
|
|
|
|
## Browser Requirements
|
|
|
|
- Modern browser with WebGL support
|
|
- Works best in Chrome, Firefox, Safari, or Edge |