The user is asking for a 3D animation of a rack shelf where: 1. You can select the number of shelves and size 2. The shelf rotates 3. It zooms in and out 4. Touchscreen-friendly (for phones) I should build a full HTML page with 3D. Best approach: use Three.js from a CDN, or write my own CSS 3D transforms. Given that I want a robust, touch-friendly, phone-optimized experience, Three.js would be the solid choice for 3D (with proper lighting, materials, orbit controls via touch). Actually I can implement custom touch handling (drag to rotate, pinch to zoom) without OrbitControls, keeping control over it. Let me plan: **Layout/Design:** - Not a run-of-the-mill centered hero. Start with something distinctive: an industrial workshop/blueprint aesthetic. The subject is a rack shelf — warehouse/industrial furniture. So the design language is: industrial, metal rack, warehouse, steel, safety orange/yellow accents, blueprint grid background, technical annotations. - Fonts: distinctive display typeface — "Archivo Black", "Bebas Neue", or something industrial like "Saira Condensed"/"Chakra Petch" for the technical feel. Body: "Space Grotesk" or "IBM Plex Sans". A combo of a condensed industrial display ("Archivo Black" or "Big Shoulders Display") with "IBM Plex Mono" for spec readouts plus body sans-serif. Big Shoulders Display is very industrial (Chicago style). Let me use "Big Shoulders Display" for headings and "Space Grotesk" for body, "IBM Plex Mono" for measurements/technical labels. Or "Chakra Petch" — techy. Choice: Display: "Big Shoulders Display" (condensed, industrial). Body: "Space Grotesk". Mono accent: "IBM Plex Mono" or "Space Mono". **Palette:** Industrial: dark steel charcoal background, but I'll use multiple accents rather than a single neon — safety orange (#ff6a00), steel blue, off-white, warning yellow. A mid-dark slate/blue-gray with layered textures (blueprint grid, diagonal hazard stripes, noise), warm safety orange + steel blue + off-white. Background: layered — subtle blueprint grid + vignette + drifting particles/dust. **Features:** 1. Config panel: number of shelves (1–8, slider or stepper), dimensions: width, depth, height (sliders in cm). Material color choice for the frame (safety orange, steel gray, blue, green)? That would be nice — pick the rack color. 2. Auto-rotation toggle + speed? The request is: "make the shelf rotate and zoom in and out." So an animation: continuous rotation and slow auto zoom in/out (breathing zoom). Add user control: touch drag to rotate (touch OrbitControls-like), pinch to zoom, wheel to zoom. Also an "Auto" toggle that when on rotates + zoom oscillation. 3. Touch: one-finger drag for rotation, two-finger pinch for zoom. Tap buttons for zoom in/out as well. 4. Live spec readout: dimensions, shelf count, load capacity (playful calculation: capacity = width × depth × shelves × some coefficient), price estimate? A fun "est. capacity" and "weight" readout that updates. 5. Animation: when settings change, the shelf rebuilds with a little staggered animation (shelves slide in, uprights extend). Nice micro-interactions. 6. Background: 3D floor grid in the scene (Three.js grid), fog, and page background layers (grid, subtle animated diagonal hazard stripes at the edges). 7. Header: distinctive opener — a large industrial title like "RACK / BUILDER" with technical spec strips, not a centered hero. Top bar with logo mark and a live "SPEC" ticker. 8. Buttons: zoom in/out (+/−), reset view, auto-rotate toggle, wireframe toggle? Keep the scope sane while still being rich. **Technical approach:** Three.js from CDN (unpkg or cdnjs). Use a stable version: three@0.160.0 module, or the old non-module build r128 from cdnjs (widely cached, works without importmap). Simplest and most robust: use cdnjs three r128 (non-module, global THREE). https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js — reliable. I'll write my own touch/pointer controls (drag + pinch + wheel), so no need for OrbitControls. Scene: - PerspectiveCamera - HemisphereLight + DirectionalLight + subtle point light - Floor: circular or grid — a big plane with grid texture (GridHelper) + soft radial shadow. Use a CanvasTexture for a radial gradient shadow under the rack. - Rack construction: - 4 (or 6) uprights (vertical posts) — box geometry with holes? Simple box, slightly rounded? Box is fine. Could add gusset plates. - Shelves: each shelf = top slab (box) + front rail + side brackets. - Feet: small feet at the bottom of each upright. - Cross-braces: an X-brace on the back for realism (thin boxes rotated). - Optional: sample items? Could add optional "stock" toggle — a few boxes on the shelf for liveliness. That adds delight: a "Load stock" toggle that randomly places cardboard boxes on the shelves. Fun and distinctive. Include as a toggle. - Rebuild function with staggered animation: keep a list of parts, animate scale/position over time with easing. Simpler: animate a progress value, build each part with an offset — animate the whole rack: uprights scale-Y from the bottom, shelves slide in from left with a stagger. Implementation: each part has userData.spawn = delay; in the render loop, ease local scale/position based on (t - delay). Rotation/zoom: - A pivot group `rig` containing the rack; auto-rotate: when auto is on, rig.rotation.y += speed*dt; camera z oscillates: baseDist + amp*sin(t*speed). - User drag: adjusts targetYaw/targetPitch; when auto is on, the auto adds to yaw. Actually simpler: drag directly modifies the yaw target; auto-rotate adds continuously. Pinch modifies targetDist; zoom buttons also do. - Damping: lerp current value toward target for smoothness. - Pitch clamp: -0.25 to 1.1 rad? The camera orbits around the rack: use spherical coordinates — put the camera on a sphere of radius dist, rotate by yaw, tilt by pitch. Look at the rack center (slightly above 0). Implementation details: - Renderer with antialias, setPixelRatio(min(devicePixelRatio,2)), resize handler. - Shadows: directional light with shadow map, floor receives. On mobile shadow map size 1024. Should be fine. - Materials: MeshStandardMaterial with metalness/roughness. Frame metal: metalness 0.6, roughness 0.35. Shelf top: if material is "steel", metal; if "wood", wood color with low metalness. Add a material selector: powder-coat frame color swatches (safety orange, graphite, steel blue, forest green) + shelf type (steel deck / wood plank / mesh). Mesh deck can be simulated with a wireframe-ish look? Simpler: shelf type: solid / slat (a few thin slats with gaps). Slats look great and are simple: 5–6 thin boxes per shelf. Config controls (touch-friendly, big hit targets): - Shelves: stepper with big − / + buttons, range 1–8, big numeric display. - Sliders: width (60–200 cm), depth (30–90), height (80–240). Big thumbs, styled range inputs with value readout in cm. - Color swatches: 4 circles. - Deck: Steel / Wood / Slat (segmented control). - Toggle: Auto orbit (default on), Stock (boxes on shelf, default on? maybe off for performance; default on with a few boxes), - Buttons: Zoom in, Zoom out, Reset, Wireframe? Skip wireframe. "Top view"? Could add a view presets: Front / 3/4 / Top — nice micro-interaction, sets yaw/pitch targets. 3 preset buttons. Spec readout panel (mono font): overall dimensions, bay count fixed at 1, capacity kg (playful formula), estimated weight, "SKU" generated from parameters (fun: RB-120x40x180-5). Updates live — with a small flash animation on change. Page structure: - Top bar: brandmark "STEELWORKS · RACK LAB" on the left, live status LED + "RENDER ONLINE" on the right, plus a small clock or frame counter. - Main: viewport (canvas) full-bleed as the star — since it's a 3D animation, the viewport should dominate. Control panel: on desktop, a side panel; on phone, a bottom sheet / scrollable panel below the viewport. Given the emphasis on phone: layout = full-viewport 3D stage at the top (about 60–70vh), with a control deck below that has horizontally scrollable sections or a compact grid. Or, an overlay panel with collapse on mobile. Better mobile approach: canvas fixed full-screen behind, UI panels overlaid: header at top, controls as a bottom sheet that can be collapsed/expanded (with drag handle). This feels like a real mobile app. The bottom sheet has: shelf count stepper, sliders, swatches, deck segment, toggles, view presets. A collapse button to reveal the full 3D scene. Default: expanded on load? Maybe partially. Let's have it default open, with the viewport visible above. Desktop: the panel is a right column (fixed width ~360px), the stage fills the rest. Still an app-like layout. Fine. Micro-interactions: - Buttons: pressed states, hover lift. - Slider value ticks. - Spec readout flashes orange on change. - Rebuild: parts stagger-animate in. - Background: CSS layered — subtle blueprint grid + corner hazard stripes + vignette; plus floating dust particles in the 3D scene (Points) for atmosphere. - Scroll reveals: on mobile, the page is mostly a single-screen app; maybe not much scroll. Fine — the animation is the content. - Small "hazard stripe" animated accent in the header. Status ticker: a thin strip with scrolling text like "BAY 01 · POWDER COAT C4 · FINISH RAL 2004 · …" — marquee animation. Adds life. Use CSS animation marquee. Now let's carefully code this. Key implementation pieces: ```html RACK LAB — 3D Shelf Builder

(or let three create the canvas; make my own) Overlay HUD: dimension labels? Could also add floating spec chips over the stage: "W 120 · D 40 · H 180" in the top-left of the stage, rotation speed indicator. Zoom buttons in the bottom right of the stage (+, −, reset, auto)

``` Layout plan: - body: 100dvh grid: header (fixed height), main row: stage + panel. Mobile: column: header, stage (flex 1), bottom panel (collapsible, max-height 45dvh, with a handle). Use media query at max-width 900px. Actually, a simpler and more robust layout: - CSS grid on body: `grid-template-rows: auto 1fr; height:100dvh; overflow:hidden`. - Main: `display:grid; grid-template-columns: 1fr 380px;` on desktop; on mobile `grid-template-rows: 1fr auto;` with the panel as a bottom sheet with its own internal scroll. Stage overlays: - Top-left: dimension readout chip (mono) — live W×D×H, shelves n. - Bottom-left: hint "DRAG TO ORBIT · PINCH TO ZOOM" small, fades after a few seconds? Keep it small always. - Right-side vertical control column (or bottom right): circular buttons: zoom+, zoom−, reset, auto toggle. On mobile: bottom-right above the panel. Panel content sections with labels in "01 / SHELVES" format. Now Three.js scene details: Units: cm → scale 0.01, or use cm directly and adjust camera far. Use meters: divide cm by 100. Rack max 2.4m tall. Camera distance ~ 2.5–6. Build function `buildRack(cfg)`: - Clear the old rack group (dispose geometry? reusing a shared geometry is complex with different sizes — dispose properly to avoid leaks: traverse and dispose geometry; keep materials shared/cached). - Materials cached by key (color + type). Parts: - cfg: shelves (1..8), W, D, H (cm), frameColor, deckType ('steel'|'wood'|'slat'), stock bool. - Uprights: 4 posts at the corners. Post section: width 5cm, depth 5cm, full height H. Plus feet: small 8x8x3 base. Posts slightly inset? Standard: posts at corners, shelves between with a small gap. Post section width pw = 4cm (0.04m). - Shelf y positions: distribute shelves evenly: top shelf near the top: y_i = topMargin + i*(spacing). Define: post top = H. Shelf clearance: bottom shelf at h=10cm (above the feet), top shelf at H - 6? Actual typical: shelves evenly spaced between 12 and H-8. spacing = (H - 20) / (n-1) if n>1, else H-15? For n=1: put it in the middle of the upper area? For a single shelf, put it at 55% of the height. Let's do: bottomY = 0.12, topY = H - 0.08; if n==1, y = 0.55*H. Even distribution. - Shelf deck: size (W - 2*pw - 0.02) x (D - 0.06) x 0.02 (steel) or 0.025 wood; slat: 6 slats across the width, each width = span/6 * 0.72. - Front rail: a small lip at the front of each shelf: a box of full width, height 4cm, depth 1.5cm, attached to the front bottom of the shelf. Nice detail. - Cross-braces: on the back, between the two back posts: 2 diagonals forming an X per bay? For all shelves, one big X across the full height back + a horizontal top beam connecting the tops of the posts: top beam: a horizontal beam (W) x (0.04) x (0.04) at the top connecting all 4 posts? Actually the top of a rack is often just posts + maybe a top beam. Add top beams front/back + side beams at top for structure. And X braces (thin 2cm box) on the back. - Gussets: small triangles? Skip; add small plate boxes (6x0.8x8) where the shelves meet the posts — detail. - Stock boxes: per shelf (maybe skip the top one), place 2–4 random boxes: size 15–35cm wide, 12–35 tall, depth ~ D*0.7; color: cardboard variations (#c9a06b, #b98d5a, #a67c4e) with a slightly darker edge? Keep it simple, single color + 1 with a label stripe (small white box on the front). Random per build with a seeded random? Random on rebuild is fine. Add subtle random rotation. Spawn animation: - Each part gets userData: {type:'upright'|'shelf'|'box'|'beam', delay, from: offset vector}. Animate with `spawnT` from 0, duration ~1.2s. In the loop: for each part, p = clamp((elapsed - delay)/dur); e = easeOutCubic(p); apply: upright: scaleY from 0.001, set position.y accordingly? Easier: scale group children. For uprights: mesh.scale.y = e, and to anchor to the bottom, build the geometry translated up by half: create geometry with the base at 0: BoxGeometry then geometry.translate(0, h/2, 0). Then scale.y extends upward. - Shelves: slide in from x = -0.6 (world) with fade? Opacity fade on standard material requires transparent — flicker risk. Use slide + scale: start with position.x offset -0.8 and scale.x? Just slide x from -0.7 to 0, with slight easeOutBack. Stagger delay per shelf index: 0.15 + i*0.08. - Boxes: pop with easeOutBack scale from 0, staggered. - Beams: slide down from y+0.4? Or scale.x from 0 (with a center anchor that's fine). Save the part's base position in userData.basePos, and reapply = basePos + offset*(1-e). Dust particles: THREE.Points with ~150 points in a 6m box around, slowly drifting upward, additive blending, tiny opacity, regenerate positions when out of range. Gives a sense of life. Floor: - A big circular mesh (CircleGeometry radius 6) with a dark material, plus a GridHelper (size 12, divisions 24, colors subtle) slightly above. Plus a radial gradient shadow texture: use a CanvasTexture — a plane 4x4 under the rack with a black→transparent radial gradient, opacity 0.5, blending normal. Actually simpler: rely on real shadows (directional light castShadow, floor receiveShadow). Both: real shadow + soft contact blob for grounding. Fog: scene.fog = new THREE.Fog(bg, 8, 16) to fade the floor edges. Background: renderer clear color = stage background color (deep steel blue #10151c?). Let's design the palette: Palette (industrial, not a single neon): - Base bg: deep blue charcoal #141a21 / #0f141a — I have multiple accents (orange, yellow, off-white, blue) and layered surfaces, so it's fine. Could also do a lighter "workshop" theme: paper-blueprint light bg? Light themes with 3D can be hard. Go with a dark steel with safety orange #ff6b1a, hazard yellow #ffc93c, steel blue #6fa8c9 / #4f7f9e, off-white #f2ede4. The surfaces are layered, so it reads as industrial rather than a flat dark page. Panel: #1a222b with 1px border #2c3947, section labels orange. Big Shoulders Display on headers. Header: brand: an orange square logo with a white "R", or a shelf glyph (3 horizontal lines) — a CSS mini-rack icon. Title: "RACK LAB" big condensed, subtitle "POWDER-COATED STEEL BAY BUILDER". Right side: status: a blinking LED green "LIVE RENDER", frame rate (updated via JS every 500ms: "60 FPS") — live detail. And the SKU readout. Ticker under the header: marquee: "SPEC R120-040-180 · 5 LEVELS · EST. CAPACITY 600 KG · FINISH: RAL 2004 SAFETY ORANGE · GALVANIZED STEEL 1.2 MM · …" updates with config (nice! ticker text reflects current settings). HUD chips over stage: top-left: "BAY 01" + large dimensions: "120 × 40 × 180 CM" mono; top-right: FPS + auto-orbit indicator. Bottom-left: hint. Bottom-right: round buttons. Panel controls detail: Section 01 — SHELVES: stepper: minus button, big number, plus button. Range 1..8. Section 02 — DIMENSIONS: 3 sliders with labels + value chips: WIDTH 60–200 step 5 (default 120) DEPTH 30–90 step 5 (default 40) HEIGHT 80–240 step 10 (default 180) Section 03 — FRAME FINISH: swatches: Safety Orange #ff6b1a, Graphite #4a5560, Signal Blue #3d7ab8, Forest #2e6b4f. (circle buttons, ring when selected) Section 04 — DECK: segmented: STEEL / SLAT / WOOD Section 05 — EXTRAS: toggle: Auto orbit (default on), Stock load (default on). Section 06 — VIEW: 3 preset buttons: ISO / FRONT / TOP + Reset. Footer of panel: capacity readout? Instead place a spec card in the stage HUD or panel: "EST. CAPACITY 600 KG · SELF WEIGHT 38 KG". Maybe put the spec strip at the top of the panel: big numbers. Interaction wiring: any config change → rebuild with animation; also update SKU, ticker, HUD, capacity. Auto orbit + zoom oscillation: when auto on: yawVel = 0.35 rad/s added to autoYaw; dist target oscillates: distBase + 0.55*sin(t*0.5). Pinch/drag/wheel modifies userDist multiplier. Compose: finalDist = userDist * (autoZoom ? 1 + 0.18*sin(t*0.45) : 1). Hmm, but user zoom during auto might feel off. Simpler: keep a `dist` value; auto zoom adds a small sine offset around dist. Drag modifies yaw and pitch (offsets). Auto-rotate continuously adds to baseYaw. Reset: baseYaw=initial, pitch=0.32, dist=default computed from rack size: dist0 = max(W,H)*0.01 * 2.6. Camera: spherical coords: - yaw (rotation around Y axis), pitch (elevation angle), - camPos = target + dist * (cos(pitch)*sin(yaw), sin(pitch), cos(pitch)*cos(yaw)); target = (0, H*0.01*0.45, 0). - lerp camera position every frame for smoothness: maintain current {yaw,pitch,dist} and lerp toward target. Touch handling on the canvas: - pointerdown: track pointer with a Map. If 1 pointer: rotate on move (dx → yawTarget += dx*0.005; dy → pitchTarget clamp(0.05..1.25)). If 2 pointers: pinch: distTarget *= prevDistBetween/currentDistBetween; also pan? Skip pan. - wheel: distTarget *= 1 + deltaY*0.001. - dblclick / double-tap: reset? Add a reset button instead. Prevent default touch action: canvas style touch-action: none. Also, while dragging, should I pause the auto-rotate addition? If auto is on and the user drags, both apply — acceptable; or temporarily suspend auto while dragging, resume after 2s idle. Let me do that: dragging flag; when not dragging, auto-rotate adds. Zoom buttons: distTarget *= 0.8 / 1.25 (clamp [minDist, maxDist] = [0.9, 9]). FPS meter: frame counter every 500ms. Slat deck: slatCount = 6. Deck colors: steel: #9aa7b0 metal; wood: #b07c46 rough; slat: use the frame color? A slat in the frame's steel color. Wood: wood color regardless of frame. Steel/slat: slightly brighter than the frame? Deck = a brightened frame finish color (looks like same powder coat). Actually in reality, deck = same finish as the frame. Use a slightly brighter version of frameColor for deck, steel/slat; wood stays wood. Capacity calc (playful): perShelf = 60 + W*0.3 kg? Let's do: perLevel = (W/100 * D/100) * 180 kg/m² ≈ W*D*0.018… W120 D40 → 0.48m² ×180 = 86kg/level. Total = levels*86 ≈ 434. Show "EST. CAP ~ 430 KG". Self-weight: (2*(H*2 + W) *0.9 + shelves*(W*D*0.01*1.5))… let's just fake it: sw = H*0.12 + W*0.15 + n*3 → 180*0.12=21.6+18+15=54 kg. Fine — label it EST. SKU: `RB-${W}${D}${H}-${n}L-${colorCode}` e.g., RB-12040180-5L-ORG. Now CSS design details: Fonts: - Display: 'Big Shoulders Display' weights 500 700 900. - Body: 'Space Grotesk' 400 500 700. - Mono: 'IBM Plex Mono' 400 600. (or Space Mono; IBM Plex Mono fits industrial.) Actually Big Shoulders is now "Big Shoulders Display" on Google Fonts. Yes. Header layout: left: logo block (orange square 34px with a white shelf-lines icon + stacked wordmark: "RACK LAB" big 24px condensed + small "SHELF BAY CONFIGURATOR" 9px with letter-spacing). Middle (desktop only): maybe the spec readout inline. Right: LED + "LIVE · 60 FPS" mono chip; hide on small screens. Ticker: height 26px, bg #0d1116, top and bottom border #263140, mono 11px letter-spacing, orange separators "▪". Marquee: duplicate content, animation 22s linear infinite. Stage: position relative; canvas absolute full. Overlay HUD: - .hud-tl: "BAY 01" small orange tag + dimensions big mono 18-22px off-white; below a small "n LEVELS · DECK: SLAT". - .hud-tr (desktop): fps? already in header; place a view preset here on desktop? Keep presets in the panel only; on the right of the stage, zoom buttons column bottom-right. - .hint bottom-left: "DRAG · PINCH · SCROLL" small. - .zoomcol: bottom-right: 44px circular buttons: +, −, ⟳ (reset), AUTO (toggle shows state, orange when on). Style: bg #1a222bcc, border, hover scale. Stage frame: inner border overlay: 1px #2c3947 inset + corner ticks (blueprint corner marks) — 4 small L-shapes via pseudo-elements on a .frame div. Nice technical touch. Panel: width 380px on desktop; bg #161d25; left border. Sections with headers: number (orange mono) + title (condensed, letter-spaced). Slider styling: track 4px #2c3947, filled portion via background gradient set by JS (linear-gradient to right, orange p%, track p%). Thumb: 22px square? A square thumb is industrial: 20x20, bg #f2ede4, border 2px orange? Use accent: thumb bg orange, border dark. Value chip: mono, right-aligned. Stepper: 56px big square buttons, number in the middle in display font 44px orange. Swatches: 34px circles, ring on selected (box-shadow 0 0 0 3px). Segmented: 3 buttons in a row, active = orange bg with dark text. Toggle: custom checkbox: 46x26 track, square knob 18px, on: track orange, knob slides. View preset: 3 small buttons in a row + full-width reset? Reset is also in the stage; fine. Spec card at the bottom of the panel: grid 2 cols: "EST. CAPACITY" big orange number + "KG", "SELF WEIGHT" + "KG", and SKU line. Values flash on change (add 'flash' class, remove after animation). Mobile (<900px): body rows: header, ticker, stage (1fr), panel (auto, max-height 42dvh, overflow-y auto, collapsed state? Add a collapse handle button at the top of the panel: chevron, toggles body class 'sheet-collapsed' → panel max-height 0 (hidden), stage takes the rest; handle stays visible: implement as a bar always visible (40px) with a grip + "CONFIGURE" label, body collapses content. Simpler: a button row inside the panel top is sticky: "⌃ CONFIG" toggles. Let's do: .sheet-head (always visible, 44px, with grip line + "CONFIGURE RACK" + chevron). .sheet-body scrolls; class .collapsed → max-height:0. Default: expanded? On phone, expanded by default would take 45% — the user asked for an animation; but also asked for config. Default expanded, user can collapse. Good. On mobile hide the zoomcol? Keep it but smaller and position it bottom-right above the sheet head. It's inside the stage, so it's fine. Background layering behind everything: body bg: base #0e1319 with: - repeating-linear-gradient fine grid (24px) rgba(255,255,255,0.02) - radial glow top: rgba(255,107,26,0.06) - The 3D scene has its own fog; the stage covers most of it. Add corner hazard stripes: on the right edge of the header? A 6px strip above the ticker, hazard repeating-linear-gradient 45deg orange/dark, animated? A static hazard strip as an accent under the header is a good signature: 5px tall. Maybe animate a slow shift (background-position) — subtle life. Animate it. Noise: skip (perf). Loading: a small "INITIALIZING RIG…" overlay that fades out after the first frame? Nice touch: a .boot overlay with the logo + a progress bar that animates, fades out after ~0.8s. Simple CSS + JS timeout. Include it. Now write the JS carefully. Order: config state object; DOM references; buildThree; buildRack; events; loop. Let me write the full code. ```js const cfg = { shelves:5, W:120, D:40, H:180, color:'#ff6b1a', deck:'slat', auto:true, stock:true }; ``` Default deck: slat (looks good). Default stock: true (liveliness). Color: safety orange. Color map: ``` const COLORS = { org:'#ff6b1a', gra:'#5a6672', blu:'#3d7ab8', for:'#2f7d5c' }; ``` Swatch data: [{id:'org',hex:'#ff6b1a',name:'SAFETY ORANGE'},{id:'gra',hex:'#5a6672',name:'GRAPHITE'},{id:'blu',hex:'#3d7ab8',name:'SIGNAL BLUE'},{id:'for',hex:'#2f7d5c',name:'FOREST'},{id:'yel',hex:'#e8b923',name:'HAZARD YELLOW'}] — 5 swatches. Material cache: ``` const matCache = {}; function mat(key, maker){ if(!matCache[key]) matCache[key]=maker(); return matCache[key]; } ``` frameMat(hex): MeshStandardMaterial({color:hex, roughness:.38, metalness:.55}) deckMat: steel/slat → color = hex brightened by 0.18: use Color(hex).offsetHSL(0,0,0.12); roughness .45 metal .5. wood: color 0xb0794a? #b0794a roughness .8 metal .05. cardMat(i): array of cardboard colors. Geometry helpers: ``` function box(w,h,d,m,x,y,z, ry=0){ const g=new THREE.BoxGeometry(w,h,d); const mesh=new THREE.Mesh(g,m); mesh.position.set(x,y,z); mesh.rotation.y=ry; mesh.castShadow=true; mesh.receiveShadow=true; return mesh; } ``` Uprights are anchored: geometry.translate(0,h/2,0) so the base is at y=0. buildRack(): ``` function buildRack(){ if(rack) { scene.remove(rack); rack.traverse(o=>{ if(o.isMesh){ o.geometry.dispose(); } }); } // Don't dispose shared cached materials. rack = new THREE.Group(); rack.name='rack'; parts = []; const W=cfg.W/100, D=cfg.D/100, H=cfg.H/100; const pw=0.045, pd=0.055; const mF = frameMat(cfg.color); const deckColor = cfg.deck==='wood' ? '#b0794a' : new THREE.Color(cfg.color).offsetHSL(0,0,0.14).getHexString(); const mD = deckMat(deckColor, cfg.deck==='wood'); // posts at 4 corners, centered: x=±(W/2 - pw/2), z=±(D/2 - pd/2)? Posts at outer corners: x=±(W/2 - pw/2), z=±(D/2 - pd/2). const px=W/2-pw/2, pz=D/2-pd/2; [[px,pz],[-px,pz],[px,-pz],[-px,-pz]].forEach((p,i)=>{ const g=new THREE.BoxGeometry(pw,H,pd); g.translate(0,H/2,0); const m=new THREE.Mesh(g,mF); m.position.set(p[0],0,p[1]); ... castShadow parts.push(part(m, {kind:'post', delay:0.05+i*0.06})); // feet const f=box(0.09,0.03,0.09, mF, p[0],0.015,p[1]); parts.push(part(f,{kind:'post',delay:0.05+i*0.06})); // scale together }); ``` Hmm, feet scale.y anchored at bottom: foot geometry base also at y=0: translate. OK, foot: geometry BoxGeometry(0.09,0.03,0.09) translate(0,0.015,0), mesh.position.y=0. Then scaleY extends upward from 0. Good. Top beams: front & back: box(W, 0.05, 0.04) at y=H-0.025, z=±(D/2-0.02). Sides: box(0.04,0.05,D) at x=±(W/2-0.02), y=H-0.025. kind:'beam' animate scale.x? The side beams along the Z axis… Generic: scale all axes from 0.1→1 easeOutBack? Beams: animate with a pop from scale 0, fine. Back X-braces: back z = -pz. From (−px+? …) to diagonals, spanning between the posts' inner face at the back: x1=-px+p, x2=px-p, y from 0.12 to H-0.1. Diagonal length L=hypot(2*span, hspan). Box(0.025, L, 0.025) rotated in the xz? Rotating around Z axis? The back plane is X-Y (z is constant). Rotation around Z axis: rotation.z = angle. Angle = atan2(hspan, 2*span)? For a box with height L oriented along Y by default: rotate z by θ so it tilts: rotation.z = -atan2(hspan, span*2) for one, + for the other. Center at (0, (0.12+H-0.1)/2, -pz). Compute L = hypot(2*span, hspan). span = px - 0.01… let innerSpan = (W - 2*pw)/2? Actually the posts' inner face x = ±(px - pw/2)… Let's simplify: xA = -px + 0.02, xB = px - 0.02; yA=0.14, yB=H-0.12. dx=xB-xA, dy=yB-yA; L=hypot(dx,dy); ang=atan2(dy,dx); for a box aligned with Y: rotation.z = PI/2 - ang? Let me derive: default direction of the box's length (Y axis) is (0,1,0). After rotation.z=θ, the direction = (-sinθ, cosθ,0). We want direction (dx,dy)/L → -sinθ=dx/L, cosθ=dy/L → θ = atan2(-dx, dy). So θ1 = Math.atan2(-dx, dy), θ2 = Math.atan2(dx, -dy) for the opposite diagonal. Yes. Shelves: for i in 0..n-1: y = shelfY(i). Deck spans between the posts: dw = W - 2*pw - 0.01. - If deck steel: slab dw × 0.022 × (D-0.08) at y. - Slat: nS=7? slatW = dw/nS*0.7; loop across x from -dw/2+dw/nS/2. - Wood: slab dw × 0.028 × (D-0.08), maybe 2 planks with a gap in the middle (looks like wood deck: 2 planks with a 2cm gap). Do 2 planks. - Front lip: box(dw, 0.04, 0.016) at y+0.02?, front bottom of shelf: position y + 0.005? Lip top touches shelf bottom: lip at y-0.02+? Shelf slab centered at y, bottom at y-0.011. Lip: height 0.05, centered at y-0.011-0.025+0.01… simpler: lip at y - 0.035 (just below the slab), z = (D-0.08)/2 - 0.008… front z = D/2 - 0.05 - 0.008. Let zFront = D/2 - pd/2 - 0.01. Lip: box(dw+0.01, 0.045, 0.018, mF, 0, y-0.038, zFront). - Gussets: at each post: box(0.06,0.012,0.06) below each deck corner? Skip for perf; add 4 small corner pads: at (±(dw/2-0.02), y-0.013, ±(D/2-pd-0.03))? Keep: 4 pads per shelf is fine (8 shelves*4=32 boxes, OK). Shelf animation: slide from x-0.5: basePos x=0 (or the slats' individual x). Animate the group? Better: wrap each shelf's parts in a THREE.Group at (0,y,0) with local offsets; animate the group's position.x from -0.45 → 0. But the posts are not in the group. Parts list = group with animation params. My `part` system operates on Object3D (mesh or group). Group children: deck slab + lip + pads. Stock boxes: for each shelf except the top? Include the top too, but fewer. For shelves i=0..n-1: count = 1 + floor(rand()*2) (+1 if i===bottom). Boxes: w=0.14+rand*0.18, h=0.12+rand*0.2 (clamp to clear the spacing below? spacing might be small: clearance = (H-0.2)/(n-1) - 0.05… compute gap = (topY-bottomY)/(n-1) if n>1 else 0.5; maxH = max(0.1, gap-0.08). h=min(h,maxH). d=(D-0.12)*(0.55+rand*0.3). x position: distribute: xs within [-dw/2+0.15, dw/2-0.15]. Keep a simple loop with random x, avoid overlap: x = -dw/2 + 0.12 + (k+0.5)*(dw/count?)*… let's do: divide the deck width into count slots, pick a random offset within a slot. Box base at y+slabHalf (0.012/0.016/… use 0.02). Kind 'box', pop scale, delay after the shelves. Also, one "hazard" box: a crate in the frame color? Add variety: 25% chance a box is painted (frame color or blue) instead of cardboard. Seeded randomness: use Math.random on each rebuild — fine, each rebuild gives a different layout, feels lively. Dust: ``` const dustGeo=new THREE.BufferGeometry(); const N=140; positions random in a box x[-3,3], y[0,2.6], z[-3,3]; const dust=new THREE.Points(dustGeo, new THREE.PointsMaterial({color:0xffc9a0, size:0.015, transparent:true, opacity:0.35, sizeAttenuation:true})); ``` Update: y += speed*dt; wrap. Store the speeds array. Ground shadow blob: radial gradient CanvasTexture: ``` function blobTexture(){ canvas 256, ctx radial gradient center rgba(0,0,0,0.55) → 0; } const blob = Mesh(PlaneGeometry( W+0.8, D+0.8 rotated -PI/2), MeshBasicMaterial({map:tex, transparent:true, depthWrite:false})); ``` But W, D change — rebuild the blob on rack rebuild (scale the base 1x1 plane: base plane 1x1, scale to (W+1.0, D+0.8)). Create once and scale. Floor: - CircleGeometry(7, 64) rotated -PI/2, MeshStandardMaterial color #10161d roughness 0.95 → receiveShadow. - GridHelper(14, 28, 0x2a3644, 0x1d2733) at y=0.001. - Fog: new THREE.Fog(0x0e1319, 7, 13). Renderer clear color the same. - Lights: hemi (0x8fb4d9 sky? industrial cool sky, 0x30281f ground, 0.55); dir (0xfff2e0, 0.9) pos (3.5, 5.5, 2.5), castShadow, shadow.mapSize 1024, camera range ±3.5; rim dir2 (0x6fa8c9, 0.5) pos (-4,3,-3) no shadow. Plus a small orange point light under? Keep 3 lights. Camera rig: ``` let view = {yaw:0.7, pitch:0.34, dist:4.2, tYaw:0.7, tPitch:0.34, tDist:4.2, autoYaw:0}; function defaultDist(){ const s=Math.max(cfg.W,cfg.H)/100; return s*2.4+0.6; } ``` On rebuild, set tDist = defaultDist() * userZoomFactor? Preserve user zoom: keep `zoomScale` (default 1); on config change: tDist = defaultDist()*zoomScale; the zoom buttons modify zoomScale (clamp 0.45..2.2). Pinch also modifies zoomScale similarly (zoomScale *= prev/curr, clamped). Good separation. Loop: ``` let last=performance.now(), spin=0.6; function loop(now){ dt=min(0.05,(now-last)/1000); last=now; if(cfg.auto && !dragging){ view.tYaw += dt*0.45; } // zoom oscillation const breathe = cfg.auto ? Math.sin(now*0.00045)*0.10 : 0; // fraction const baseDist=defaultDist()*zoomScale*(1+breathe*... ``` Hmm, if tDist is a target and breathe modifies every frame → OK: tDist = defaultDist()*zoomScale*(1+breathe). But zoomScale changes on pinch; fine. Pitch target from drag. Then lerp: ``` view.yaw += (view.tYaw-view.yaw)*k; etc k=1-exp(-dt*6) const ty = rackH/2*0.42? target=(0, (cfg.H/100)*0.45, 0) — but H changes; fine. camPos: x=dist*cos(pitch)*sin(yaw), y=dist*sin(pitch)+?, y= dist*sin(pitch)+targetY? Standard: pos = target + dist*(cos p sin y, sin p, cos p cos y). camera.position.set(...); camera.lookAt(target); ``` Also a subtle idle bob? No, breathing zoom covers it. Spawn animation: on rebuild set spawnStart=now. parts[]: {obj, kind, delay, base:Vector3, sx?}. In loop: t=(now-spawnStart)/1000; for each part: p=clamp((t-delay)/dur,0,1) (dur per kind: post 0.6, beam 0.5, shelf 0.55, box 0.45); e=easeOutCubic or back for box. - post: obj.scale.y=max(0.001,e); - beam/brace: s=easeOutBack? s=0.001+easeOutBack? Beams: scale.set(e,e,e) from center — but beams are placed at the top; center pop is fine. Actually simpler: 'beam' kind: scale all axes with easeOutCubic e. - shelf (group): pos.x = base.x + (1-easeOutCubic(p))*(-0.5); also scale.x? just slide. easeOutBack overshoot slides past 0 then back — nice. - box: s = easeOutBack(p); obj.scale.setScalar(max(0.001,s)); When p reaches 1, can mark done to skip computation (small number, fine). easeOutBack: c1=1.70158,c3=c1+1; 1 + c3*(x-1)^3 + c1*(x-1)^2. Wiring controls: Canvas events (pointer events): ``` const pts=new Map(); canvas.addEventListener('pointerdown',e=>{canvas.setPointerCapture(e.pointerId); pts.set(e.pointerId,{x:e.clientX,y:e.clientY}); dragging=true; pinchPrev=null; hint hide}); pointermove: if(!pts.has(id))return; update; if(pts.size===1){ dx=...; view.tYaw += dx*0.0055; view.tPitch=clamp(view.tPitch+dy*0.004,0.04,1.35);} else if(pts.size===2){ compute distance between the two points; if(pinchPrev) zoomScale=clamp(zoomScale*pinchPrev/cur, .45, 2.4); pinchPrev=cur;} pointerup/cancel: delete; if(pts.size<2) pinchPrev=null; if(pts.size===0) dragging=false; ``` Wheel: e.preventDefault(); zoomScale = clamp(zoomScale*Math.exp(e.deltaY*0.001), .45,2.4). Buttons: zin: zoomScale*=0.8; zout: *=1.25; reset: view.tYaw=0.7 (or nearest multiple? set to 0.7), tPitch=0.34, zoomScale=1; auto toggle: cfg.auto=!cfg.auto, button state. Config events: - shelves minus/plus: clamp 1..8; update display; rebuild(); - sliders input: update value chip + fill; rebuildDebounced? Rebuild on 'input' but rebuild is somewhat cheap (<100 meshes) — fine on input, though the spawn animation retriggers on every tick — will look janky on continuous drag. Solution: on input, rebuild without full spawn (spawnStart is… spawn with a short delay? Or: on slider drag, rebuild with parts placed immediately (skip animation), then on 'change' (release) do an animated rebuild? Simplest: throttle: on 'input' rebuild with fastSpawn (t small → parts are almost complete?) hmm. Better: separate geometry updates: instead of full rebuild with spawn on every input, do a rebuild but with an option animate=false that sets all parts' transforms immediately to their final state. On 'input' → rebuild(false); the slider's 'change' → rebuild(true)? Actually animating on release is a nice reward. And stepper/swatches → rebuild(true). Implement rebuild(animate=true): if !animate set spawnStart = -1e9 (t huge → p=1). Also update HUD/SKU/ticker/spec on every input (cheap). - Swatches: click → cfg.color; rebuild(true); update swatch ring; ticker finish name. - Deck segment: cfg.deck; rebuild(true). - Stock toggle: rebuild(true) (boxes appear with a pop — nice). - Auto toggle: stage button (and also a panel toggle? to avoid duplicate state, keep only the stage button; but a panel section "EXTRAS" has stock + auto? Keep auto only in the stage; stock + "show floor grid"? Keep panel: stock toggle only, plus… "shadows"? Keep: stock toggle + grid toggle. Fine. View presets: - ISO: yaw 0.7, pitch 0.34 - FRONT: yaw 0, pitch 0.12 - TOP: yaw 0.7, pitch 1.25 (near top; clamp 1.35) Set tYaw to the nearest current+delta? Just set values directly; lerp smooths. HUD updates: ``` function syncUI(){ dimsEl.textContent = `${cfg.W} × ${cfg.D} × ${cfg.H} CM`; levelsEl = `${cfg.shelves} LEVELS · ${cfg.deck.toUpperCase()} DECK`; cap = Math.round(cfg.shelves * (cfg.W*cfg.D*0.018)); // 120*40*0.018=86.4 weight = Math.round(cfg.H*0.12 + cfg.W*0.18 + cfg.shelves*4); sku = `RB-${cfg.W}${cfg.D}${cfg.H} · ${cfg.shelves}L · ${code}`; Flash changed elements. ticker: build string, set both spans. } ``` Flash: add class, void offsetWidth, remove. FPS: count frames; every 500ms fpsEl.textContent = `${fps} FPS`. Boot overlay: after first render + 600ms, add .done → opacity 0, then remove after transition. Ticker content: `BAY 01 · RB-... · ${shelves} LEVELS · ${W}×${D}×${H} CM · EST. CAP ${cap} KG · FINISH: ${colorName} · DECK: ${deck} · STEEL 1.2 MM · POWDER COAT C4 ▸` repeat. Now the layout/CSS code. Let's write it. Colors: ``` --bg:#0e1319; --bg2:#151c24; --panel:#141b23; --line:#2a3644; --line2:#1f2934; --ink:#e8e4da; --dim:#8fa0b3; --orange:#ff6b1a; --yellow:#ffc93c; --blue:#6fa8c9; ``` Type scale: header brand 26px Big Shoulders 800; panel section titles 15px Big Shoulders 700 letter-spacing 0.14em; numbers are big. Body grid: ``` html,body{height:100%} body{margin:0;overflow:hidden;display:flex;flex-direction:column;background:...;font-family:'Space Grotesk'} header{...} .ticker{...} main{flex:1;display:flex;min-height:0} #stage{flex:1;position:relative;min-width:0} canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;cursor:grab} #panel{width:384px;...;display:flex;flex-direction:column;min-height:0} .sheet-head{...} .sheet-body{overflow-y:auto;flex:1;...} @media(max-width:920px){ main{flex-direction:column} #panel{width:auto;max-height:46dvh} } ``` Panel collapsed: sheet-body max-height 0; on mobile only (desktop always expanded): manage with JS: toggle class on #panel; CSS: @media(max-width:920px){ #panel.collapsed .sheet-body{display:none} }. Hazard strip: 5px under the header, repeating-linear-gradient(45deg, var(--orange) 0 10px, #131a22 10px 20px); animation slide 30s linear infinite (background-position to 280px? 45deg period = 20px/sqrt2? Just animate to 40px for a seamless loop: 45° pattern period along x = 20px/tan? For 45deg stripes width 20px, x-period = 20px * sqrt(2) ≈ 28.28px. Animate background-position-x from 0 to 28.284px for a seamless loop. OK. Corner marks on the stage: .frame{position:absolute;inset:10px;pointer-events:none;border:1px solid rgba(143,160,179,.14)} plus 4 corner spans? Use .frame::before/after for 2 corners, and 2 more with inner divs. Simpler: 4 divs .corner with borders. HUD chips: .hud{position:absolute;z-index:5;pointer-events:none} - .hud-tl{top:18px;left:18px} content: .tag "BAY 01 — LIVE BAY" small orange mono; .dims mono 20px; .sub 11px dim. - .hud-bl hint bottom: "DRAG TO ORBIT · PINCH / SCROLL TO ZOOM" 10px letter-spaced; hide on very small? Keep. - .zoomcol{position:absolute;right:16px;bottom:16px;display:flex;flex-direction:column;gap:10px;pointer-events:auto} Buttons 46px circle. On mobile the zoomcol maybe smaller 40px. Zoom button styling: bg rgba(20,27,35,.85); border 1px var(--line); color ink; font mono 18px; hover: border orange, transform scale(1.06); active scale .94. Auto button when on: bg orange, color #131313. Header: display flex, align center, gap, padding 0 16px, height 56px, bg #10161d, border-bottom 1px line. - .logo: 34px square, bg orange, inside: 3 white bars (shelf glyph) via CSS: box-shadow lines or a background gradient: 3 horizontal lines + 2 verticals? A background: linear-gradient lines. Use a simple inline SVG — cleaner: small svg with 2 posts and 3 shelves, white stroke. - .brand h1 "RACK LAB" Big Shoulders 800 24px letter-spacing .04em; span .sub "STEEL BAY CONFIGURATOR" 9px dim letter-spacing .3em. - .status (right): LED (8px green pulse), "LIVE RENDER" mono 10px, "· 60 FPS". Hide text on mobile, keep LED + FPS. Ticker: 26px, overflow hidden; .tk-track{display:inline-flex;white-space:nowrap;animation:tk 26s linear infinite} 2 spans .tk padding. Color: mono 10.5px letter-spacing .12em color #9fb0c2; separators orange "▪". keyframes tk {to{transform:translateX(-50%)}}. Panel sections: ``` .sec{padding:14px 16px 16px;border-bottom:1px solid var(--line2)} .sec h3{margin:0 0 10px;display:flex;gap:8px;align-items:baseline;font-family:display;font-size:13px;letter-spacing:.18em;color:var(--ink)} .sec h3 i{font-style:normal;color:var(--orange);font-family:mono;font-size:10px} ``` Stepper row: display:flex;align-items:center;gap:12px; - .stepbtn: 52x52, bg #1b242e, border 1px line, font 24px, hover orange border, active translateY(1px). Content − + (use "−" and "+"). - .stepper-num: flex 1 center: Big Shoulders 800 46px orange; below 9px dim "LEVELS". Actually, big number centered, small label below. Slider group: ``` .ctl{margin-bottom:12px} .ctl .row{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px} .ctl label{font-size:11px;letter-spacing:.14em;color:var(--dim)} .ctl output{font-family:mono;font-size:12px;color:var(--ink);background:#1b242e;padding:2px 8px;border:1px solid var(--line2)} input[type=range]{-webkit-appearance:none;width:100%;height:26px;background:transparent} track: ::-webkit-slider-runnable-track{height:4px;background:linear-gradient(...) set via JS as el.style.background? } ``` JS sets --p for fill: track background: `linear-gradient(90deg, var(--orange) var(--p), #2a3644 var(--p))`. On the track pseudo-element? Pseudo-elements can't easily read el style variables? They inherit CSS custom properties from the input element — yes, var(--p) defined on the input element works in the pseudo-element. So: input style background is transparent; track uses var. Set el.style.setProperty('--p', pct+'%'). Thumb: -webkit-slider-thumb: appearance none; width:18px;height:18px; margin-top:-7px; background:var(--ink); border:3px solid var(--orange); box-shadow: 0 0 0 3px rgba(0,0,0,.35); border-radius:2px (a slightly squared, industrial look). Firefox: ::-moz-range-track etc., ::-moz-range-progress background orange. Good. Swatches: flex gap 10; .sw{width:34px;height:34px;border-radius:50%;border:2px solid rgba(255,255,255,.15);cursor:pointer;position:relative} .sw.on{box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--orange)} hover scale 1.08. Label below? title attribute + a small caption showing the current finish name in the row: "FINISH · ". Segment: .seg{display:flex;gap:6px} .seg button{flex:1;padding:10px 0;font-family:display;font-size:13px;letter-spacing:.12em;background:#1b242e;border:1px solid var(--line);color:var(--dim);cursor:pointer} .seg button.on{background:var(--orange);border-color:var(--orange);color:#141414;font-weight:700} Toggle row: .trow{display:flex;justify-content:space-between;align-items:center;padding:8px 0;cursor:pointer} label text 12px letter-spacing .1em color ink; .tg{width:46px;height:26px;background:#222c37;border:1px solid var(--line);position:relative;transition:.2s} .tg::after{content:'';position:absolute;top:3px;left:3px;width:18px;height:18px;background:var(--dim);transition:.2s} input:checked + .tg{background:var(--orange);border-color:var(--orange)} checked + .tg::after{left:23px;background:#141414} View presets: .seg reused with 3 buttons ISO/FRONT/TOP + a full-width "RESET VIEW" button with dashed border? Add .btn-reset{width:100%;margin-top:8px;...}. Spec card: .spec{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line2)} cells bg #171f28 padding 12: label 9px dim ls .2em; value: display font 26px orange (cap) + unit mono. SKU row full-width mono 11px yellow. Flash: @keyframes flash{0%{background:#3a2a18}100%{}} .flash{animation:flash .5s} Sheet head: height 44px, display flex, align center, padding 0 14px, gap 10, bg #121922, border-bottom line; .grip{width:36px;height:4px;background:var(--line);border-radius:2px} label "CONFIGURE" display font 13 ls .2em; chevron button on the right (svg ▾ rotate on collapse). Desktop: sheet-head hidden? On desktop it's a side panel; the head can still show a "CONFIGURE" title — fine, keep on both, mobile hides body on collapse. Stage hint fade: after first pointerdown, add .dim to hint (opacity .4). Boot overlay: position absolute inset 0 bg #0e1319 z 50, display flex center, column; logo big + "CALIBRATING RIG" mono + bar: 120px 2px track, inner 40% width animating (keyframes load {from{transform:translateX(-100%)}to{transform:translateX(300%)}}). .done{opacity:0;pointer-events:none;transition:opacity .5s}. Dust color warm. Edge cases: - r128: THREE.BoxGeometry fine; MeshStandardMaterial fine; shadow fine. - iOS 100dvh: use height:100dvh with a 100vh fallback. - Prevent page scrolling on pinch: touch-action none on the canvas; also on the panel body allow scrolling (fine). - User pinch zoom on the page: maximum-scale=1 in the viewport meta to prevent double-tap zoom. Performance: rebuild on each slider input — geometry creation is a few dozen boxes; OK. But dispose every time → GC pressure; acceptable. Let me write shelfY: ``` function shelfYs(n,H){ const ys=[]; const b=0.14, t=H-0.10; if(n===1){ ys.push(Math.min(H*0.55, t)); } else { const step=(t-b)/(n-1); for(let i=0;i RACK LAB — 3D Shelf Bay Builder

RACK LAB

STEEL BAY CONFIGURATOR

LIVE RENDER·60 FPS

BAY 01 · ACTIVE

120 × 40 × 180 CM

5 LEVELS · SLAT DECK

DRAG TO ORBIT — PINCH / SCROLL TO ZOOM

RACK LAB

CALIBRATING RIG…

``` Auto toggle: sync both the stage AUTO button and the panel autoTg checkbox. Keep a function setAuto(v). Spec: .spec is a full-width grid of 2 cells + sku row spanning 2 columns. h3 em (like "CM" or the finish name): font mono 10px dim, auto margin-left:auto. Now the JS: ```js const $=id=>document.getElementById(id); const cfg={shelves:5,W:120,D:40,H:180,color:'#ff6b1a',deck:'slat',auto:true,stock:true}; const FINISH=[{c:'#ff6b1a',n:'SAFETY ORANGE',k:'ORG'},{c:'#e8b923',n:'HAZARD YELLOW',k:'HYZ'},{c:'#3d7ab8',n:'SIGNAL BLUE',k:'SBL'},{c:'#2f7d5c',n:'FOREST GREEN',k:'FOR'},{c:'#59646e',n:'GRAPHITE',k:'GRA'}]; ``` Swatches build: ```js const swsEl=$('sws'); FINISH.forEach(f=>{const b=document.createElement('button');b.className='sw'+(f.c===cfg.color?' on':'');b.style.background=f.c;b.title=f.n;b.dataset.c=f.c;b.onclick=()=>{cfg.color=f.c;[...swsEl.children].forEach(x=>x.classList.toggle('on',x===b));$('finName').textContent=f.n;rebuild(true);sync();};swsEl.appendChild(b);}); ``` Three setup: ```js const stage=$('stage'),canvas=$('scene'); const renderer=new THREE.WebGLRenderer({canvas,antialias:true}); renderer.setPixelRatio(Math.min(devicePixelRatio,2)); renderer.shadowMap.enabled=true;renderer.shadowMap.type=THREE.PCFSoftShadowMap; const scene=new THREE.Scene();scene.background=new THREE.Color(0x0e1319);scene.fog=new THREE.Fog(0x0e1319,7,14); const camera=new THREE.PerspectiveCamera(42,1,0.05,60); // lights const hemi=new THREE.HemisphereLight(0x9db8d6,0x2a2018,0.6);scene.add(hemi); const key=new THREE.DirectionalLight(0xffe9d2,1.0);key.position.set(3.5,6,2.5);key.castShadow=true;key.shadow.mapSize.set(1024,1024);const sc=key.shadow.camera;sc.left=-3.5;sc.right=3.5;sc.top=4;sc.bottom=-2;sc.far=20;scene.add(key); const rim=new THREE.DirectionalLight(0x5f93b8,0.45);rim.position.set(-4,3,-3);scene.add(rim); // floor const floor=new THREE.Mesh(new THREE.CircleGeometry(7,64),new THREE.MeshStandardMaterial({color:0x111820,roughness:0.95,metalness:0}));floor.rotation.x=-Math.PI/2;floor.receiveShadow=true;scene.add(floor); const grid=new THREE.GridHelper(14,28,0x2c3a49,0x1c2733);grid.position.y=0.002;scene.add(grid); // blob shadow const blobTex=(()=>{const c=document.createElement('canvas');c.width=c.height=256;const x=c.getContext('2d');const g=x.createRadialGradient(128,128,10,128,128,128);g.addColorStop(0,'rgba(0,0,0,0.5)');g.addColorStop(1,'rgba(0,0,0,0)');x.fillStyle=g;x.fillRect(0,0,256,256);return new THREE.CanvasTexture(c);})(); const blob=new THREE.Mesh(new THREE.PlaneGeometry(1,1),new THREE.MeshBasicMaterial({map:blobTex,transparent:true,depthWrite:false}));blob.rotation.x=-Math.PI/2;blob.position.y=0.004;scene.add(blob); // dust let dust, dustSpd=[]; {const N=150;const pos=new Float32Array(N*3);for(let i=0;imatCache['f'+hex]||(matCache['f'+hex]=new THREE.MeshStandardMaterial({color:hex,roughness:0.38,metalness:0.6})); const deckMat=(hex,wood)=>{const k='d'+hex+(wood?'w':'');return matCache[k]||(matCache[k]=new THREE.MeshStandardMaterial({color:hex,roughness:wood?0.85:0.42,metalness:wood?0.05:0.55}));}; const CARD=['#c59a63','#b78d55','#a97e4a','#c9a875']; const cardMat=i=>matCache['c'+i]||(matCache['c'+i]=new THREE.MeshStandardMaterial({color:CARD[i%CARD.length],roughness:0.9,metalness:0})); ``` Mesh helper: ```js function makeBox(w,h,d,m,anchorY=false){const g=new THREE.BoxGeometry(w,h,d);if(anchorY)g.translate(0,h/2,0);const o=new THREE.Mesh(g,m);o.castShadow=o.receiveShadow=true;return o;} ``` Parts and rebuild: ```js let rack=null, parts=[], spawnAt=0; function part(o,kind,delay,base){o.userData.k=kind;o.userData.d=delay;if(base)o.position.copy(base);parts.push(o);rack.add(o);return o;} function rebuild(animate){ if(rack){scene.remove(rack);rack.traverse(o=>{if(o.isMesh&&o.geometry)o.geometry.dispose();});} rack=new THREE.Group();parts=[];scene.add(rack); const W=cfg.W/100,D=cfg.D/100,H=cfg.H/100; const pw=0.05,pd=0.055; const mF=frameMat(cfg.color); const deckHex=cfg.deck==='wood'?'#b07c46':new THREE.Color(cfg.color).offsetHSL(0,0,0.14).getHexString(); const mD=deckMat(deckHex,cfg.deck==='wood'); const px=W/2-pw/2,pz=D/2-pd/2; // posts + feet [[px,pz],[-px,pz],[px,-pz],[-px,-pz]].forEach((p,i)=>{ const post=makeBox(pw,H,pd,mF,true);post.position.set(p[0],0,p[1]);part(post,'post',0.02+i*0.05); const foot=makeBox(pw*2.1,0.035,pd*2.1,mF,true);foot.position.set(p[0],0,p[1]);part(foot,'post',0.02+i*0.05); }); // top beams const beamY=H-0.03; const bf=makeBox(W,0.06,0.045,mF);bf.position.set(0,beamY,pz-0.01);part(bf,'beam',0.15); const bb=makeBox(W,0.06,0.045,mF);bb.position.set(0,beamY,-pz+0.01);part(bb,'beam',0.17); const bl=makeBox(0.045,0.06,D,mF);bl.position.set(px-0.01,beamY,0);part(bl,'beam',0.19); const br=makeBox(0.045,0.06,D,mF);br.position.set(-px+0.01,beamY,0);part(br,'beam',0.21); // back X brace const xA=-px+0.03,xB=px-0.03,yA=0.16,yB=H-0.10; const dx=xB-xA,dy=yB-yA,L=Math.hypot(dx,dy); [[-dx,dy],[dx,-dy]].forEach((v,i)=>{ const b=makeBox(0.03,L,0.03,mF);b.position.set(0,(yA+yB)/2,-pz); b.rotation.z=Math.atan2(v[0],v[1]);part(b,'beam',0.24+i*0.04); }); ``` Verify: direction (0,1,0) rotated by rotation.z=θ is (-sinθ,cosθ,0). Want it along (dx,dy)/L: -sinθ=dx/L, cosθ=dy/L → θ=atan2(-dx,dy). So v1 = (-dx, dy) gives θ1=atan2(-dx,dy) ✓ (v[0]=-dx, v[1]=dy). θ2=atan2(dx,-dy) → v2=(dx,-dy) ✓. ```js // shelves const n=cfg.shelves;const ys=[];const b0=0.16,t0=H-0.11; if(n===1)ys.push(Math.max(0.4,H*0.52));else{const st=(t0-b0)/(n-1);for(let i=0;i{ const g=new THREE.Group();g.position.set(0,y,0); if(cfg.deck==='steel'){const s=makeBox(dw,0.022,dd,mD);g.add(s);} else if(cfg.deck==='wood'){const p1=makeBox(dw/2-0.015,0.026,dd,mD);p1.position.x=-(dw/4+0.004);g.add(p1);const p2=p1.clone();p2.position.x=dw/4+0.004;g.add(p2);} else{const ns=7,slot=dw/ns;for(let k=0;k{const pad=makeBox(0.055,0.012,0.05,mF);pad.position.set(q[0]*(dw/2-0.02),-0.012,q[1]*(D/2-pd-0.03));g.add(pad);}); part(g,'shelf',0.3+i*0.09); // stock if(cfg.stock){ const below=i>0?ys[i]-ys[i-1]-0.07:ys[0]-0.07; const above=i=1){o.position.copy(o.userData.base||ZERO);o.scale.set(1,1,1);continue;} if(p<=0){o.scale.set(0.001,0.001,0.001);continue;} const k=o.userData.k; if(k==='post'){o.scale.set(1,Math.max(0.001,easeOutCubic(p)),1);} else if(k==='beam'){o.scale.setScalar(Math.max(0.001,easeOutCubic(p)));} else if(k==='shelf'){const e=easeOutCubic(p);o.scale.set(1,1,1);o.position.x=(1-e)*-0.55;o.position.y=o.userData.base?0:0; } else if(k==='box'){const s=easeOutBack(p);o.scale.setScalar(Math.max(0.001,s));o.position.copy(o.userData.base);} } } ``` Shelf group's base is zero; but position.set(0,y,0) at creation — the shelf y is in the group's base position; must not overwrite y! The 'shelf' group's position was set to (0,y,0). Save its base too: part(g,'shelf',delay) → in part(), if base is undefined, save current position as base: o.userData.base=o.position.clone(). Simplify: always clone base. Then at p>=1: position.copy(base). Good, remove the ZERO special case. But wait: the post's scale.y with geometry translated: scale from the mesh origin at y=0 ✓. Feet also anchored ✓. easeOutCubic p: 1-(1-p)^3. easeOutBack: c1=1.70158,c3=c1+1; 1 + c3*(p-1)^3 + c1*(p-1)^2. When p<=0, beam scale 0.001 is fine (position is base). View and loop: ```js let view={yaw:0.85,pitch:0.36,dist:4}, tv={yaw:0.85,pitch:0.36,dist:4}, zoom=1, dragging=false; function dDist(){return Math.max(cfg.W,cfg.H)/100*2.3+0.55;} function clampZoom(z){return Math.min(2.6,Math.max(0.42,z));} function targetDist(){return dDist()*zoom*(cfg.auto?1+0.12*Math.sin(perf*0.0004):1);} let perf=0; function frame(now){ requestAnimationFrame(frame); perf=now; const dt=Math.min(0.05,(now-(frame.prev||now))/1000);frame.prev=now; if(cfg.auto&&!dragging)tv.yaw+=dt*0.45; tv.dist=targetDist(); const k=1-Math.exp(-dt*7); view.yaw+=(tv.yaw-view.yaw)*k;view.pitch+=(tv.pitch-view.pitch)*k;view.dist+=(tv.dist-view.dist)*k; const Hm=cfg.H/100*0.45; camera.position.set(view.dist*Math.cos(view.pitch)*Math.sin(view.yaw),Hm+view.dist*Math.sin(view.pitch),view.dist*Math.cos(view.pitch)*Math.cos(view.yaw)); camera.lookAt(0,Hm*0.9,0); // dust const pos=dust.geometry.attributes.position; for(let i=0;i2.8)y=0;pos.setY(i,y);}pos.needsUpdate=true; animateParts(now); renderer.render(scene,camera); frames++; } ``` Wait, the breathing uses perf which is set after… set perf=now at start, fine. targetDist uses cfg.auto breathing — when auto is off, dist=e*dDist*zoom constant ✓. Resize: ```js function resize(){const w=stage.clientWidth,h=stage.clientHeight;renderer.setSize(w,h,false);camera.aspect=w/h;camera.updateProjectionMatrix();} window.addEventListener('resize',resize); ``` Canvas CSS: width:100%;height:100%. Pointer: ```js const pts=new Map();let pinchD=0; canvas.addEventListener('pointerdown',e=>{canvas.setPointerCapture(e.pointerId);pts.set(e.pointerId,[e.clientX,e.clientY]);dragging=true;$('hint').classList.add('seen');if(pts.size===2){const a=[...pts.values()];pinchD=Math.hypot(a[0][0]-a[1][0],a[0][1]-a[1][1]);}}); canvas.addEventListener('pointermove',e=>{if(!pts.has(e.pointerId))return;const prev=pts.get(e.pointerId);pts.set(e.pointerId,[e.clientX,e.clientY]); if(pts.size===1){const dx=e.clientX-prev[0],dy=e.clientY-prev[1];tv.yaw+=dx*0.005;tv.pitch=Math.min(1.35,Math.max(0.05,tv.pitch+dy*0.004));} else if(pts.size===2){const a=[...pts.values()];const d=Math.hypot(a[0][0]-a[1][0],a[0][1]-a[1][1]);if(pinchD>0)zoom=clampZoom(zoom*pinchD/d);pinchD=d;}}); const end=e=>{pts.delete(e.pointerId);if(pts.size<2)pinchD=0;if(pts.size===0)dragging=false;}; canvas.addEventListener('pointerup',end);canvas.addEventListener('pointercancel',end); canvas.addEventListener('wheel',e=>{e.preventDefault();zoom=clampZoom(zoom*Math.exp(e.deltaY*0.0012));},{passive:false}); canvas.addEventListener('dblclick',resetView); ``` Buttons: ```js $('zin').onclick=()=>zoom=clampZoom(zoom*0.8); $('zout').onclick=()=>zoom=clampZoom(zoom*1.25); $('zreset').onclick=resetView; function resetView(){tv.yaw=0.85;tv.pitch=0.36;zoom=1;setViewSeg('iso');} $('zauto').onclick=()=>setAuto(!cfg.auto); function setAuto(v){cfg.auto=v;$('zauto').classList.toggle('on',v);$('autoTg').checked=v;} $('autoTg').onchange=e=>setAuto(e.target.checked); ``` viewSeg: ```js const VIEWS={iso:[0.85,0.36],front:[0,0.12],top:[0.6,1.28]}; $('viewSeg').querySelectorAll('button').forEach(b=>b.onclick=()=>{const [y,p]=VIEWS[b.dataset.v];tv.yaw=y;tv.pitch=p;setViewSeg(b.dataset.v);}); function setViewSeg(v){[...$('viewSeg').children].forEach(x=>x.classList.toggle('on',x.dataset.v===v));} $('resetView').onclick=resetView; ``` Note: auto rotation keeps changing the yaw after a preset; fine. Config: ```js function setShelves(n){cfg.shelves=Math.min(8,Math.max(1,n));$('shv').textContent=cfg.shelves;rebuild(true);sync();} $('minus').onclick=()=>setShelves(cfg.shelves-1); $('plus').onclick=()=>setShelves(cfg.shelves+1); [['rw','W'],['rd','D'],['rh','H']].forEach(([id,key])=>{const el=$(id);const out=$('o'+key); const upd=()=>{el.style.setProperty('--p',((el.value-el.min)/(el.max-el.min)*100)+'%');}; upd(); el.addEventListener('input',()=>{cfg[key]=+el.value;out.textContent=el.value;upd();rebuild(false);sync();}); el.addEventListener('change',()=>{rebuild(true);}); }); ``` Hmm 'change' fires after the last input → double rebuild; fine (the animate one is final). Deck seg: ```js $('deckSeg').querySelectorAll('button').forEach(b=>b.onclick=()=>{cfg.deck=b.dataset.d;[...b.parentNode.children].forEach(x=>x.classList.toggle('on',x===b));rebuild(true);sync();}); $('stockTg').onchange=e=>{cfg.stock=e.target.checked;rebuild(true);}; $('gridTg').onchange=e=>{grid.visible=e.target.checked;}; ``` sync(): ```js function finishCode(){return FINISH.find(f=>f.c===cfg.color)||FINISH[0];} function sync(){ const cap=Math.round(cfg.shelves*cfg.W*cfg.D*0.018); const wgt=Math.round(cfg.H*0.12+cfg.W*0.16+cfg.shelves*4); setNum('dims',`${cfg.W} × ${cfg.D} × ${cfg.H} CM`); setNum('lvl',`${cfg.shelves} LEVEL · ${cfg.deck.toUpperCase()} DECK`); setNum('cap',cap);setNum('wgt',wgt); $('sku').textContent=`RB-${cfg.W}${cfg.D}${cfg.H} · ${cfg.shelves}L · ${finishCode().k}`; const f=finishCode(); const line=`BAY 01 · RB-${cfg.W}${cfg.D}${cfg.H}-${cfg.shelves}L · ${cfg.W}×${cfg.D}×${cfg.H} CM · EST CAP ${cap} KG · FINISH ${f.n} · DECK ${cfg.deck.toUpperCase()} · STEEL 1.2 MM · POWDER COAT C4 ▸ `; $('tk1').textContent=line.repeat(3);$('tk2').textContent=line.repeat(3); } function setNum(id,v){const el=$(id);if(el.textContent!=String(v)){el.textContent=v;el.classList.remove('flash');void el.offsetWidth;el.classList.add('flash');}} ``` .flash on dims (mono, no bg by default): flash anim changes color to orange and back: @keyframes flash{0%{color:var(--orange)}100%{}} plus a bg for spec cells? For .cell b flash → change bg. Use a generic: .flash{animation:flash .6s} @keyframes flash{0%{color:var(--yellow)}}. dims default color is ink; fine. FPS: ```js let frames=0;setInterval(()=>{$('fps').textContent=Math.min(99,frames*2);frames=0;},500); ``` frames is incremented every rendered frame; ×2 per 500ms. Chevron collapse (mobile): ```js $('chev').onclick=()=>{$('panel').classList.toggle('collapsed');/* rotate icon */}; ``` On desktop, hide the chevron? Keep it — collapses the panel body even on desktop (stage expands). Fun. Add transition: sheet-body max-height animation? Use a grid-template-rows trick or max-height: .sheet-body{max-height:2000px;transition:max-height .35s} .collapsed .sheet-body{max-height:0;overflow:hidden}. Mobile default expanded. On desktop when collapsed, the panel width shrinks? Keep the width, body just empty — or also shrink the width: @media(min-width:921px){#panel.collapsed{width:0;border:none} #panel.collapsed .sheet-head{transform:translateX(-100%)}} tricky with the head's grip. Simpler: on desktop, collapsed hides the entire body and narrows the panel to 0: width transition .3s. Head is inside the panel; when width is 0, hidden. Add overflow hidden to the panel. OK: ``` #panel{transition:width .35s ease} @media(min-width:921px){#panel.collapsed{width:0;border-left:none;overflow:hidden}} @media(max-width:920px){#panel.collapsed .sheet-body{display:none}} ``` But main is flex; panel width 0 with overflow hidden works. Mobile: main flex-direction column; stage flex 1 min-height 0; panel max-height 48dvh (content scrolls). Sheet body: overflow-y auto. Boot: ```js setTimeout(()=>{$('boot').classList.add('done');setTimeout(()=>{$('boot').remove();},700);},900); ``` Init: ```js resize();buildSwatches (done);sync();rebuild(true);requestAnimationFrame(frame); ``` Initial tv.dist: set via the loop targetDist before first frame; view.dist initial = dDist()*1.02. Edge: 'shelf' group part base: in part() o.userData.base=o.position.clone() — for shelf groups position (0,y,0) ✓; at p>=1 position.copy(base) restores y ✓ (x anim is only <1; at p<1 set x offset and keep y from base — but o.position is initially base; only set .x ✓; z untouched ✓). Boxes: base saved; during animation position.copy(base) & scale — before spawn (p<=0) scale 0.001, position base ✓ (initially set to base; but p<=0 branch: skip setting position? o.position is already base at creation ✓; but after a previous frame where p was in (0,1) … position is always base for boxes ✓). Beam at p<=0: scale 0.001 ✓ position base ✓. Another: post 'post' at p<1 has scale.y=e, at p>=1 scale(1,1,1) ✓. Dispose: shared materials cached — skip material dispose in traverse ✓ (only geometry). Blob texture persists. Grid toggle: grid.visible. Dust: fine. Font loading for the canvas? No text in canvas. Good. Prevent long-press context menu on the canvas (mobile): canvas.addEventListener('contextmenu',e=>e.preventDefault()). Also prevent iOS double-tap zoom on buttons: user-scalable=no handles most. Now the final CSS. Write it carefully with responsive rules. Add a subtle stage vignette too: .stage::after? Use a .vignette div: pointer-events none, inset 0, background: radial-gradient(120% 90% at 50% 40%, transparent 55%, rgba(5,8,11,.55) 100%). Plus a top gradient for header readability. Place as an extra div inside stage after the canvas, before the HUD. z-index order: canvas z0, vignette z1, frame z2, hud z3, zoomcol z4, boot z50. Header brand h1 is Big Shoulders 800 26px; letter-spacing .05em; the span is 8.5px dim ls .32em. Status: mono 10px; LED: 8px green circle, animation pulse 1.6s. Hazard strip height 5px; animate bg position. Ticker: font IBM Plex Mono 10px; color #7f93a8; orange "▸"? Separator in content is "·" and "▸" — style with color? Single text node; can't color parts. Fine — the whole thing is a dim color, add a leading orange chip "LIVE SPEC"? Simpler: keep mono text; prefix each span with an orange "◢"? Can't color mid-string without a span. Use two spans tk1/tk2 both plain; add a fixed left label? Add a fixed "SPEC //" label on the left with a background. Actually simpler: content uses only "·" separators; the whole thing dim; readable. Hmm, but color the separators: build the ticker with multiple elements? Since textContent resets it, build innerHTML instead with spans. Build: parts joined with ` · ` and styled orange. Do innerHTML with escaped values (safe, we control the content). ```js const items=[`BAY 01`,sku,`${cfg.W}×${cfg.D}×${cfg.H} CM`,`EST CAP ${cap} KG`,`FINISH ${f.n}`,`DECK ${cfg.deck.toUpperCase()}`,'STEEL 1.2 MM','POWDER COAT C4','LOAD 600 KG/LEVEL']; const line='▪ '+items.join(' ▪ ')+' '; $('tk1').innerHTML=line.repeat(3);tk2 same. ``` .tk b{color:var(--orange);font-weight:400} Nice. Panel width 380px; section h3 font Big Shoulders 700 14px ls .16em. .stepper .stn b{font-family:display;font-size:46px;line-height:1;color:var(--orange);font-weight:800} s{text-decoration:none;font-size:9px;ls .3em;color:var(--dim);display:block;margin-top:2px} stepbtn font 26px Space Grotesk? Use mono. btn-reset: margin-top 10px; width 100%; padding 10px; background transparent; border 1px dashed var(--line); color dim; letter-spacing .2em; font 11px; hover: border orange, color ink. Spec: margin 0 16px 16px; border 1px solid var(--line); grid 2 columns; cell padding 12px; label 8.5px dim ls .22em block; b display font 26px orange (or ink? cap orange, wgt blue) — both orange? cap orange, wgt #6fa8c9. i mono 10px dim margin-left 4px. .sku{grid-column:1/-1;padding:10px 12px;font mono 11px;color:var(--yellow);border-top:1px solid var(--line2);letter-spacing:.08em} Zoom button AUTO: font 9px ls .15em. Hint: bottom:16px;left:16px;font mono 9.5px ls .18em color #66788c; transition opacity; .seen{opacity:.45} hud-tl .tag: font mono 9.5px color var(--orange) ls .22em; with a small square before? content: "▪ BAY 01 · ACTIVE"? use ::before orange square. .dims: mono 600 20px ink; letter-spacing .04em; text-shadow. .sub: 10px dim ls .18em. Corner marks: .c{position:absolute;width:14px;height:14px;border-color:rgba(255,107,26,.5)} .tl{top:-1px;left:-1px;border-top:2px solid;border-left:2px solid} etc. (no border-color per side: set border:0 and two sides). Fine. Frame border: 1px solid rgba(143,160,179,.10); inset 10px. Swatch ring: .sw{box-shadow:inset 0 0 0 2px rgba(0,0,0,.25)} .sw.on{outline:2px solid var(--orange);outline-offset:3px} use outline (does it work on circle? outline is a square shape in some browsers; use box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--orange)) ✓. Media mobile: header h1 20px; .stxt hidden; hud dims 15px; zoomcol buttons 42px; hint 8.5px; sws gap 8. Also safe-area padding for panel bottom: padding-bottom: env(safe-area-inset-bottom). Also, ensure that on mobile the stage has a minimum height: flex 1 works with main column height (body 100dvh). body{height:100dvh} fallback 100vh first. One concern: the three.js r128 cdnjs URL is exactly: https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js ✓ widely used. If the CDN fails (offline), the page is blank — acceptable. Add a meta theme-color #0e1319. Let me double-check the pinch + pointer capture: setPointerCapture per pointer id on the same element works with multi-touch (each pointer captured separately) ✓. Prevent scrolling on the panel from affecting the canvas: they are separate elements ✓. Wheel on the panel shouldn't zoom the scene: wheel listener is on canvas only ✓. iOS Safari: pointer events supported (13+). Fine. Now, "AUTO" zoom oscillation amplitude 0.12 → dist 4.3 → ±0.5m, gentle ✓. Rotation 0.45 rad/s ≈ 26s per revolution — moderate; maybe 0.5. Initial view.yaw 0.85 gives a nice 3/4 view. Camera fov 42; min dist clamp: zoom 0.42*2.6 (H240→5.1*2.6=13?) dDist(240)=2.4*2.3+0.55=6.07; zoom 0.42→2.55m for a 2.4m rack — close but OK; max zoom 2.6→15.8 far but fog 14 … at fog far 14 the rack at 15.8 dist is fully fogged! Fix: fog far relative? Set fog near 8 far 22 and floor circle 9 radius. Or clamp max zoom to 1.9. Let's set fog(0x0e1319, 9, 20), floor radius 9, grid 18/36. Max zoom 2.0 → max dist 12.1 < 20 ✓. Min dist: rack H 2.4 dist 2.55, camera at fov42 fits? half height visible at 2.55: 2.55*tan21°≈0.98*… rack half-diagonal ~1.4 → a bit clipped at max zoom in, acceptable (user zoomed in). Set min zoom to 0.5: 6.07*0.5=3.0 OK. clampZoom 0.5..2.0. dDist for small rack (W60 H80): 0.8*2.3+0.55=2.38; max zoom 2.0 → 4.76m fine. Shadow camera range: rack up to 2m wide, 2.4 tall: left/right ±3.5 covers; top 4; OK. Key light fixed — as the camera orbits, shadows from the fixed light are fine (studio-like). DirectionalLight shadow bias: set key.shadow.bias=-0.0005 to reduce acne. Material double side? Boxes are fine. Now let me write the final CSS + HTML + JS fully. Also add prefers-reduced-motion? If set, disable auto rotate and marquee: nice touch: ``` if(matchMedia('(prefers-reduced-motion: reduce)').matches){cfg.auto=false; document.documentElement.classList.add('prm');} ``` .prm .tk-track{animation:none} .prm .hazard{animation:none}. And setAuto(cfg.auto) syncs the UI. Order of init: after building the swatches, call setAuto(cfg.auto) to sync the button states. Edge: rebuild(true) at init triggers spawn animation ✓. Sheet-body padding bottom for the spec. Panel head on desktop: shows "CONFIGURE" and a chevron that collapses the width. Fine. Font sizes for contrast: brand 26/9, hud dims 20, stepper number 46, spec 26 — strong hierarchy ✓. Now write it all. Include

Make a 3D animation of rack shelve from choosing number of s...