Fjord scene (Three.js)

1 test · 17 finished runs (13 agent, 4 raw one-shot) · 17 live demos

The prompt

Build a playable, cinematic single-page Three.js experience: a small boat drifting through a Norwegian-style fjord / coastal mountain landscape. Requirements: - ONE self-contained index.html file (HTML + CSS + JS inline). No external assets of any kind (no textures, models, fonts, audio files) EXCEPT Three.js itself, loaded via an import map from this exact pinned CDN: "three": "https://cdn.jsdelivr.net/npm/three@0.160.0/build/three.module.js", "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.160.0/examples/jsm/" All textures (water normals, rock, snow, bark, clouds, etc.) must be generated procedurally in code (canvas / DataTexture / shaders). - Scene content: steep procedural fjord walls and mountains with snow caps, rock and grass coloring by height/slope; procedural conifer forests (instanced); a water surface with animated waves and sky/landscape reflections; a lighthouse on a rocky point with a rotating beam that matters at night; a small wooden boat with 2 simple stylized 3D characters on it (one rowing/steering, one looking around, with small idle animations); distant islands; birds or other small life if cheap. - Dynamic weather cycling clear -> fog -> rain -> storm -> clearing, with smooth transitions: fog density, cloud cover, rain particles, lightning flashes + wind and bigger waves in the storm. - A full day/night cycle: sunrise, day, golden hour, sunset, night with stars and moon, lit lighthouse and boat lantern. Sky color, sun/moon lights, and fog color must track time of day. - Controls: keyboard (WASD/arrows to steer and throttle the boat, C to switch camera, T toggles auto-tour, 1-5 to force weather, N to jump time) and touch (on-screen joystick/buttons on phones). Camera follows the boat in play mode. - An "auto-tour" cinematic camera mode: slow, smooth, film-like camera moves (orbits, low water-level glides, high establishing shots, close-ups of the characters) while the boat drifts along a path through the fjord and the weather and time of day progress. - Minimal, elegant UI: small title "Fjordlys" (or a better name of your choice), a tiny hint line for controls, fading out in tour mode. - Must run smoothly on desktop and phone browsers: keep geometry/particle counts moderate, cap devicePixelRatio at 2, handle resize/orientation. - IMPORTANT for automated video capture, support these URL parameters: ?tour=1 start directly in auto-tour mode ?capture=1 hide ALL UI overlays (title, hints, touch controls) ?cycle=40 when present, compress one complete showcase into that many seconds: the time of day goes from morning through golden hour, sunset and night, and the weather passes clear -> fog -> rain -> storm -> clearing within that span (so a 40-second recording shows everything). Without it, use a relaxed pace suited to live play. Drive all animation from the requestAnimationFrame timestamp / performance.now() (not from wall-clock-independent accumulators that ignore time), so that overriding those functions steps the scene deterministically. Set window.__sceneReady = true once the first frame has rendered. - No console errors or warnings in a current Chrome. Use modern Three.js r160 APIs only (no deprecated/removed ones). Output ONLY the complete index.html, starting with <!DOCTYPE html> and ending with </html>, with no explanation and no markdown fences.