Create a 3D elevator simulation using Three.js that runs entirely in the browser with no build process. The simulation should visualize a 6-floor building with an elevator transporting people between floors.
## Core Requirements
### Visual Structure
1. **Building**:
- 6 usable floors with transparent floor surfaces (opacity: 0.3)
- Semi-transparent walls (opacity: 0.2) to see inside
- Elevator shaft cutout through the center of all floors
- Solid ground floor and roof
2. **Elevator Car**:
- Semi-transparent yellow frame (opacity: 0.5) so passengers are VISIBLE inside
- Two sliding doors on the front that open/close horizontally:
- Doors retract from center outward when opening
- Doors meet in the middle when closing
- Doors should be slightly more opaque (0.7) than the frame
- Solid back wall, transparent side walls
- Position at floor level, not floating
3. **People**:
- Simple 3D humanoid figures made from Three.js primitives
- CRITICAL: Feet must align exactly with floor level (not protruding through floor)
- CRITICAL: Arms must hang DOWN from shoulders, not up from hips
- Body structure from bottom to top: legs → torso → head, with arms at shoulder level
### Positioning & Movement
4. **Person Positioning**:
- People wait IN FRONT of the elevator doors (on positive Z-axis)
- People must FACE the elevator (rotate 180° to look toward doors)
- When boarding/exiting, people walk FORWARD through the doors (not sideways)
- Never position people to the side of the elevator
5. **Walking Animation**:
- Animate legs with alternating swing motion during walking
- Use sine wave for smooth leg rotation on X-axis
- Reset legs to standing position when stationary
- The legs should pivot from the hips/body, not the knees/mid-leg
6. **Door Animation**:
- Doors open BEFORE person enters/exits
- Doors close AFTER person is fully inside/outside
- Add brief delays (300ms) between steps for realism
Scene Graph & Parent-Child Relationships:
- When person boards elevator, add them as a child of the elevator object (not the scene) so they travel with it
- Use elevatorCar.add(person) after boarding, scene.add(person) after exiting
- This ensures person inherits elevator's position transformations during vertical movement
### Animation Sequence
Complete cycle should be:
1. Elevator moves to pickup floor
2. Doors open (sliding animation)
3. Person walks forward into elevator (with leg animation) then becomes a child of elevator object
4. Doors close
5. Elevator travels to destination
6. Doors open at destination
7. Person walks forward to waiting spot (with leg animation) then is removed from elevator and added back to scene
8. Doors close
### Transparency Rendering (CRITICAL)
7. **Three.js Transparency Setup**:
- Enable `renderer.sortObjects = true` for proper depth sorting
- Add `renderer.alpha = true` to WebGL renderer
- ALL transparent materials MUST have `depthWrite: false` to prevent z-fighting
- ALL transparent materials should have `side: THREE.DoubleSide`
- Use `renderOrder` property: building=0, elevator=1
- This prevents floors/walls from disappearing when camera rotates
### Simulation Logic
8. **Floor Management**:
- One floor is always empty
- One person on each occupied floor
- Randomly select person to move to empty floor
- Update empty floor after each move
9. **Camera & Controls**:
- Position camera at (25, 25, 25) looking at building center
- Use OrbitControls for user interaction
- Ensure all objects remain visible during rotation
### Technical Specifications
10. **Files**:
- `index.html`: Load Three.js and OrbitControls from CDN, then load custom scripts
- `elevator.js`: Main simulation logic, building creation, animations
- `person.js`: Person model factory function
11. **Constants** (configurable at top of elevator.js):
- FLOOR_HEIGHT, FLOOR_COUNT, BUILDING_WIDTH, BUILDING_DEPTH
- SHAFT_WIDTH, SHAFT_DEPTH
- ELEVATOR_SPEED, PERSON_MOVE_SPEED
12. **Animation Style**:
- Use `requestAnimationFrame` for smooth animations
- Use callback-based sequential animation pipeline
- Distance-based completion checks (< 0.01)
- Include a slider control to allow the user to vary the animation speed 1x-20x
### Color Scheme
- Elevator frame: Yellow (#ffff00)
- Elevator doors: Darker yellow (#cccc00)
- Building floors: Gray (#cccccc)
- Building walls: Blue (#9999ff)
- People: Blue body (#3498db), skin tone head (#ffdbac), dark legs (#2c3e50)
## Key Implementation Details
- Coordinate system: Y=vertical, Z=front/back (positive Z = in front of elevator)
- Person height calculation must account for all parts (legs + torso + head)
- Doors are split into left/right halves, each sliding on X-axis
- Store door references on elevatorCar object for animation access
- Track door state (open/closed) to prevent animation conflicts
This section provides precise instructions for setting up the index.html file to prevent common versioning and loading errors with the
Three.js library.
1. HTML Structure: The body of the HTML should be empty except for the script tags. All 3D content will be generated and appended by the
scripts.
2. Script Loading (Crucial): The scripts must be loaded in a specific order using exact URLs to ensure compatibility and proper dependency
resolution. Add the following
3
4
5
6
7
8
9
3. Technical Notes to Follow:
* Use these exact URLs. They point to a specific, compatible version (0.128.0) of both the library and the controls. Do not mix versions
or CDNs.
* The order is mandatory. OrbitControls.js requires the global THREE object to be created by three.min.js, so it must be loaded second.
Your custom scripts, which also depend on the THREE object, must be loaded last.
* No ES6 Modules. These scripts use global variables (e.g., window.THREE). Do not use import or export statements in elevator.js or
person.js.
## Expected Behavior
When running, you should see:
- Transparent building with visible floors and elevator shaft
- Yellow semi-transparent elevator with clearly visible passengers inside
- Realistic door opening/closing animations
- People facing the elevator, walking forward through open doors
- Smooth leg animation during walking
- No z-fighting or disappearing surfaces when rotating view
After generating all the files, double-check by reading all the files to ensure they were produced correctly.