diff --git a/README.md b/README.md index b763121..b421c94 100644 --- a/README.md +++ b/README.md @@ -1,55 +1,2 @@ -# Three.js Dark Room Experience +# raver-3 -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 \ No newline at end of file diff --git a/app.js b/app.js new file mode 100644 index 0000000..63d512d --- /dev/null +++ b/app.js @@ -0,0 +1,23 @@ +import * as THREE from 'three'; + +const scene = new THREE.Scene(); +const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); +const renderer = new THREE.WebGLRenderer(); +renderer.setSize( window.innerWidth - 10, window.innerHeight - 10); +document.body.appendChild(renderer.domElement); + +const geometry = new THREE.BoxGeometry(1, 1, 1, 1); +const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } ); +const cube = new THREE.Mesh(geometry, material); +scene.add(cube); + +camera.position.z = 5; + +function animate() { + cube.rotation.x += 0.01; + cube.rotation.y += 0.01; + renderer.render(scene, camera); +} + +renderer.setAnimationLoop(animate); + diff --git a/index.html b/index.html index 072a4c3..025a5e6 100644 --- a/index.html +++ b/index.html @@ -4,5 +4,7 @@