azeem/raver-3
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

spinning cube

Browse Source
This commit is contained in:
Azeem Fidahusein
2025-07-26 21:27:58 +01:00
parent 28c8213959
commit a11a0b8419
6 changed files with 41547 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
README.md
View File

@@ -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

23
app.js Normal file
View File

@@ -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);

2
index.html
View File

@@ -4,5 +4,7 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Three.js Dark Room Experience</title> <title>Three.js Dark Room Experience</title>
<body>
<script type="module" src="app.js"></script>
</body> </body>
</html> </html>

11
node_modules/.vite/deps/_metadata.json generated vendored
View File

@@ -2,7 +2,14 @@
"hash": "6d498a50", "hash": "6d498a50",
"configHash": "7161c023", "configHash": "7161c023",
"lockfileHash": "6e33ff2f", "lockfileHash": "6e33ff2f",
"browserHash": "30372e98", "browserHash": "1a1e3aed",
"optimized": {}, "optimized": {
"three": {
"src": "../../three/build/three.module.js",
"file": "three.js",
"fileHash": "86612ddf",
"needsInterop": false
}
},
"chunks": {} "chunks": {}
} }

41505
node_modules/.vite/deps/three.js generated vendored Normal file
View File

File diff suppressed because one or more lines are too long

7
node_modules/.vite/deps/three.js.map generated vendored Normal file
View File

File diff suppressed because one or more lines are too long