create html file

2025-07-26 21:15:36 +01:00
parent 7b44239040
commit c627c1213a
2 changed files with 62 additions and 1 deletions
--- a/README.md
+++ b/README.md
@@ -1,2 +1,55 @@
-# raver-3
+# 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
--- a/index.html
+++ b/index.html
@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Three.js Dark Room Experience</title>
+</body>
+</html>