Electrical Parade Tribute

Loading parade...

\n \n \n \n

\n \n

\n \n\n\n```\n\nutils.js:\n```javascript\nimport * as THREE from 'three';\n\nexport const NEON = {\n red: 0xff0033, pink: 0xff66cc, blue: 0x33ccff, cyan: 0x00ffff,\n green: 0x33ff66, yellow: 0xffff33, orange: 0xff9900, purple: 0xcc33ff,\n white: 0xffffff, gold: 0xffcc00\n};\n\nexport function neonMaterial(color, intensity = 2) {\n return new THREE.MeshStandardMaterial({\n color: color,\n emissive: color,\n emissiveIntensity: intensity,\n roughness: 0.4,\n metalness: 0.1\n });\n}\n\nexport function glowMaterial(color) {\n return new THREE.MeshBasicMaterial({ color: color });\n}\n\nexport function darkMaterial(color = 0x111122) {\n return new THREE.MeshStandardMaterial({ color, roughness: 0.8 });\n}\n\nexport function createBox(w, h, d, color, mat = 'neon', parent) {\n const geo = new THREE.BoxGeometry(w, h, d);\n const material = mat === 'neon' ? neonMaterial(color) : darkMaterial(color);\n const mesh = new THREE.Mesh(geo, material);\n if (parent) parent.add(mesh);\n return mesh;\n}\n\nexport function createSphere(r, color, parent, mat = 'neon', segments = 16) {\n const geo = new THREE.SphereGeometry(r, segments, segments);\n const material = mat === 'neon' ? neonMaterial(color) : darkMaterial(color);\n const mesh = new THREE.Mesh(geo, material);\n if (parent) parent.add(mesh);\n return mesh;\n}\n\nexport function createCylinder(rt, rb, h, color, parent, mat = 'neon', seg = 16) {\n const geo = new THREE.CylinderGeometry(rt, rb, h, seg);\n const material = mat === 'neon' ? neonMaterial(color) : darkMaterial(color);\n const mesh = new THREE.Mesh(geo, material);\n if (parent) parent.add(mesh);\n return mesh;\n}\n\nexport function createLight(color, intensity, distance, parent, pos) {\n const light = new THREE.PointLight(color, intensity, distance);\n if (pos) light.position.copy(pos);\n if (parent) parent.add(light);\n return light;\n}\n\nexport function jitter(obj, time, scale = 0.02) {\n obj.position.x += (Math.random() - 0.5) * scale;\n obj.position.y += (Math.random() - 0.5) * scale;\n obj.position.z += (Math.random() - 0.5) * scale;\n}\n\nexport function nod(obj, time, speed = 3, amp = 0.3) {\n obj.rotation.x = Math.sin(time * speed) * amp;\n}\n\nexport function spin(obj, time, speed = 1) {\n obj.rotation.y += speed * 0.016;\n}\n\nexport function makeFigurine(parent, color, height = 1, pos = new THREE.Vector3()) {\n const group = new THREE.Group();\n group.position.copy(pos);\n createCylinder(0.12, 0.15, height * 0.5, color, group, 'dark');\n createSphere(0.12, color, group, 'dark').position.y = height * 0.3;\n createCylinder(0.04, 0.04, height * 0.4, color, group, 'dark').position.y = -height * 0.35;\n if (parent) parent.add(group);\n return group;\n}\n```\n\ncontrols.js:\n```javascript\nimport * as THREE from 'three';\nimport nipplejs from 'nipplejs';\n\nexport class InputControls {\n constructor(camera, domElement, joystickZone) {\n this.camera = camera;\n this.domElement = domElement;\n this.move = new THREE.Vector3();\n this.speed = 8;\n this.keys = {};\n this.joystickVector = new THREE.Vector3();\n this.isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);\n this.initKeyboard();\n if (this.isMobile && joystickZone) this.initJoystick(joystickZone);\n }\n\n initKeyboard() {\n window.addEventListener('keydown', (e) => { this.keys[e.code] = true; });\n window.addEventListener('keyup', (e) => { this.keys[e.code] = false; });\n }\n\n initJoystick(zone) {\n const manager = nipplejs.create({ zone, mode: 'static', position: { left: '70px', bottom: '70px' }, size: 120, color: 'rgba(255,255,255,0.4)' });\n manager.on('move', (evt, data) => {\n const angle = data.angle.radian;\n const force = Math.min(data.force, 1);\n this.joystickVector.set(Math.cos(angle) * force, 0, -Math.sin(angle) * force);\n });\n manager.on('end', () => this.joystickVector.set(0, 0, 0));\n }\n\n update(dt) {\n const forward = new THREE.Vector3(0, 0, -1).applyQuaternion(this.camera.quaternion);\n const right = new THREE.Vector3(1, 0, 0).applyQuaternion(this.camera.quaternion);\n forward.y = 0; right.y = 0; forward.normalize(); right.normalize();\n\n const dir = new THREE.Vector3();\n if (this.keys['KeyW'] || this.keys['ArrowUp']) dir.add(forward);\n if (this.keys['KeyS'] || this.keys['ArrowDown']) dir.sub(forward);\n if (this.keys['KeyD'] || this.keys['ArrowRight']) dir.add(right);\n if (this.keys['KeyA'] || this.keys['ArrowLeft']) dir.sub(right);\n\n if (!this.isMobile) {\n if (dir.length() > 0) dir.normalize();\n this.camera.position.addScaledVector(dir, this.speed * dt);\n } else {\n const j = this.joystickVector;\n const joyDir = forward.clone().multiplyScalar(-j.z).add(right.clone().multiplyScalar(j.x));\n this.camera.position.addScaledVector(joyDir, this.speed * dt);\n }\n }\n}\n```\n\nparadeUnits.js:\nThis will be long. I'll design a builder pattern.\nEach unit function returns an object: `{ group, update(time, dt, baseSpeed) }`.\nThe main loop positions them on the curve based on distance.\n\nLet's write units. I'll keep them compact.\n\n```javascript\nimport * as THREE from 'three';\nimport { NEON, neonMaterial, darkMaterial, createBox, createSphere, createCylinder, createLight, makeFigurine, nod, spin, jitter } from './utils.js';\n\nfunction basePlatform(parent, w = 2.4, h = 0.5, d = 4) {\n const group = new THREE.Group();\n createBox(w, h, d, 0x222233, group, 'dark');\n // wheels\n for (let x of [-w/2+0.3, w/2-0.3]) {\n for (let z of [-d/2+0.4, d/2-0.4]) {\n const w = createCylinder(0.25, 0.25, 0.15, 0x111111, group, 'dark');\n w.rotation.z = Math.PI / 2;\n w.position.set(x, -h/2 - 0.05, z);\n }\n }\n if (parent) parent.add(group);\n return group;\n}\n\nexport function createHerculesTitleUnit() {\n const group = new THREE.Group();\n basePlatform(group, 3, 0.6, 4.5);\n // Neon HERCULES letters\n const letters = ['H','E','R','C','U','L','E','S'];\n const signGroup = new THREE.Group();\n signGroup.position.set(0, 1.4, 0);\n letters.forEach((l, i) => {\n const letter = createBox(0.28, 0.5, 0.1, NEON.gold, signGroup);\n letter.position.set((i - letters.length/2 + 0.5) * 0.32, 0, 0);\n });\n group.add(signGroup);\n // Blue Fairy\n const fairy = makeFigurine(group, NEON.blue, 1.6, new THREE.Vector3(0, 2.2, -1.2));\n const fairyGlow = createLight(NEON.blue, 2, 6, fairy);\n fairyGlow.position.y = 0.5;\n createLight(NEON.gold, 1, 5, group, new THREE.Vector3(0, 1.2, 0.5));\n return {\n name: 'The Hercules Title Float',\n group,\n update(time, dt) {\n signGroup.rotation.y = Math.sin(time * 0.8) * 0.25;\n fairy.rotation.y = Math.sin(time * 0.4) * 0.1;\n }\n };\n}\n...\n```\nThis is getting quite involved. I need to generate all 11 units. I'll be careful to keep code manageable.\n\nFor the independent vehicles (Alice bugs), I can create a small `BugVehicle` and attach them to the main group's parent but with offsets. Or attach to group and animate them orbiting in local space. The description says \"circled around the main float\". I'll attach them to the unit group and rotate them around the mushroom in local space.\n\nFor the parade movement along a curve, I'll define a `getPositionAt(distance)` function. Each unit has a `distanceOffset`. Main loop updates a global `paradeDistance` and sets each unit's position/rotation based on `paradeDistance - offset`. Stop logic can be handled globally (parade speed) or per unit. The prompt says \"stop\" as a movement class. I'll implement a global stop schedule: every ~20 seconds, parade pauses for 3 seconds. Per unit, some parts keep animating (spin, nod) during stop.\n\nThe \"turn corners\" class: handled by curve following.\n\nI'll make the route a rounded rectangle: 4 control points with `CatmullRomCurve3` closed = true. But closed loop means units will lap. That's fine. The length is e.g. 240 units. Each unit offset by ~6 units. Total parade length ~70 units. Loop works.\n\nCamera follow: I'll implement a `followTarget` which is the first unit (or user selected). Actually simpler: default camera looks at lead unit from a fixed offset, but user can switch to free camera with WASD/joystick. The \"Follow\" button toggles. In follow mode, camera is placed behind and above the lead unit, looking ahead.\n\nUnit tracker: Determine which unit is closest to camera view center or which has just passed. Simpler: based on parade distance, the unit whose offset bracket contains `paradeDistance % loopLength`. Since units are ordered by offset, we can compute progress percentage.\n\nI should also add street lamps and crowd. Use instanced meshes.\n\nI'll now write the full code. It will be substantial but should fit.\n\nLet's ensure no syntax errors. I'll write each file carefully.\n\nPotential issue: `nipplejs` default export. ESM from esm.sh might export default as `nipplejs`. Using `import nipplejs from 'nipplejs'` should work.\n\nPotential issue: `OrbitControls` from three/addons. Use import map.\n\nPotential issue: on mobile, `pointer-events: none` on UI except interactive elements. Good.\n\nPotential issue: vertical rotation clamp. `orbitControls.maxPolarAngle = Math.PI / 2 - 0.05; minPolarAngle = 0.1;`\n\nPotential issue: touch joystick and OrbitControls. Joystick zone is on bottom left. If user drags there, joystick captures. OrbitControls won't see it because zone is separate. If user touches canvas, OrbitControls handles. Good.\n\nPotential issue: performance. Limit number of crowd instances and light count. Each float has 1-3 point lights; total ~25 point lights. Mobile can handle that if shadows off. I'll set `renderer.shadowMap.enabled = false` to save.\n\nNow write all files. I'll ensure the code is not too long but functional.\n\nI need to include `controls.js` with both desktop and mobile. For desktop, OrbitControls handles mouse look and WASD moves camera. For mobile, one-finger drag on canvas rotates (OrbitControls), joystick moves.\n\nI should provide comments briefly.\n\nGiven the length, I'll make sure each unit has a clear identity. Let's code.\n\nI'll write `paradeUnits.js` with a `createUnit(name)` function that returns object.\n\nLet's list units with features:\n\n1. `Hercules Title Float`: Gold neon HERCULES sign spinning, Blue Fairy figurine glowing blue on top.\n2. `Alice in Wonderland`: Mushroom (red/white cap, glowing stem), Alice figurine. Bugs: 4 small vehicles (snail, firefly, centipede) orbiting the float and spinning.\n3. `Cinderella`: Translucent pumpkin coach (orange sphere with windows), clock tower with hands rotating and midnight flash.\n4. `Peter Pan`: Pirate ship hull (brown/dark), neon outlines, Hook figure.\n5. `Mount Olympus`: Zeus figure with lightning bolts (yellow cones) and clouds (white spheres) jittering. Muses as figurines.\n6. `Snow White`: Cavern hill with colored gems (small glowing spheres).\n7. `Underworld & Hades`: Dark three-tier structure, Hades figure with cigar flame light, hydra heads trailing behind (nod/jitter).\n8. `Pinocchio`: Carnival float with donkey figures, neon poles.\n9. `Pete's Dragon`: Green dragon, disappearing lights toggle, smoke puffs, nodding head, jittering tail.\n10. `Victory Float`: Hercules & Megara, glowing H lifted periodically, Pegasus with flapping wings.\n11. `Grand Finale`: Long patriotic float (128ft -> long box) with flags, stars, eagle with moving wings, Mickey & Minnie on top.\n\nI'll define a helper for the trailing hydra heads: create as separate groups behind the main float, but to make them \"trail\", I can attach them to the main group with a lag. Since all move together, local animation is enough.\n\nFor \"Pegasus dynamically fluttered its wings\" - animate wing rotation.\n\nFor \"Eagle with moving wings\" - same.\n\nFor \"Mickey & Minnie in flag outfits\" - simple figurines with red/white/blue.\n\nFor \"Hercules periodically lifts glowing H\" - animate H position/rotation with a periodic function.\n\nFor \"Elliott disappears by turning off lights\" - toggle emissive intensity of dragon materials every few seconds.\n\nFor \"Hades cigar spits real flames\" - flicker point light and maybe small cone scale.\n\nFor \"Clock strikes midnight\" - flash lights and rotate hands fast.\n\nFor \"Zeus throwing lightning bolts\" - jitter bolts and flash point lights.\n\nFor \"Blue Fairy: stay still and move\" - fairy stays upright, base moves.\n\nI'll implement.\n\nNow I need to be mindful of the output length. The user explicitly asked for multiple files. I will output all files. I should not separate into phases. I'll just output the complete set.\n\nLet's write code.\n\nHere is a complete, mobile-first interactive parade simulation split across multiple files. It procedurally recreates each unit with neon lights, movement classes, and a nighttime street route.\n\nindex.html\n```index.html\n```\n\nutils.js\n```utils.js\n```\n\nparadeUnits.js\n```paradeUnits.js\n```\n\ncontrols.js\n```controls.js\n```\n\nmain.js\n```main.js\n```\n\n### How to run\n1. Save all five files in the same folder.\n2. Open `index.html` in a modern browser.\n3. The parade starts immediately. Drag to look around; use **WASD** on desktop or the bottom-left joystick on mobile to fly the camera. Toggle **Follow / Free** to switch camera modes, and use the slider to speed up or slow down the procession.","page_description","cursor","eyJpZCI6Im02NjBsbW0waXd3YXJoOTRwZ3NoIn0","token","included",[],"routes/browser/layout","actionData","errors"]