인터랙티브 3D 복셀 벚꽃 계곡 웹 씬

Create a highly polished, real-time interactive 3D landscape webpage that runs directly in the browser. Theme: Japanese cherry blossom valley. Use HTML, CSS, and JavaScript. Do not generate images, do not just provide a design proposal, and do not use a background image with parallax effects to fake 3D. I want an actual runnable, explorable finished product. 【1. Work Positioning】 This should be a complete, continuous valley landscape with clear depth layering, not isolated small props, floating islands, or a sandbox on a base, and not a pure technical demo. Style: modern refined voxel art. Keep the geometric language of cubic shapes, but the visuals should be high-resolution, anti-aliased, with fine lighting and shadow detail. Do not use retro low-resolution pixelation, chunky blocky stacking, or apply a pixel filter to the scene. Visual quality comes first. Better to have fewer features than to sacrifice composition, materials, and lighting. 【2. How to Use Reference Images】 If a reference image is attached, first understand its compositional layering, scale, lighting, and color relationships. Only borrow the atmosphere and visual language, then redesign the scene. Do not copy the positions of buildings, trees, mountains, or paths, and do not reproduce it 1:1. The reference image is not a background asset in the webpage. The scene itself must be made of real 3D geometry. 【3. Scene Composition】 When the page opens, it should already present a complete, attractive view. The user should not need to rotate the camera first to find a good angle. Use a perspective camera, not a sandbox-style isometric top-down camera. The frame should have clear foreground, midground, and background: Foreground: One old cherry blossom tree with strong presence, combined with rocks, grass, a stone lantern, and a few falling petals, forming a natural framing at the edges of the scene, but it must not block the river, bridge, or main buildings. Midground: A winding river guides the eye into the scene, with a red wooden bridge crossing it. Village houses, a tea house, a shrine, and paths are distributed along the terrain, with believable connections between buildings. The ground has elevation changes, shoreline variation, and natural transitions, not a flat plane with evenly placed models. Background: A multi-tiered pagoda on the hillside, forests at different distances, mountain ridges, and distant snow-capped peaks. Use scale changes, occlusion, warm/cool color shifts, and atmospheric perspective to show distance, not just shrinking distant objects. Do not spread every element evenly. There must be hierarchy, density variation, negative space, and a clear focal point. 【4. Modeling and Visual Quality】 Cherry blossom tree: The trunk should have bends, branches, and root flare. The canopy is made of irregular blossom clusters, with gaps, thickness variation, and visible branches. Do not make it from a few regular spheres or blocky clumps. Buildings: Roofs should have layered tiles, eaves, beams, columns, and window lattice. Different buildings should differ in purpose, volume, and height. Do not copy the same house across the valley. Terrain: The shoreline should have wet stones, grass, and vegetation transitions. Avoid overly regular steps, repeating stripes, checkerboard patterns, and obvious procedural grid artifacts. Water: Must reflect surrounding objects, with moderate ripples, depth variation, and shoreline transitions. Use actual scene reflection where possible; if performance requires downgrading, keep it visually believable. Do not replace water with flickering noise, heavy distortion, or a flat blue plane. Details: A small number of koi fish, falling petals, fireflies, a waterfall, and distant birds are acceptable, but they should all serve the atmosphere and must not make the scene noisy. Do not pile up details just to claim a high object count. 【5. Color and Atmosphere】 Default mood: blue hour. Cool-toned valley and distant mountains, soft pink cherry blossoms, warm but not overexposed lantern and window light. Warm light should be concentrated where people would be active. Do not tint the whole environment orange. Need soft shadows, light/dark contact where objects meet the ground, reasonable exposure, restrained bloom, anti-aliasing, and layered mist that respects distance. Avoid washed-out, hazy gray, oversaturation, full-screen thick fog, blown-out lights, and visible aliasing. Blocky geometry can be crisp, but the rendering itself must not look rough. Also provide two additional atmospheres: "Morning" and "Rain". Switching should change sky, ambient light, fog, and local effects together, not just modify the background color. 【6. Interaction and UI】 Provide four designed camera views: Valley panorama, low riverside angle, temple path, and hillside overlook. Switching should be smooth, and each view must have its own compositional value. Basic interaction: Mouse drag to look around, scroll wheel to zoom or move forward, touch support for drag and two-finger zoom. Provide reset view, hide UI, and save current frame functions. Optional enhancements: Free exploration, slow camera tour, ambient sound. Ambient sound is off by default and only plays after the user actively clicks. Extra features must not reduce the completeness of the default view. The UI should be restrained and well designed, with the landscape as the focus. Title and control bars should sit at the edges and not block the focal point. On desktop and mobile, there must be no overflowing buttons, overlapping text, or unusable controls. 【7. Engineering and Performance】 You may use Three.js / WebGL, plus version-pinned, mutually compatible CDN dependencies. Prefer mature rendering capabilities. Do not rewrite an entire engine just to claim "zero dependencies". Keep the custom HTML, CSS, and JavaScript organized in a single HTML file as much as possible. Scene objects should be generated from procedural geometry and materials, with no external image or 3D model assets. Repeated objects should use appropriate batching or instanced rendering. Reasonable control over subdivision, shadows, reflections, and render resolution. Provide a high-quality mode and a lightweight mode; mobile defaults to lighter settings. Do not rely on endlessly increasing voxel count for detail. Include a loading indicator, a message when WebGL is unsupported, and necessary error handling. Do not autoplay sound when audio is not enabled. Respect the system preference for reduced motion. 【8. Pre-Delivery Acceptance】 Do not deliver immediately after writing the code. If the current environment supports running in a browser and taking screenshots, actually open the page first, check the default camera, the four views, atmosphere switching, and desktop/mobile layouts, then fix obvious composition, exposure, occlusion, and rendering issues based on the screenshots. Key checks: Is there a blank screen, load failure, or console errors? Are there clipping issues, flickering, shadow artifacts, overexposure, or water anomalies? Does the default view really look like a complete landscape, not a small diorama? Are the function buttons actually usable, and does mobile avoid overflow? You may use browser screenshots for acceptance, but do not call image generation tools. If any test was not completed, state it honestly. Do not claim verification that was not done. Final deliverables: 1. An actual HTML file that exists and can be opened, or an interactive preview supported by the current environment. 2. If screenshots are possible, include one real browser-rendered screenshot. 3. A brief explanation of controls and any required runtime conditions. Please complete the build directly. For non-critical details, make consistent design choices yourself. Do not keep asking me to decide implementation issues that you can resolve on your own.