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)

node server.js

Then open your browser to http://localhost:3000

Option 2: Using Python HTTP Server

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