Create a complete interactive 3D web experience contained in...

Prompt

Create a complete interactive 3D web experience contained in **one single `index.html` file**. The subject is one **realistic white wool sock**, displayed as an isolated 3D object that the user can freely inspect. ## Core requirement Create a realistic 3D model of a **thick knitted wool sock**. It must: - Be a real three-dimensional object, not a flat illustration. - Have a recognizable sock shape: - ribbed cuff/opening - ankle - heel - foot - rounded toe - Be completely empty — **no foot or leg inside it**. - Look naturally shaped, as if it has been worn before and then taken off. - It should not stand perfectly stiff or geometrically straight. - Add subtle asymmetry, bends, compression, wrinkles and deformation so it feels like a real physical sock. - The opening should visibly be hollow. ## Wool material The most important part is the material. The sock should look like **actual thick white wool**, not plastic, clay, rubber, smooth fabric or a generic white shader. Create convincing procedural wool detail using techniques available in WebGL/Three.js, including as many of these as practical: - knitted/ribbed fabric structure - fine fibers - fuzzy silhouette - tiny stray hairs - irregular wool strands - roughness variation - subtle bump/displacement - micro shadows between fibers - softer/thicker areas around the cuff, heel and toe - slightly uneven off-white coloring rather than perfectly uniform RGB white Individual fibers should react naturally to the lighting. If useful, combine shaders, procedural textures, geometry, instancing, SVG-generated textures, canvas-generated textures, noise functions, or layered meshes. Do **not** rely on external image texture files. The wool should remain convincing when the camera gets close to the object. ## Geometry Do not simply use a basic cylinder with a bent end. Build an actual sock-like mesh. The foot and heel should have believable volume and topology. Add subtle surface irregularities so the object does not look mathematically perfect. The sock should feel soft and slightly collapsed under its own weight. The toe can point slightly downward and the ankle can have a gentle bend. The cuff should show visible vertical knitted ribs. Inside the sock opening, create enough geometry and shading that it clearly appears hollow rather than capped. ## Interaction The user must be able to: - left-click + drag to rotate around the sock - scroll to zoom - right-click or equivalent gesture to pan if appropriate - inspect the sock from **all 360° angles** - zoom close enough to inspect the wool texture Use smooth OrbitControls-style interaction. Do not continuously auto-rotate the sock unless there is a small optional toggle for it. ## Presentation Create a minimal product/3D-inspection environment. Use: - neutral soft studio background - realistic soft lighting - key light - fill light - rim/back light - ambient/environment illumination - soft contact shadow beneath the sock - physically believable highlights and shadows The sock should be the main focus and occupy most of the viewport. Avoid unnecessary UI. A tiny unobtrusive hint such as: `Drag to rotate • Scroll to zoom` is acceptable. ## Technical constraints Everything must exist in **ONE HTML FILE**. The file should contain all: - HTML - CSS - JavaScript - shaders - SVG - procedural textures - geometry-generation code You may load a mainstream rendering library such as **Three.js from a CDN**, including OrbitControls, but do not load any external 3D models, texture images, GLTF files, OBJ files or material assets. Generate the sock programmatically. Use WebGL / Three.js rather than faking the result with a pre-rendered image. Use SVG or Canvas where useful for generating procedural maps or supporting visual effects. Make the page responsive and fill the entire browser viewport. It should run by simply opening `index.html` in a modern browser. ## Performance Aim for a convincing visual result while remaining reasonably performant on a modern desktop GPU. If thousands of wool fibers are used, use instancing or another efficient technique. Use sensible pixel-ratio limits. Avoid creating millions of unnecessary polygons. ## Quality target The final result should look closer to: **a high-quality interactive 3D product scan of a real wool sock** than: **a smooth cartoon sock made from primitive geometry.** Pay special attention to: 1. silhouette 2. heel geometry 3. hollow opening 4. knitted cuff 5. wool fuzz 6. close-up texture 7. realistic lighting 8. natural deformation Do not simplify the wool effect just because it is difficult. ## Output instructions Return **only the complete contents of `index.html`**. Do not explain the code. Do not provide pseudocode. Do not split the solution into multiple files. Do not leave TODOs or placeholder implementations. The HTML must be immediately runnable. OUTPU the HTML file in chat as a resoibse

A system prompt was added to support web rendering