Parade in Motion

\n\n\n\n\n```\n\napp.js:\n```\nimport { createScene } from './scene.js';\nimport { PlayerController } from './controls.js';\nimport { Parade } from './parade.js';\nimport { Smoke } from './effects.js';\n\nconst { scene, camera, renderer, dirLight } = createScene();\nconst parade = new Parade(scene);\nconst smoke = new Smoke(scene);\n// assign smoke to dragon maybe via parade list\n\nconst controller = new PlayerController(camera, renderer.domElement);\ncamera.position.set(25, 6, 140);\n\nconst clock = new THREE.Clock();\nfunction animate() {\n requestAnimationFrame(animate);\n const dt = Math.min(clock.getDelta(), 0.1);\n const t = clock.getElapsedTime();\n controller.update(dt);\n parade.update(t, dt, smoke);\n smoke.update(dt);\n renderer.render(scene, camera);\n}\nanimate();\n\nwindow.addEventListener('resize', () => {\n camera.aspect = window.innerWidth/window.innerHeight;\n camera.updateProjectionMatrix();\n renderer.setSize(window.innerWidth, window.innerHeight);\n});\n```\nNeed import THREE for Clock in app.js; could get from createScene? We'll import three.\n\nparade.update signature `(time, dt, smoke)`. For dragon, call emit smoke at intervals. We can store reference to dragon float and pass smoke. In Parade constructor, after creating floats, find dragon and store.\n\ncontrols.js details.\n\nImplement desktop pointer lock. Sensitivity 0.002. On mousemove:\n```\nif (document.pointerLockElement === this.dom) {\n this.yaw -= e.movementX * sensitivity;\n this.pitch -= e.movementY * sensitivity;\n this.clampPitch();\n}\n```\nOn pointerdown: if desktop and not locked, this.dom.requestPointerLock(); Maybe on any pointerdown over canvas. Also on touchstart on right side for look.\n\nNeed keyboard:\n```\nwindow.addEventListener('keydown', e=> { this.keys[e.code]=true; });\nwindow.addEventListener('keyup', e=> { this.keys[e.code]=false; });\n```\nMovement:\n```\nconst forward = (keys.KeyW?1:0) - (keys.KeyS?1:0);\nconst right = (keys.KeyD?1:0) - (keys.KeyA?1:0);\nlet speed = this.speed;\nif (keys.ShiftLeft) speed = this.runSpeed;\nconst dir = new THREE.Vector3();\nconst forwardVec = new THREE.Vector3(0,0,-1).applyQuaternion(camera.quaternion);\nforwardVec.y=0; forwardVec.normalize();\nconst rightVec = new THREE.Vector3(1,0,0).applyQuaternion(camera.quaternion); rightVec.y=0; normalize.\ndir.addScaledVector(forwardVec, forward).addScaledVector(rightVec, right);\nif (dir.lengthSq()>0) dir.normalize();\ncamera.position.addScaledVector(dir, speed*dt);\n```\nClamp camera y between 1.6 and 50 maybe. Add gravity? Not needed. If user falls? no.\n\nJoystick:\n```\nconst joystickZone = document.getElementById('joystick-zone');\nthis.joystickVector = {x:0,y:0};\nif (joystickZone) {\n const manager = nipplejs.create({ zone: joystickZone, mode:'static', position:{left:'75px', bottom:'75px'}, color:'white', size:100 });\n manager.on('move', (evt, data) => { this.joystickVector.x = data.vector.x; this.joystickVector.y = data.vector.y; });\n manager.on('end', () => { this.joystickVector.x=0; this.joystickVector.y=0; });\n}\n```\nUse same movement logic: forward = -joystickVector.y, right = joystickVector.x.\n\nTouch look:\n```\nlet lookTouchId = null;\nlet lastLookX=0, lastLookY=0;\nwindow.addEventListener('touchstart', e=>{\n for (const t of e.changedTouches) {\n if (t.clientX > window.innerWidth*0.45) { lookTouchId=t.identifier; lastLookX=t.clientX; lastLookY=t.clientY; }\n }\n});\nwindow.addEventListener('touchmove', e=>{\n for (const t of e.changedTouches) {\n if (t.identifier===lookTouchId) {\n const dx = t.clientX-lastLookX; const dy=t.clientY-lastLookY;\n this.yaw -= dx*0.005; this.pitch -= dy*0.005; clamp; lastLookX=t.clientX; lastLookY=t.clientY;\n }\n }\n}, {passive:false});\nwindow.addEventListener('touchend', e=> { ... if ended clear; });\n```\nBut passive false to prevent scroll; CSS touch-action none handles. Fine.\n\nClamp pitch:\n```\nthis.pitch = Math.max(-Math.PI/2 + 0.1, Math.min(Math.PI/2 - 0.1, this.pitch));\n```\nActually near 90. Use 1.5 rad ~85 deg.\n\nApply orientation:\n```\ncamera.rotation.order = 'YXZ';\ncamera.rotation.y = this.yaw;\ncamera.rotation.x = this.pitch;\n```\n\nfloats.js classes.\n\nMaybe include `name` label using a canvas texture plane above float. For performance maybe only for large ones? We'll add to all, but small nimble maybe too many. Could avoid labels. Let's add a simple name label only for rigid and hybrid? But user wants identify floats. We can add text geometry? Too heavy. Use CanvasTexture.\n\nCreate helper `makeLabel(name)` returns sprite or mesh facing camera? If mesh plane, it won't billboard unless update. Could add as child of float group rotated x? A plane child oriented vertical will move with float but face +z. Better use Sprite with canvas texture always faces camera. Sprite material sizeInAttenuation? Use sizeAttenuation true. But sprites always face camera. Add to group. Fine. For many, performance okay. Use canvas 256x64.\n\nBut adding sprites to each nimble unit maybe many. We can skip nimble labels.\n\nFor rigid and hybrid, add label sprite at y=height+3.\n\nLet's implement Float base:\n```\nexport class Float {\n constructor(def) { this.def=def; this.group=new THREE.Group(); this.speed = def.speed || 8; this.length = def.length || 10; this.width = def.width || 5; }\n reset(z) { this.group.position.z = z; }\n}\n```\nActually create subclasses.\n\nRigidFloat:\n```\nconstructor(def){ super(def); build(); }\nbuild() {\n const h = 4 + this.length*0.25;\n // body\n if (def.shape==='mushroom') {\n // stem\n const stem = new THREE.Mesh(new THREE.CylinderGeometry(this.width*0.25,this.width*0.25, h*0.6, 16), mat);\n stem.position.y = h*0.3;\n this.group.add(stem);\n // cap\n const cap = new THREE.Mesh(new THREE.SphereGeometry(this.width*0.6, 24, 16, 0, Math.PI*2, 0, Math.PI/2), mat);\n cap.position.y = h*0.6;\n this.group.add(cap);\n } else if (def.shape==='ship') { ... long box with mast\n const hull = new THREE.Mesh(new THREE.BoxGeometry(this.width, h*0.5, this.length), mat);\n hull.position.y = h*0.25;\n this.group.add(hull);\n // mast\n const mast = new THREE.Mesh(new THREE.CylinderGeometry(0.2,0.2,h*1.2), new THREE.MeshStandardMaterial({color:0x5c4033}));\n mast.position.y = h*0.6; this.group.add(mast);\n // sail\n const sail = new THREE.Mesh(new THREE.BoxGeometry(0.1,h*0.8,this.length*0.5), new THREE.MeshStandardMaterial({color:0xffffff}));\n sail.position.set(0, h*0.7, 0); this.group.add(sail);\n } else if (def.shape==='rock') { ...\n } else if (def.shape==='carriage') { ...\n } else if (def.shape==='tower') { ...\n } else if (def.shape==='banner') { ...\n } else { default box }\n // internal animations\n this.animators = [];\n // add side wheels/rotors\n for (let side of [-1,1]) {\n const wheel = new THREE.Mesh(new THREE.CylinderGeometry(1,1,0.4,16), new THREE.MeshStandardMaterial({color:0x333333}));\n wheel.rotation.z = Math.PI/2;\n wheel.position.set(side*(this.width/2+0.5), 2, -this.length*0.25);\n this.group.add(wheel);\n this.animators.push(wheel);\n const wheel2 = wheel.clone();\n wheel2.position.set(side*(this.width/2+0.5), 2, this.length*0.25);\n this.group.add(wheel2);\n this.animators.push(wheel2);\n }\n // characters\n if (def.characters) { ... add colored spheres on top }\n // lights for Blue Fairy\n if (def.name.includes('Blue Fairy')) { add point light }\n // label\n addLabel(this.group, def.name, h+3);\n}\nupdate(time, dt) {\n this.group.position.z += this.speed * dt;\n this.animators.forEach(a => a.rotation.x += dt * 2);\n // wrap\n if (this.group.position.z > 420) this.group.position.z = -420;\n}\n```\n\nFor internal animations, perhaps vary type: clock hands rotate at different rates. We can implement generic.\n\nFor Blue Fairy, add a point light and maybe a glowing sphere.\n\nNimbleFloat:\n```\nconstructor(def){ super(def); this.units=[]; build(); }\nbuild() {\n for (let i=0; i{\n const d = u.userData;\n // swerve\n u.position.x = d.baseX + Math.sin(time*d.speed + d.phase)*d.amp;\n // spin / stop behavior\n d.spinTimer -= dt;\n if (d.spinTimer <= 0) {\n d.spinState = d.spinState === 0 ? 1 : 0;\n d.spinTimer = d.spinState ? 1.5 + Math.random() : 2 + Math.random()*3;\n }\n if (d.spinState) u.rotation.y += dt * 4;\n // slight bob\n u.position.y = 1 + Math.sin(time*3 + d.phase)*0.2;\n });\n if (this.group.position.z > 420) this.group.position.z = -420;\n}\n```\nShape builders for nimble:\n- horse: box body, cylinder legs, neck.\n- soldier: tall cylinder + box hat.\n- smallMushroom: stem + flattened sphere.\n- bug: sphere body + small spheres antennae.\n- turtle: flattened sphere shell + box head.\n- swan: sphere body + neck cylinder.\n- wagon: box + wheels.\n- bearBarrel: bear sphere on cylinder barrel.\n- elephant: box body + trunk cylinder + ears.\n\nSimplify each unit as colored compound shape. Use shared materials.\n\nHybridFloat:\n```\nconstructor(def){ super(def); this.parts={}; build(); }\nbuild() {\n if (def.articulation==='wings') buildSwan();\n else if (def.articulation==='platforms') buildBallroom();\n else if (def.articulation==='dragon') buildDragon();\n else if (def.articulation==='topiary') buildSmallWorld();\n}\nupdate(time, dt) {\n this.group.position.z += this.speed * dt;\n switch articulation:\n wings: this.parts.leftWing.rotation.z = ...; right ...\n platforms: rotate cylinders\n dragon: sway neck chain, tail, toggle visibility, emit smoke via callback\n topiary: rotate small topiaries\n}\n```\nNeck: Use array of segments (boxes/cylinders) each child of previous for articulated snake? Or just rotate each segment around Y with increasing phase. Could create segments along z; update rotation.y = sin(time + i*0.5)*0.3. Tail similarly.\n\nSmoke effect: In Parade.update, if dragon exists and visible, emit particles at head position. Could store dragon reference and use smoke.emit(position, count). We'll create an `effects.js` Smoke class with pool.\n\nSmoke class:\n```\nexport class Smoke {\n constructor(scene, max=200) {\n this.particles=[];\n this.geometry = new THREE.SphereGeometry(0.6,8,8);\n this.material = new THREE.MeshBasicMaterial({color:0xdddddd, transparent:true, opacity:0.6});\n for (let i=0; i -0.3;` so visible mostly.\n\nDragon build:\n- body long box.\n- neck segments: maybe 6 segments, boxes, each child of previous? For simpler sway, use independent segments with offsets. But hierarchical easier: neckRoot attached to front of body, then segment children. Each segment's rotation.y offset sine. Need forward direction? Float moves along +z, head faces +z. So neck extends from body front (towards +z). We can create neck root at z = length/2, y=4. Add segment1, segment2... each child. Each segment is a short cylinder/box length 2, position z=1 (so extends forward). Then update each child rotation.y = sin(time + index)*0.2. The head is last child, a sphere.\n- tail: root at back, segments along -z, rotate y = sin(time + index + PI)*0.3.\n- Elliott color green.\n- Add point light in mouth for fire? No.\n\nSmall World Finale:\n- Base big box (two decks). Add many small topiary shapes (spheres/cones) on positions, rotate around vertical axis. Also add small dolls (small cylinders). update rotate each.\n\nBallroom:\n- base box, two canopies (cone roofs). Platforms: cylinders on top rotating.\n\nMother Swan:\n- body boat-shaped box, neck cylinder, head sphere. Wings: large flat boxes pivoted at sides. In update, wings flap rotation z +/- sin.\n\nFor all floats, label using sprite.\n\nHelper functions in floats.js:\n```\nfunction makeMaterial(color) { return new THREE.MeshStandardMaterial({color, roughness:0.6, metalness:0.1}); }\nfunction addLabel(group, text, y) { ... }\n```\n\nScene fog: If labels as sprites, they might be affected by fog? Sprites with default material not fog. Fine.\n\nNeed ensure import `THREE` in floats.js etc.\n\nNow route boundaries and player collision? Not necessary. Floats pass through player maybe. Could add simple collision? Not needed. User can walk anywhere.\n\nNeed maybe spawn player above ground. y=6. Good.\n\nPotential issue: Many nimble units with individual meshes = performance. Total units maybe ~20, each compound ~5 meshes = 100 meshes. Plus rigid/hybrid ~100 meshes. Fine.\n\nNeed ensure mobile one screen no scroll. CSS handles.\n\nNeed consider joystick zone left side and touch look right side. On mobile, the joystick zone has pointer-events auto; the right side pointer-events none on crosshair. Body touch-action none. Good.\n\nNow code.\n\nLet's write each file. Need make code clean and modular.\n\nDetailed floats.js implementation. It will be long but okay.\n\nMaybe define shape builders in separate helper functions to avoid repetition.\n\nLet's construct.\n\nfloats.js content:\n\n```\nimport * as THREE from 'three';\n\nconst matCache = new Map();\nfunction getMat(color) { if (!matCache.has(color)) matCache.set(color, new THREE.MeshStandardMaterial({color, roughness:0.5, metalness:0.1})); return matCache.get(color); }\n\nfunction makeLabel(text) {\n const canvas = document.createElement('canvas');\n canvas.width = 512; canvas.height = 128;\n const ctx = canvas.getContext('2d');\n ctx.fillStyle = 'rgba(0,0,0,0.4)';\n ctx.roundRect(10,10,492,108,20); ctx.fill();\n ctx.font = 'bold 44px sans-serif';\n ctx.fillStyle = 'white';\n ctx.textAlign = 'center';\n ctx.textBaseline = 'middle';\n ctx.fillText(text, 256, 64);\n const tex = new THREE.CanvasTexture(canvas);\n const mat = new THREE.SpriteMaterial({map:tex, transparent:true});\n const sprite = new THREE.Sprite(mat);\n sprite.scale.set(12, 3, 1);\n return sprite;\n}\n\nexport class Float { ... }\n```\n\nCanvas roundRect not supported in all browsers? Modern okay. Could use fillRect. We'll use rect with fill. Fine.\n\nFloat base:\n```\nexport class Float {\n constructor(def) {\n this.def = def;\n this.group = new THREE.Group();\n this.speed = def.speed ?? 8;\n this.length = def.length ?? 8;\n this.width = def.width ?? 4;\n }\n resetIfNeeded(limit=420, start=-420) { if (this.group.position.z > limit) this.group.position.z = start; }\n}\n```\n\nRigidFloat extends Float:\n```\nexport class RigidFloat extends Float {\n constructor(def) { super(def); this.animators=[]; this.build(); }\n build() { ... }\n update(time, dt) { this.group.position.z += this.speed*dt; this.animators.forEach(a => a.rotation.x += dt*3); this.resetIfNeeded(); }\n}\n```\n\nIn build default:\n```\nconst mat = getMat(this.def.color);\nconst h = 5 + this.length*0.3;\nlet body;\nswitch(this.def.shape){...}\n// internal rotors\nfor (let zPos of [-this.length*0.25, this.length*0.25]) { for side... }\nif (this.def.name.includes('Blue Fairy')) { const light = new THREE.PointLight(0xaaddff, 2, 30); light.position.set(0,h+2,0); this.group.add(light); const glow = new THREE.Mesh(new THREE.SphereGeometry(1.2,16,16), new THREE.MeshBasicMaterial({color:0xaaddff})); glow.position.set(0,h+2,0); this.group.add(glow); }\nif (this.def.name.includes('Clock Tower')) { ... add clock hands animators }\n// label\nconst label = makeLabel(this.def.name);\nlabel.position.set(0, h+3, 0);\nthis.group.add(label);\n```\n\nFor clock hands, add two boxes with different pivot at center of tower face. To rotate around z, create group for each hand with box offset y. Add to group. In update rotate groups around z. But generic animators rotates meshes around x (if set). Instead store in `this.clockHands` and update specifically. Let's keep in `this.animators` but generic rotation.x not right for hands (should rotate around z facing +z). Actually clock face vertical facing +z; hands rotate around z axis. We can just add boxes and in update use `hand1.rotation.z -= dt; hand2.rotation.z -= dt*0.1;`. So store in `this.hands`.\n\nSimplify: only one internal animation type for rigid: side wheels rotate x; for Clock Tower add hands separately.\n\nCarriage wheels: maybe add wheel meshes at sides and rotate. Fine.\n\nNimbleFloat:\n```\nexport class NimbleFloat extends Float {\n constructor(def) { super(def); this.units=[]; this.speed = def.speed ?? 9; this.build(); }\n build() { for i in count createUnit }\n createUnit(shape, color, index) { ... }\n update(time, dt) { ... }\n}\n```\nFor each unit, define shape and color variations. Use `const unit = new THREE.Group();` Add body. UserData.\n\nNimble shape details:\n- horse: box body (3x1.5x5), box neck, sphere head, four cylinders legs. Color def.color maybe. Add small point light for Knights of Light.\n- soldier: cylinder body (1.5x4), box hat, rectangle rifle.\n- smallMushroom: cylinder stem + sphere cap.\n- bug (snail/firefly): sphere body + smaller sphere shell + two antennae, firefly point light maybe.\n- turtle: flattened sphere shell + box flippers.\n- swan: sphere body + curved neck (cylinder segments or torus?) maybe use 3 cylinders.\n- wagon (hippo/calliope): box + four wheels.\n- bearBarrel: cylinder barrel + sphere bear on top + tiny cylinder arms.\n- elephant: box body + cylinder trunk + box ears + cylinder legs.\n\nUpdate: Each unit baseX maybe random but should avoid huge route width; use amplitude 6, baseX within +/-10. z forward of group + speed*dt. But units should also meander in z? The description says dart and weave, spin, stop. We can add z weave too: position.z offset = sin(time*speed*0.7+phase)*2. But need stay within group bounds? Since group advances, adding local z offset relative to group is fine. But when wrapping group, units reset. Fine.\n\nImplement spin states: each unit has state: 'moving' or 'spinning' or 'stopped'. Timer toggles. If spinning, rotate y. If stopped, speed along z maybe 0? But group still moves. If stopped, unit stays at same world z; could move backward relative to group. For simplicity, nimble units all move forward relative to group at same speed (so they stay within section). Spinning doesn't affect forward.\n\nHybridFloat:\n```\nexport class HybridFloat extends Float {\n constructor(def) { super(def); this.parts=[]; this.articulation = def.articulation; this.build(); }\n build() { ... }\n update(time, dt, smoke, worldPosition?) { ... }\n}\n```\nFor dragon smoke, need world position of mouth. We can compute `new THREE.Vector3().setFromMatrixPosition(head.matrixWorld)` in update. But because we update group position then render, matrixWorld needs update. We can compute local offset: mouth local position within head (0,0,1) transform by head's world matrix. After updating head rotation and group position, call head.updateMatrixWorld(); then getWorldPosition. That works. We need head reference `this.parts.head`.\n\nWhen dragon visible toggles, emit smoke only when visible and timer. Use `if (this.group.visible && Math.floor(time)%2===0 && Math.random()<0.1)` emit.\n\nNeed `smoke` passed from Parade. In Parade.update(time, dt, smoke), for each hybrid update. For dragon, call `f.emitSmoke(time, dt, smoke)` or include smoke parameter. We can make update return emit position or do inside. Simpler: In Parade.update, find dragon hybrid and call method.\n\nLet's define HybridFloat.update(time, dt) for articulation, and separate `emitSmoke(time, dt, smoke)` method. Parade stores `this.dragon`.\n\nSmall World topiaries: store array of meshes. update each rotation.y += dt.\n\nMother Swan wings: store leftWing, rightWing. Update rotation.z.\n\nBallroom platforms: store platforms array; rotation.y.\n\nDragon visibility: `this.group.visible = Math.sin(time * 0.6) > -0.4;` This creates disappear periodic.\n\nTail: store tailSegments, update rotation.y = sin(time*1.5 + i*0.6)*0.25.\n\nNeck: store neckSegments, update rotation.y = sin(time*1.2 + i*0.5)*0.2.\n\nHead maybe slight rotation y = sin(time*1.2 + neckSegments.length*0.5)*0.15.\n\nFor dragon smoke emitter: use world position of head. In emitSmoke:\n```\nif (!this.group.visible) return;\nthis.smokeTimer = (this.smokeTimer || 0) + dt;\nif (this.smokeTimer > 1.5) { this.smokeTimer = 0; this.parts.head.updateMatrixWorld(true); const pos = new THREE.Vector3(); this.parts.head.getWorldPosition(pos); pos.y += 1; smoke.emit(pos, 4); }\n```\n\nNeed `this.parts.head` as Object3D child of last neck segment. Use group structure: neckRoot -> seg1 child -> seg2 child... -> head. Each segment is a Group with a mesh child. We can construct with Groups to allow hierarchical rotation. Example:\n```\nlet parent = this.group;\nconst neckRoot = new THREE.Group(); neckRoot.position.set(0, 5, this.length*0.4); this.group.add(neckRoot);\nlet current = neckRoot;\nthis.neck = [];\nfor i=0; i<5; i++) {\n const segGroup = new THREE.Group();\n const seg = new THREE.Mesh(new THREE.CylinderGeometry(1.2-i*0.1,1.2-i*0.1,2.2,12), mat);\n seg.rotation.x = Math.PI/2; // cylinder along z\n seg.position.z = 1.1;\n segGroup.add(seg);\n current.add(segGroup);\n this.neck.push(segGroup);\n current = segGroup;\n}\nconst head = new THREE.Group(); head.position.z = 1.1; current.add(head); // head\nconst headMesh = new THREE.Mesh(new THREE.SphereGeometry(1.8,16,16), mat); head.add(headMesh);\nthis.parts.head = head;\n```\nTail similar at back.\n\nBallroom: use two cones for canopies. Platforms on base. Use cylinders.\n\nSmall World: use base boxes and rows of topiaries. Topiary: sphere or cone on thin cylinder. Dolls: small boxes.\n\nRigid shape 'rock': cluster of spheres scaled.\n\nRigid 'banner': tall thin box with vertical flag? maybe.\n\nCarriage: use orange sphere body (scaled) + box carriage + cylinder wheels.\n\nPotential code length large but fine.\n\nNow Parade create order. Use floatDefinitions with properties. Need compute gaps to fit route. For rigid 8 floats with gap 45 -> ~360 z range. Nimble 9 groups with gap 30 -> ~270. Hybrid 4 with gap 55 -> ~220. Total ~850; route length 840 (from -420 to 420). Fine. We can set default gaps accordingly. Nimble count not length but group width. We'll position group centers.\n\nActually each NimbleFloat group spans maybe width 20; gap 30.\n\nData file:\n```\nexport const floatDefinitions = [\n {name:'Blue Fairy', type:'rigid', color:0x4db8ff, length:12, width:6, shape:'default', speed:7.5, gap:50},\n ...\n];\n```\nWe'll include gap for each. Nimble shape list.\n\nWe need set speeds similar for parade pacing. Nimble maybe slightly faster to weave around; but if they overtake, okay. For visual, set base speeds 7-9. Nimble speed 8.5.\n\nNow details of floats.js code.\n\nLet's write.\n\nNeed careful with `CylinderGeometry` parameters: radiusTop, radiusBottom, height, radialSegments. If rotation x=PI/2, cylinder axis aligns z.\n\nFor wheels, rotate z=PI/2 to align around y? Actually wheel spinning as it rolls forward should rotate around x? But internal mechanical wheels can rotate around their own axles (y? side wheels). We'll just rotate x for animation.\n\nFor side wheels positioned on left/right, cylinder default vertical (y-axis). To make face side, rotate z=PI/2 so axis x? Let's just use box or cylinder and rotate. Animation around x.\n\nSimplify internal animators as generic meshes rotation.x.\n\nUse label helper.\n\nNeed avoid `CanvasTexture` causing many GPU textures? Only ~12 labels, okay.\n\nPotential issue: SpriteMaterial size attenuation default true. Good.\n\nNow controls.js code.\n\nPointer lock request on canvas click. For mobile no.\n\nWhen pointer lock active, mousemove updates yaw/pitch. On touchmove right side updates.\n\nMovement uses joystick vector. Since joystick left side, pointer-events on zone; document touchmove not called for that touch because zone consumes? Actually touch events bubble. We can ignore if target is joystick zone. Use `if (e.target.closest('#joystick-zone')) return;`. Good.\n\nFor touch look, we need check `t.clientX > window.innerWidth*0.45` and not joystick. Use threshold.\n\nPotential conflict: On mobile, touchstart for pointer lock? Not needed.\n\nKeyboard: ensure preventDefault for Space? Not needed.\n\nNow app.js.\n\nNeed import `THREE` for Clock.\n\nscene.js: return `dirLight` maybe not used.\n\neffects.js as described.\n\nLet's write final output. Ensure each file in own markdown block.\n\nOne concern: The user described many floats; we should include all names. We have all.\n\nLet's verify names count: Rigid: Blue Fairy, Casey Junior & The Giant Drum, Green Mushroom (Alice), The Jolly Roger (Peter Pan), Dwarfs' Diamond Mine (Snow White), Pumpkin Coach (Cinderella), Clock Tower (Cinderella), Sayonara Float. Nimble: Knights of Light, Toy Soldiers, Short Pink Mushroom & Blue Mushroom, Snails & Fireflies, Turtles & Centipede, Baby Swans, Hippo and King Leonidas Calliope, Bear Balancing on Barrels, Elephant Bathing. Hybrid: Mother Swan (Swan Lake), Cinderella’s Ballroom, Pete’s Dragon (Elliott), It's a Small World Finale.\n\nGood.\n\nNow code lengths. The output should be just files. We should maybe include a short intro? The user wants multiple files; index.html one. We can provide with minimal explanation. Fine.\n\nLet's produce.\n\nDouble-check imports:\napp.js imports createScene from './scene.js', PlayerController from './controls.js', Parade from './parade.js', Smoke from './effects.js', * as THREE from 'three'.\nscene.js imports * as THREE.\ncontrols.js imports * as THREE and nipplejs.\nparade.js imports * as THREE, floatDefinitions from './floatData.js', RigidFloat, NimbleFloat, HybridFloat from './floats.js'.\nfloats.js imports * as THREE.\neffects.js imports * as THREE.\nfloatData.js no imports.\n\nNeed check `roundRect` usage. Maybe not available in some contexts. We'll avoid. Use `ctx.fillRect(0,0,512,128)` and set text background via fillStyle with rounded not important. Use `ctx.fillStyle='rgba(0,0,0,0.45)'; ctx.fillRect(0,0,512,128); ctx.lineWidth=8; ctx.strokeStyle='white'; ctx.strokeRect(4,4,504,120);`. Fine.\n\nFor label sprite scaling: width 12, height 3. Position y h+3.\n\nNow code details in floats.js. Let's draft fully.\n\nRigidFloat build:\n```\nbuild() {\n const mat = getMat(this.def.color);\n const h = this.def.shape==='tower' ? 18 : (5 + this.length * 0.35);\n const bodyGroup = new THREE.Group();\n this.group.add(bodyGroup);\n if (this.def.shape === 'mushroom') {\n const stem = new THREE.Mesh(new THREE.CylinderGeometry(this.width*0.25, this.width*0.25, h*0.6, 16), mat);\n stem.position.y = h*0.3;\n bodyGroup.add(stem);\n const cap = new THREE.Mesh(new THREE.SphereGeometry(this.width*0.65, 24, 16, 0, Math.PI*2, 0, Math.PI/2), mat);\n cap.position.y = h*0.6;\n bodyGroup.add(cap);\n // spots\n for (let i=0;i<5;i++){ const spot = new THREE.Mesh(new THREE.SphereGeometry(0.4,8,8), new THREE.MeshStandardMaterial({color:0xffffff})); ... cap.add(spot); }\n } else if (this.def.shape === 'ship') { ... }\n else if (this.def.shape === 'rock') { ... }\n else if (this.def.shape === 'carriage') { ... }\n else if (this.def.shape === 'tower') { ... }\n else if (this.def.shape === 'banner') { ... }\n else { const body = new THREE.Mesh(new THREE.BoxGeometry(this.width, h, this.length), mat); body.position.y = h*0.5; bodyGroup.add(body); }\n // wheels/rotors\n const wheelMat = getMat(0x333333);\n for (const zPos of [-this.length*0.3, this.length*0.3]) {\n for (const side of [-1,1]) {\n const w = new THREE.Mesh(new THREE.CylinderGeometry(1.2,1.2,0.3,16), wheelMat);\n w.rotation.z = Math.PI/2;\n w.position.set(side*(this.width*0.5+0.4), 1.4, zPos);\n this.group.add(w);\n this.animators.push(w);\n }\n }\n if (this.def.characters) { ... }\n if (this.def.name.includes('Blue Fairy')) { ... }\n if (this.def.name.includes('Clock Tower')) { ... }\n // label\n const label = makeLabel(this.def.name);\n label.position.set(0, h+3, 0);\n this.group.add(label);\n}\n```\n\nFor ship:\n```\nconst hull = new THREE.Mesh(new THREE.BoxGeometry(this.width, h*0.45, this.length), mat); hull.position.y=h*0.22;\nbodyGroup.add(hull);\nconst deck = new THREE.Mesh(new THREE.BoxGeometry(this.width*0.9, 0.3, this.length*0.85), getMat(0x5c4033)); deck.position.y=h*0.45; bodyGroup.add(deck);\nconst mast = new THREE.Mesh(new THREE.CylinderGeometry(0.25,0.25,h*1.1,12), getMat(0x5c4033)); mast.position.set(0,h*0.7,0); bodyGroup.add(mast);\nconst sail = new THREE.Mesh(new THREE.BoxGeometry(0.1,h*0.7,this.length*0.45), getMat(0xffffff)); sail.position.set(0,h*0.75,0); bodyGroup.add(sail);\n```\n\nRock:\n```\nfor (let i=0;i<7;i++) { const r = 1+Math.random()*2; const rock = new THREE.Mesh(new THREE.SphereGeometry(r,12,12), mat); rock.scale.set(1+Math.random(),0.7+Math.random()*0.5,1+Math.random()); rock.position.set((Math.random()-0.5)*this.width, r*0.5, (Math.random()-0.5)*this.length); bodyGroup.add(rock); }\n```\n\nCarriage:\n```\nconst base = new THREE.Mesh(new THREE.BoxGeometry(this.width, h*0.3, this.length*0.7), getMat(0x8B4513)); base.position.y=h*0.15; bodyGroup.add(base);\nconst coach = new THREE.Mesh(new THREE.SphereGeometry(this.width*0.5, 24, 16), mat); coach.scale.set(1,0.85,1.3); coach.position.y=h*0.55; bodyGroup.add(coach);\n// wheels\n```\n\nTower:\n```\nconst tower = new THREE.Mesh(new THREE.BoxGeometry(this.width, h, this.width), mat); tower.position.y=h*0.5; bodyGroup.add(tower);\nconst roof = new THREE.Mesh(new THREE.ConeGeometry(this.width*0.8, 4, 4), getMat(0x332211)); roof.position.y=h+2; bodyGroup.add(roof);\n// clock face\nconst face = new THREE.Mesh(new THREE.CircleGeometry(this.width*0.35, 24), new THREE.MeshStandardMaterial({color:0xffffff}));\nface.position.set(0, h*0.65, this.width*0.51); bodyGroup.add(face);\nconst hourHand = new THREE.Group(); const hBox = new THREE.Mesh(new THREE.BoxGeometry(0.15,this.width*0.25,0.05), getMat(0x000000)); hBox.position.y=this.width*0.125; hourHand.add(hBox); hourHand.position.set(0,h*0.65,this.width*0.55); bodyGroup.add(hourHand); this.hands.push(hourHand);\n...\n```\n\nBanner:\n```\nconst pole1 = new THREE.Mesh(new THREE.CylinderGeometry(0.3,0.3,h+4,12), getMat(0x333333)); pole1.position.set(-this.width*0.4, (h+4)*0.5, 0);\nconst pole2 similar.\nconst banner = new THREE.Mesh(new THREE.BoxGeometry(this.width*0.95, h, 0.2), mat); banner.position.y=h*0.5+1; bodyGroup.add(pole1,pole2,banner);\n```\n\nCharacters: For Casey, add 3 spheres with colors red/black/dog? Use simple colored boxes maybe.\n\nBlue Fairy: point light, glow sphere.\n\nNimbleFloat build per shape:\nUse helper `addNimbleUnit(shape, color, i)`.\n```\ncreateNimbleUnit(shape, color, index) {\n const unit = new THREE.Group();\n const mat = getMat(color);\n if (shape==='horse') {\n const body = new THREE.Mesh(new THREE.BoxGeometry(2,1.4,4), mat); body.position.y=1.6; unit.add(body);\n const neck = new THREE.Mesh(new THREE.BoxGeometry(0.8,2,0.8), mat); neck.position.set(0,2.8,1.4); neck.rotation.x=-0.3; unit.add(neck);\n const head = new THREE.Mesh(new THREE.SphereGeometry(0.7,12,12), mat); head.position.set(0,3.5,1.9); unit.add(head);\n for (const [x,z] of [[-0.7,1.3],[0.7,1.3],[-0.7,-1.3],[0.7,-1.3]]) { const leg = new THREE.Mesh(new THREE.CylinderGeometry(0.2,0.2,1.4), getMat(0x222222)); leg.position.set(x,0.7,z); unit.add(leg); }\n if (this.def.name.includes('Knights')) { const l = new THREE.PointLight(0x00ffff,1,8); l.position.set(0,2,0); unit.add(l); const glow = new THREE.Mesh(new THREE.SphereGeometry(0.3), new THREE.MeshBasicMaterial({color:0x00ffff})); glow.position.set(0,2.2,1.5); unit.add(glow); }\n }\n else if (shape==='soldier') { ... }\n else if (shape==='smallMushroom') { ... }\n else if (shape==='bug') { ... }\n else if (shape==='turtle') { ... }\n else if (shape==='swan') { ... }\n else if (shape==='wagon') { ... }\n else if (shape==='bearBarrel') { ... }\n else if (shape==='elephant') { ... }\n unit.position.y = 0.5;\n return unit;\n}\n```\nUpdate: set userData.\n\nFor wagon maybe include wheels animators? Not necessary.\n\nFor fireflies bug, add small point light yellow.\n\nHybridFloat build:\n```\nbuild() {\n if (this.articulation === 'wings') this.buildSwan();\n else if (this.articulation === 'platforms') this.buildBallroom();\n else if (this.articulation === 'dragon') this.buildDragon();\n else if (this.articulation === 'topiary') this.buildSmallWorld();\n const label = makeLabel(this.def.name);\n label.position.set(0, (this.def.height||10)+3, 0);\n this.group.add(label);\n}\n```\n\nMother Swan:\n```\nconst mat = getMat(0xffffff);\nconst body = new THREE.Mesh(new THREE.BoxGeometry(this.width, 4, this.length), mat); body.position.y=2; this.group.add(body);\nconst neck = new THREE.Mesh(new THREE.CylinderGeometry(0.5,0.7,5,12), mat); neck.position.set(0,5,this.length*0.35); neck.rotation.x=-0.4; this.group.add(neck);\nconst head = new THREE.Mesh(new THREE.SphereGeometry(1,16,16), mat); head.position.set(0,7,this.length*0.48); this.group.add(head);\n// wings\nthis.leftWing = new THREE.Group(); this.leftWing.position.set(this.width*0.5, 4, 0);\nconst lw = new THREE.Mesh(new THREE.BoxGeometry(6,0.4, this.length*0.7), mat); lw.position.set(3,0,0); this.leftWing.add(lw); this.group.add(this.leftWing);\nthis.rightWing similar.\n```\n\nBallroom:\n```\nconst mat = getMat(this.def.color);\nconst base = new THREE.Mesh(new THREE.BoxGeometry(this.width, 3, this.length), mat); base.position.y=1.5; this.group.add(base);\n// two canopies\n[-1,1].forEach(side => { const canopy = new THREE.Mesh(new THREE.CylinderGeometry(0.2,this.width*0.6,4,6,1,true), getMat(0xffffff)); canopy.position.set(0,5,side*this.length*0.25); this.group.add(canopy); });\nthis.platforms = [];\nfor (let i=0;i<4;i++) { const plat = new THREE.Mesh(new THREE.CylinderGeometry(2,2,0.3,16), getMat(0xffffff)); plat.position.set((i%2===0?-1:1)*3, 3.2, (i<2?-1:1)*4); this.group.add(plat); this.platforms.push(plat); }\n```\n\nDragon:\nAs described. Smoke emitter.\n\nSmall World:\n```\nconst baseMat = getMat(this.def.color);\nconst lower = new THREE.Mesh(new THREE.BoxGeometry(this.width, 5, this.length), baseMat); lower.position.y=2.5; this.group.add(lower);\nconst upper = new THREE.Mesh(new THREE.BoxGeometry(this.width*0.9,4,this.length*0.9), getMat(0xeeeeee)); upper.position.y=7; this.group.add(upper);\nthis.topiaries=[];\nfor (let i=0;i<20;i++) {\n const isSphere = Math.random()>0.5;\n const geo = isSphere? new THREE.SphereGeometry(0.8,12,12): new THREE.ConeGeometry(0.8,1.6,12);\n const mesh = new THREE.Mesh(geo, getMat(Math.random()*0xffffff));\n const x = (Math.random()-0.5)*this.width*0.7;\n const z = (Math.random()-0.5)*this.length*0.8;\n const y = Math.random()>0.5 ? 9 : 5.2;\n mesh.position.set(x,y,z);\n this.group.add(mesh);\n this.topiaries.push(mesh);\n}\n```\n\nHybrid update:\n```\nupdate(time, dt) {\n this.group.position.z += this.speed*dt;\n if (this.articulation==='wings') { this.leftWing.rotation.z = Math.sin(time*2)*0.4; this.rightWing.rotation.z = -Math.sin(time*2)*0.4; }\n else if (this.articulation==='platforms') { this.platforms.forEach((p,i)=>p.rotation.y += dt*(i%2===0?1:-1)); }\n else if (this.articulation==='dragon') { this.neck.forEach((seg,i)=>seg.rotation.y = Math.sin(time*1.2+i*0.5)*0.2); this.tail.forEach((seg,i)=>seg.rotation.y = Math.sin(time*1.2+i*0.6+Math.PI)*0.25); this.parts.head.rotation.y = Math.sin(time*1.2+this.neck.length*0.5)*0.15; this.group.visible = Math.sin(time*0.6) > -0.4; }\n else if (this.articulation==='topiary') { this.topiaries.forEach((t,i)=>t.rotation.y += dt*(0.5 + (i%2)*0.5)); }\n this.resetIfNeeded();\n}\n```\n\nDragon smoke method:\n```\nemitSmoke(time, dt, smoke) {\n if (!this.group.visible) return;\n this.smokeTimer = (this.smokeTimer||0)+dt;\n if (this.smokeTimer>1.2) {\n this.smokeTimer=0;\n this.parts.head.updateMatrixWorld(true);\n const pos = new THREE.Vector3(); this.parts.head.getWorldPosition(pos);\n pos.y += 0.5;\n smoke.emit(pos, 5);\n }\n}\n```\n\nNeed ensure `this.parts` object initialized in buildDragon.\n\nParade update:\n```\nupdate(time, dt, smoke) {\n this.floats.forEach(f => {\n f.update(time, dt);\n if (f === this.dragon) f.emitSmoke(time, dt, smoke);\n });\n}\n```\n\nNow code size. Should be okay.\n\nOne issue: Dragon's neck segments as Groups with cylinder mesh rotated x=PI/2; when we rotate group around y, cylinder rotates accordingly (sways left/right). Good. Head group added to last segment, position z=1.1. Head will inherit rotations. Good.\n\nFor tail, create tailRoot at back and segments along -z. Each segment group position z=-1.1, cylinder mesh position z=-1.1? Wait if segment group is child of previous, and mesh is inside segment group offset along -z. If mesh position z=-1.1, and segment group itself is positioned at z=-1.1 relative to parent, total length per segment 2.2. That's okay. Simpler: each segment group at origin, mesh extends z from 0 to -2.2 with position z=-1.1; then next segment group position z=-2.2. Let's do:\n```\nconst segGroup = new THREE.Group();\nconst seg = new THREE.Mesh(cyl, mat); seg.rotation.x=Math.PI/2; seg.position.z=-1.1; segGroup.add(seg);\ncurrent.add(segGroup);\ncurrent = segGroup; // next segment relative to end? Need offset next group to z=-2.2\ncurrent.position.z = -2.2;\n```\nBut then current is child of segGroup; setting current.position.z=-2.2 sets local position. Then add next segGroup as child. Good. So tail segments chain backward.\n\nFor neck, segments forward with position z=1.1 and next group z=2.2.\n\nSmoke uses `head.getWorldPosition`. head is a Group with sphere mesh. It inherits group position, body position, neck positions. Good.\n\nNeed import `THREE` in parade/effects.\n\nNow mobile performance: shadows? We set dirLight.castShadow and meshes cast/receive? We didn't set castShadow on float meshes. We can enable on some. For performance maybe disable shadows. But scene looks flat. Maybe enable shadows selectively? With many meshes, shadow maps could be heavy. Let's not enable castShadow on floats; just ground receives. Or enable simple. For visual, keep no shadows to ensure smooth. We'll still set light.\n\nMaybe add ambient hemisphere.\n\nNow controls update: We need to apply camera orientation every frame. Also handle pointer lock change.\n\nPotential conflict: `camera.rotation.order = 'YXZ'` in constructor and update.\n\nJoystick on mobile: We instantiate even if desktop? We can always; it creates in joystick-zone; on desktop hidden. But nipplejs may still attach. It's okay. We can conditionally create only if zone visible. Use `if (joystickZone && joystickZone.offsetParent !== null)` or `getComputedStyle(joystickZone).display !== 'none'`. But on initial load, media query hides on desktop, so offsetParent null. We can just create; it will create in hidden zone? On desktop, no pointer events. Fine. But nipple may produce errors? Likely fine.\n\nLet's implement `this.desktop` detection: `const isTouch = 'ontouchstart' in window || navigator.maxTouchPoints > 0;`. Then pointer lock only desktop.\n\nBut if desktop with touchscreen hybrid, both. Fine.\n\nPointer lock: On pointerdown over canvas, request. But if user clicks UI, not. Use `this.dom.addEventListener('click', ...)`.\n\nMouse move listener on document.\n\nTouch look listeners on window. Need `passive: false` to prevent scrolling, but CSS touch-action none enough. Add anyway.\n\nMovement dt: Use `this.speed` maybe 20? Scale of route: floats 8 units/sec, route 840 units => 105 sec to traverse. Player speed 25 seems good. Run 45. Fine.\n\nNeed clamp player position? No.\n\nNow write final output.\n\nPotential issue: `import nipplejs from 'nipplejs'` on esm.sh maybe default export is a function but also package name? Let's wrap with fallback:\n```\nimport nippleFactory from 'nipplejs';\nif (!nippleFactory && window.nipplejs) nippleFactory = window.nipplejs;\n```\nBut module likely ok. We'll just import.\n\nNeed maybe import `THREE.Clock` in app.js. Fine.\n\nLet's produce final files.\n\nWill include maybe a brief top note: \"Here are the files\". Keep short.\n\nNow final.\n\nHere are the modular files for a smooth, interactive Three.js parade simulation.\n\n`index.html`\n```index.html\n```\n\n`js/scene.js`\n```js/scene.js\n```\n\n`js/effects.js`\n```js/effects.js\n```\n\n`js/controls.js`\n```js/controls.js\n```\n\n`js/floatData.js`\n```js/floatData.js\n```\n\n`js/floats.js`\n```js/floats.js\n```\n\n`js/parade.js`\n```js/parade.js\n```\n\n`js/app.js`\n```js/app.js\n```","page_description","cursor","eyJpZCI6ImxhOTZxemV5MzZ0YnBjZm5lejl0In0","token","included",[],"routes/browser/layout","actionData","errors"]

TDLEP