# Task: Build "Island Jelly", an interactive 3D diorama with a plush surfing rooster
Build a single self-contained `index.html` (no build step) using **three.js r165** via an importmap from jsDelivr (`three` + `three/addons/`). Use OrbitControls, RoomEnvironment and BufferGeometryUtils (`mergeGeometries`). It must run from any static server (e.g. `npx http-server`). It must look like a premium "material study": soft, tactile, toy-like, with cohesive materials. No cheap low-poly look.
---
## 1. Page & UI
- Background is warm paper `#E8E5DC`. Fonts are **Instrument Serif** italic for headings and **Inter** for UI, from Google Fonts.
- Top-left title block: tiny eyebrow "MATERIAL STUDIES", a big italic "Island Jelly.", a short rule, then a one-line subtitle: "A sandbar, three palms and a sea that wobbles back. Joe the rooster rides whatever you stir up."
- Top-right: a small pill showing the WebGL version and three.js revision.
- Right panel (frosted, 200px wide) contains:
- **The sea:** buttons "Drop a pebble" and "Drop a coconut", plus counters for Afloat / Sunk / Ashore.
- **Flavour:** three swatches that recolor the water: Lagoon `#35C8CC`, Raspberry `#F0457E`, Lime `#B4E03A`. Each has a matching deep and highlight color.
- **Sliders:** Firmness (wave speed and stiffness), Wave damping, and Tide (raises or lowers the sea level and recomputes which cells are land).
- **Buttons:** Reset, Pause, Reset view.
- Bottom-left "How to play" text. Hide the secondary text on mobile (<700px) and move the panel to the bottom-right.
## 2. Scene & rendering
- Renderer: antialias, alpha, pixel ratio capped at 2, PCFSoft shadows (2048 map), NeutralToneMapping.
- Environment: PMREM from RoomEnvironment at intensity ~0.55.
- Camera: perspective with a narrow 28° FOV, near-isometric view from (15.5, 14.5, 19).
- OrbitControls: damped, no pan, distance 12–50, max polar ~1.42. Left/right drag orbits, scroll zooms.
- Lights: a warm hemisphere light, plus a warm directional sun from the upper left that casts soft shadows.
- A large ShadowMaterial ground plane under the block.
## 3. The diorama block (10×10 units, everything in a `diorama` group that can tilt)
- **Sediment sides:** four planes whose UVs wrap around the block, textured with a procedural canvas showing strata. Layers from top to bottom: cream sand, a thin pink band, ochre, then dark brown. The band edges are wavy. Add soft grain and pale mineral inclusions in the lower bands. Close the block with a dark underside.
- **Terrain:** a 160×160 heightfield shared by seabed and island. The island is an irregular ellipse (perturbed with sin terms on its angle) that rises gently above sea level and falls off exponentially into the seabed. Add subtle ripple noise. Use sand vertex colors with slight variation.
- **Terrain shader** (onBeforeCompile):
- Wet darkening near the waterline and a thin dark line exactly at the waterline.
- Underwater tint from the water color to the deep color, by depth.
- Animated procedural **caustics**, modulated by a texture built from the water heightfield's Laplacian, so caustics focus under wave crests and fade with depth.
- **Palms:** 3 curved trunks (CatmullRom tube) with ring-banded vertex colors and taper. Each crown has 8–9 droopy procedural fronds: a rib plus triangular leaflets in several greens. Add 3 coconuts in each crown. The crowns sway gently.
- **Pebbles:** a few squashed icosahedron pebbles in pastel greys and pinks around the island rim.
## 4. Water (the "jelly sea")
- A 100×100 heightfield wave simulation with a fixed step of 1/120 s:
- Laplacian wave equation, plus a restoring spring and damping, all controlled by the sliders.
- Land cells are masked out. Clamp the height range.
- **Tilt:** the block can be tilted by dragging its sides. Tilt is a damped spring. The equilibrium surface of the water tilts with it, so water sloshes from the walls. Local gravity is rotated into diorama space.
- **Surface mesh:** a 100×100 grid updated every frame with normals. Use MeshPhysicalMaterial with transmission 1, IOR 1.33, attenuation, and a tiling procedural ripple normal map that scrolls slowly.
- **Skirt:** a transmissive wall around the perimeter that follows the water edge height, plus thin bright highlight lines along the exposed water edges.
- **Interaction:**
- Dragging on the water stirs waves, with strength based on drag speed.
- Pebbles and coconuts can be grabbed and thrown.
- Random drips make small ripples.
- **Objects:**
- Pebbles sink. Coconuts float (they are plush spheres).
- Both splash on entry, get buoyancy and drag, and are pushed by the wave gradient.
- They collide with the terrain and walls, roll visually, and keep a state (air / afloat / sunk / ashore) that drives the counters.
## 5. Plush fur shader (used by the character and the coconuts)
Use shell fur: the base mesh plus N shells (10–12), each a copy of the mesh pushed out along its normal by `shell * len`. Implement i…
# Task: Build "Island Jelly", an interactive 3D diorama with a plush surfing rooster
Build a single self-contained `index.html` (no build step) using **three.js r165** via an importmap from jsDelivr (`three` + `three/addons/`). Use OrbitControls, RoomEnvironment and BufferGeometryUtils (`mergeGeometries`). It must run from any static server (e.g. `npx http-server`). It must look like a premium "material study": soft, tactile, toy-like, with cohesive materials. No cheap low-poly look.
---
## 1. Page & UI
- Background is warm paper `#E8E5DC`. Fonts are **Instrument Serif** italic for headings and **Inter** for UI, from Google Fonts.
- Top-left title block: tiny eyebrow "MATERIAL STUDIES", a big italic "Island Jelly.", a short rule, then a one-line subtitle: "A sandbar, three palms and a sea that wobbles back. Joe the rooster rides whatever you stir up."
- Top-right: a small pill showing the WebGL version and three.js revision.
- Right panel (frosted, 200px wide) contains:
- **The sea:** buttons "Drop a pebble" and "Drop a coconut", plus counters for Afloat / Sunk / Ashore.
- **Flavour:** three swatches that recolor the water: Lagoon `#35C8CC`, Raspberry `#F0457E`, Lime `#B4E03A`. Each has a matching deep and highlight color.
- **Sliders:** Firmness (wave speed and stiffness), Wave damping, and Tide (raises or lowers the sea level and recomputes which cells are land).
- **Buttons:** Reset, Pause, Reset view.
- Bottom-left "How to play" text. Hide the secondary text on mobile (<700px) and move the panel to the bottom-right.
## 2. Scene & rendering
- Renderer: antialias, alpha, pixel ratio capped at 2, PCFSoft shadows (2048 map), NeutralToneMapping.
- Environment: PMREM from RoomEnvironment at intensity ~0.55.
- Camera: perspective with a narrow 28° FOV, near-isometric view from (15.5, 14.5, 19).
- OrbitControls: damped, no pan, distance 12–50, max polar ~1.42. Left/right drag orbits, scroll zooms.
- Lights: a warm hemisphere light, plus a warm directional sun from the upper left that casts soft shadows.
- A large ShadowMaterial ground plane under the block.
## 3. The diorama block (10×10 units, everything in a `diorama` group that can tilt)
- **Sediment sides:** four planes whose UVs wrap around the block, textured with a procedural canvas showing strata. Layers from top to bottom: cream sand, a thin pink band, ochre, then dark brown. The band edges are wavy. Add soft grain and pale mineral inclusions in the lower bands. Close the block with a dark underside.
- **Terrain:** a 160×160 heightfield shared by seabed and island. The island is an irregular ellipse (perturbed with sin terms on its angle) that rises gently above sea level and falls off exponentially into the seabed. Add subtle ripple noise. Use sand vertex colors with slight variation.
- **Terrain shader** (onBeforeCompile):
- Wet darkening near the waterline and a thin dark line exactly at the waterline.
- Underwater tint from the water color to the deep color, by depth.
- Animated procedural **caustics**, modulated by a texture built from the water heightfield's Laplacian, so caustics focus under wave crests and fade with depth.
- **Palms:** 3 curved trunks (CatmullRom tube) with ring-banded vertex colors and taper. Each crown has 8–9 droopy procedural fronds: a rib plus triangular leaflets in several greens. Add 3 coconuts in each crown. The crowns sway gently.
- **Pebbles:** a few squashed icosahedron pebbles in pastel greys and pinks around the island rim.
## 4. Water (the "jelly sea")
- A 100×100 heightfield wave simulation with a fixed step of 1/120 s:
- Laplacian wave equation, plus a restoring spring and damping, all controlled by the sliders.
- Land cells are masked out. Clamp the height range.
- **Tilt:** the block can be tilted by dragging its sides. Tilt is a damped spring. The equilibrium surface of the water tilts with it, so water sloshes from the walls. Local gravity is rotated into diorama space.
- **Surface mesh:** a 100×100 grid updated every frame with normals. Use MeshPhysicalMaterial with transmission 1, IOR 1.33, attenuation, and a tiling procedural ripple normal map that scrolls slowly.
- **Skirt:** a transmissive wall around the perimeter that follows the water edge height, plus thin bright highlight lines along the exposed water edges.
- **Interaction:**
- Dragging on the water stirs waves, with strength based on drag speed.
- Pebbles and coconuts can be grabbed and thrown.
- Random drips make small ripples.
- **Objects:**
- Pebbles sink. Coconuts float (they are plush spheres).
- Both splash on entry, get buoyancy and drag, and are pushed by the wave gradient.
- They collide with the terrain and walls, roll visually, and keep a state (air / afloat / sunk / ashore) that drives the counters.
## 5. Plush fur shader (used by the character and the coconuts)
Use shell fur: the base mesh plus N shells (10–12), each a copy of the mesh pushed out along its normal by `shell * len`. Implement…
