Write a complete, production-ready, single-file HTML/JavaScript application that renders a highly detailed, photo-realistic, navigable 3D scene of the iconic cliffside village of Sidi Bou Said, Tunisia using Three.js.
- Do NOT use any external asset URLs (no external .gltf, .obj, .jpg, or .png files) as they can break or fail CORS. All textures, heights, and models must be generated dynamically and procedurally within the script (e.g., using HTML Canvas to draw textures, procedural noise algorithms for plaster and stone, or mathematical structures for 3D meshes).
- Do NOT write placeholder comments, truncated code blocks, "// TODO" markers, or "left as an exercise" shorthand. Every single function, shader, loop, and variable must be written out in its entirety.
- The output must be a single, copy-pasteable HTML file that runs perfectly immediately when opened in a browser.
- Libraries: Load Three.js and OrbitControls via a reliable CDN (cdnjs or unpkg).
- Iconic Architecture (Sidi Bou Said Style):
- White-Washed Plaster Walls: Buildings with flat roofs, rounded corners, and a couple of traditional domes (koubba). Implement a procedural stucco texture (low-frequency noise bump map) applied to a clean matte-white material to mimic hand-plastered walls.
- Sidi Bou Said Blue Accents: Distinctive vibrant blue doors, arched frames, and window grates.
- Ornamental Windows & Doors: Procedurally generate arched wooden doors featuring detailed black ornamental stud patterns (drawn using canvas coordinates). Create blue wooden window screens (mushrabiya) or curved wrought-iron protective grilles using nested geometries.
- Cliffside Terrain & Cobblestone Alleyway:
- Establish a winding, sloped pedestrian alleyway representing the steep streets of the village, ending at a viewpoint overlook.
- The street must use a procedural cobblestone texture (canvas-generated noise representing individual rounded stones with grey grout) applied as a displacement and roughness map.
- Add a rustic stone retaining wall/barrier at the edge of the cliff.
- The Mediterranean Overlook (Background Sea & Sky):
- Provide a dramatic view of the Gulf of Tunis below the cliff.
- Water: Use a custom shader or a deep-blue MeshStandardMaterial with layered scrolling normal maps to simulate calm, glittering sea water reflecting the afternoon sun.
- Sky: A warm, bright Mediterranean sky with subtle atmospheric scattering and a powerful sun source.
- Procedural Flora (Vibrant Bougainvillea & Olive Trees):
- Bougainvillea: Create climbing vines draped over the white walls. Use instanced meshes for thousands of tiny, vibrant magenta/pink petals (procedural alpha-masked shapes) clustered together.
- Potted Plants: Place terracotta pots along the alleyway containing small green plants and flowers.
- Mediterranean Lighting & Shadows:
- Setup a high-intensity DirectionalLight representing the intense Tunisian sun, casting sharp but soft-edged shadows (
THREE.PCFSoftShadowMap). - Use a HemisphereLight with a sky-blue hemisphere color and a warm sandy ground color to emulate realistic bounce light bouncing off the white walls.
- Configure ACESFilmicToneMapping to handle the high contrast between the bright white-washed walls and deep blue shadows without blowing out the highlights.
- Setup a high-intensity DirectionalLight representing the intense Tunisian sun, casting sharp but soft-edged shadows (
- Navigation & Exploration:
- Implement OrbitControls or a first-person WASD/PointerLock setup. Restrict the camera height and boundary limits to keep the user at human scale (eye-level) as they navigate up and down the winding blue-and-white alleyway.
- Optimization:
- Maintain 60 FPS on standard desktop GPUs by employing instanced geometry for repeating architectural elements (stairs, window frames, flowers) and handling window resizing flawlessly.
Generate the full, un-truncated, single-file HTML code now.
牛逼