Build a beautiful, highly detailed, interactive 3D coastal diorama using Vite and Three.js. Everything must be generated procedurally using code. No premade 3D models, downloaded assets, image textures, external model files, or manually created assets. Generate all geometry, materials, textures, and animations programmatically. SCENE: Create a miniature rocky island surrounded by an animated ocean, featuring a tall lighthouse, a wooden fishing boat, pine trees, a winding coastal path, a tiny dock, grass, flowers, rocks, and coastal vegetation. Use a polished, stylized 3D diorama aesthetic with excellent composition and rich details. LIGHTHOUSE: Procedurally generate the cylindrical tower, alternating painted sections, balconies, railings, stairs, windows, glass lantern room, roof, and decorative details. Add a rotating beacon with a sweeping volumetric-style light beam. OCEAN: Generate a subdivided water mesh with custom GLSL shaders for animated waves, layered wave patterns, moving normals, reflections, and color gradients. Add procedural foam near the shoreline and rocks. Make the fishing boat bob, tilt, and rotate naturally in response to the simulated waves. ISLAND: Generate the island using procedural terrain geometry, layered rock formations, irregular coastlines, cliffs, and elevation variation. Add winding paths, moss, grass, tiny flowers, and vegetation using procedural geometry and instanced meshes. TREES: Generate pine trees procedurally with varied trunks, branches, and layered foliage. Add subtle wind-driven movement to branches and vegetation. ATMOSPHERE: Generate animated clouds, drifting seabirds using procedural geometry, ocean mist, and subtle atmospheric particles. Use a procedural sky shader and cinematic lighting. MATERIALS: Create all textures and surface variation procedurally using shader functions, noise, vertex colors, and generated canvas textures where appropriate. Use detailed wood grain, weathered lighthouse paint, rocky surfaces, and varied foliage. No external image textures. LIGHTING: Implement golden-hour lighting, soft shadows, realistic water reflections where practical, a warm lighthouse glow, subtle bloom, and strong warm-versus-cool color contrast. Add a day/night transition that changes the sky, lighting, lighthouse illumination, and environmental mood. INTERACTIVITY: Implement orbit controls, zoom, a day/night toggle, a wind-strength slider that affects vegetation and waves, and a lighthouse-beam toggle. Add smooth camera movement and a polished default viewing angle. TECHNICAL REQUIREMENTS: Use Vite and Three.js. Generate custom BufferGeometry, parametric surfaces, procedural curves, shader-based effects, and instanced meshes. Avoid using basic primitives as finished assets; use them only as building blocks for more detailed custom geometry. Keep the code modular, optimize draw calls, handle resizing, and ensure all visible controls work. Maintain smooth performance in a modern desktop browser. DELIVERABLE: Create a complete, runnable project. Run it, inspect the actual rendered scene, identify visual deficiencies, and refine the geometry, water, materials, lighting, and animation. Prioritize exceptional visual quality, intricate procedural modeling, convincing animated water, natural boat movement, and cinematic presentation. The final result should look like a carefully crafted miniature 3D artwork, not a collection of basic shapes.
