Hip-Hop B-Boy 3D - Three.js

{"id":"gen-1781841316-96x4kp8x1IcCHOEn1MOp","choices":[{"finish_reason":"stop","index":0,"logprobs":null,"message":{"content":"```html\n\n\n\n\nHip-Hop B-Boy 3D - Three.js\n\n\n\n

Hip-Hop Power

★ Break The Limits ★

3D • Three.js

\n\n\n\n\n\n\n\n\n\n\n\n\n```","refusal":null,"role":"assistant","annotations":null,"audio":null,"function_call":null,"tool_calls":null,"reasoning":"The user wants a Three.js example of a hyper-realistic image of someone doing hip-hop dance with multiple difficult moves. Since this needs to be in an iframe, I need to provide complete HTML with Three.js.\n\nLet me create a detailed 3D scene with:\n1. A humanoid figure performing hip-hop dance\n2. Multiple dance poses/keyframes that animate\n3. Realistic lighting and shadows\n4. Urban environment (street, building, speakers)\n5. Particle effects for atmosphere\n\nI'll use Three.js to create a stylized 3D character with simple geometry but realistic lighting, textures, and post-processing effects. Let me make it visually impressive.\n\nI'll structure the scene:\n- Ground plane with texture\n- Background buildings\n- A dancing figure made of multiple parts (head, torso, arms, legs)\n- Animation of hip-hop dance moves (e.g., top rock, footwork, freezes, power moves)\n- Stage lighting\n- Particles for dust/light effects\n- Music speakers\n- Post-processing for bloom effect\n\nLet me code this:\n\n```html\n\n\n\nHip-Hop Dance\n\n\n\n

Hip-Hop Dance Animation

\n\n\n\n\n```\n\nLet me build a more complete and impressive version with multiple dance poses that switch between them, and add realistic effects.\n\nI'll create:\n1. A figure with body parts that can rotate/pose\n2. 4-5 different hip-hop dance poses (top rock, six-step, baby freeze, windmill-like pose, standing pose)\n3. Smooth transitions between poses\n4. Spotlight from above\n5. Ground with reflections\n6. Background urban scene\n7. Particles\n\nLet me code this carefully. Since I can't use modules easily, I'll use the global Three.js r128.\n\nActually, for a more realistic look, I should:\n- Use proper materials (MeshStandardMaterial, MeshPhysicalMaterial)\n- Use environment maps for reflections\n- Use bloom post-processing\n- Use shadows\n\nLet me write the full code now. I'll make the character with simple but expressive geometry.\n\nDance moves I'll include:\n1. Top Rock - one arm up, body leaning\n2. Six-step - low to ground, legs in motion\n3. Baby freeze - handstand-like position\n4. Flare-like - legs up in air\n5. Standing with attitude - hands in air\n\nLet me code:\n\n```javascript\n// Scene\nconst scene = new THREE.Scene();\nscene.fog = new THREE.Fog(0x000000, 10, 50);\n\nconst camera = new THREE.PerspectiveCamera(50, window.innerWidth/window.innerHeight, 0.1, 1000);\ncamera.position.set(0, 3, 8);\ncamera.lookAt(0, 1.5, 0);\n\nconst renderer = new THREE.WebGLRenderer({antialias: true});\nrenderer.setSize(window.innerWidth, window.innerHeight);\nrenderer.shadowMap.enabled = true;\nrenderer.shadowMap.type = THREE.PCFSoftShadowMap;\nrenderer.toneMapping = THREE.ACESFilmicToneMapping;\nrenderer.toneMappingExposure = 1.2;\ndocument.body.appendChild(renderer.domElement);\n\n// Ground\nconst groundGeo = new THREE.PlaneGeometry(50, 50);\nconst groundMat = new THREE.MeshStandardMaterial({\n color: 0x222222,\n roughness: 0.4,\n metalness: 0.6\n});\nconst ground = new THREE.Mesh(groundGeo, groundMat);\nground.rotation.x = -Math.PI/2;\nground.receiveShadow = true;\nscene.add(ground);\n\n// Character creation\nconst character = new THREE.Group();\n\n// Use skin material\nconst skinMat = new THREE.MeshStandardMaterial({\n color: 0xc68642,\n roughness: 0.6,\n metalness: 0.1\n});\nconst clothMat = new THREE.MeshStandardMaterial({\n color: 0x222244,\n roughness: 0.7,\n metalness: 0.1\n});\nconst shoeMat = new THREE.MeshStandardMaterial({\n color: 0xffffff,\n roughness: 0.5\n});\n\n// Build character with hierarchical structure\nconst root = new THREE.Group();\ncharacter.add(root);\n\n// Torso\nconst torso = new THREE.Group();\n// ... etc\n```\n\nOK this is getting complex. Let me focus on making a really good visual experience with the time I have. I'll make a stylized character that captures the energy of hip-hop.\n\nLet me think about the structure more carefully:\n- Root (hip pivot)\n - Hip\n - Torso\n - Left shoulder\n - Left upper arm\n - Left forearm\n - Left hand\n - Right shoulder\n - Right upper arm\n - Right forearm\n - Right hand\n - Neck\n - Head\n - Left hip\n - Left thigh\n - Left calf\n - Left foot\n - Right hip\n - Right thigh\n - Right calf\n - Right foot\n\nEach joint will have its own rotation that we can animate.\n\nFor hip-hop moves, the key things are:\n- Arm positions (often bent at 90 degrees or extended)\n- Leg positions (kicks, sweeps, twists)\n- Body angles (leaning, twisting)\n- Head positions (looking at audience)\n\nLet me design 5 keyframe poses:\n\nPose 1: \"Top Rock\" - Standing, one arm up, body tilted, legs apart\nPose 2: \"Six Step\" - Crouched, one leg extended, arms out\nPose 3: \"Baby Freeze\" - One hand on ground, body sideways, legs up\nPose 4: \"Air Flare\" - Body in air, legs in V shape, arms supporting\nPose 5: \"Smurf\" or \"Backspin entry\" - Low stance, hand on ground\n\nAnimation: Cycle through these poses with smooth transitions using quaternion slerp or just lerp on rotation values.\n\nLet me code this up properly. I want it to be visually impressive with:\n- Realistic urban background (buildings in distance)\n- Spotlights\n- Floor with reflection\n- Particles in air\n- Colorful lighting (purple, blue, red like a club)\n\nLet me write the complete code:\n\n```html\n\n\n\n\nHip-Hop Dance - Three.js\n\n\n\n

HIP-HOP

BREAK THE GRAVITY

\n\n\n\n\n```\n\nNow let me write the full JavaScript. I need to be careful with the structure.\n\nFor background buildings, I'll just use simple box geometries with windows texture (canvas texture).\n\nFor environment lighting, I'll use a few point lights and spotlights.\n\nFor bloom effect, I can use a custom approach with multiple render passes, but that's complex. Let me use a simpler approach with high emissive materials and bright lights to simulate the effect.\n\nActually, let me use the post-processing from Three.js examples. I'll need EffectComposer, RenderPass, UnrealBloomPass. But I need to load them as separate scripts.\n\nI can use these CDN links:\n- https://cdn.jsdelivr.net/npm/three@0.128.0/build/three.min.js\n- https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/postprocessing/EffectComposer.js\n- https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/postprocessing/RenderPass.js\n- https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/postprocessing/UnrealBloomPass.js\n- https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/shaders/LuminosityHighPassShader.js\n- https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/shaders/CopyShader.js\n- https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/postprocessing/ShaderPass.js\n\nThese should work with r128. Let me use them.\n\nLet me write the complete code now. I'll structure it carefully.\n\nFor the dance poses, I'll define each pose as a set of joint rotations. Then animate between them.\n\n```javascript\nconst poses = {\n topRock: {\n root: { rot: [0, 0.3, 0.1], pos: [0, 0, 0] },\n torso: { rot: [0.1, 0, 0.1] },\n neck: { rot: [0, 0.3, 0] },\n head: { rot: [0, 0, 0] },\n shoulderL: { rot: [0, 0, 0.5] },\n armL_upper: { rot: [0, 0, -0.5] },\n armL_lower: { rot: [0, 0, -1.2] },\n handL: { rot: [0, 0, 0] },\n shoulderR: { rot: [0, 0, -0.5] },\n armR_upper: { rot: [-0.3, 0, 1.5] },\n armR_lower: { rot: [0, 0, -0.3] },\n handR: { rot: [0, 0, 0] },\n hipL: { rot: [0, 0, 0] },\n thighL: { rot: [-0.2, 0, 0] },\n calfL: { rot: [0.2, 0, 0] },\n footL: { rot: [0, 0, 0] },\n hipR: { rot: [0, 0, 0] },\n thighR: { rot: [0.3, 0, 0] },\n calfR: { rot: [-0.1, 0, 0] },\n footR: { rot: [0, 0, 0] }\n },\n // ... more poses\n};\n```\n\nActually, let me use a different approach. I'll use simpler methods and focus on making it look impressive.\n\nLet me start coding:\n\n```javascript\n// Initialize scene\nconst scene = new THREE.Scene();\nscene.background = new THREE.Color(0x0a0a1a);\nscene.fog = new THREE.FogExp2(0x0a0a1a, 0.02);\n\nconst camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);\ncamera.position.set(4, 2.5, 6);\ncamera.lookAt(0, 1, 0);\n\nconst renderer = new THREE.WebGLRenderer({ antialias: true });\nrenderer.setPixelRatio(window.devicePixelRatio);\nrenderer.setSize(window.innerWidth, window.innerHeight);\nrenderer.shadowMap.enabled = true;\nrenderer.shadowMap.type = THREE.PCFSoftShadowMap;\nrenderer.toneMapping = THREE.ACESFilmicToneMapping;\nrenderer.toneMappingExposure = 1.0;\nrenderer.outputEncoding = THREE.sRGBEncoding;\ndocument.body.appendChild(renderer.domElement);\n\n// Lights\nconst ambient = new THREE.AmbientLight(0x404060, 0.3);\nscene.add(ambient);\n\nconst mainLight = new THREE.SpotLight(0xffffff, 2, 30, Math.PI/6, 0.5, 1);\nmainLight.position.set(0, 10, 3);\nmainLight.target.position.set(0, 0, 0);\nmainLight.castShadow = true;\nmainLight.shadow.mapSize.set(2048, 2048);\nscene.add(mainLight);\nscene.add(mainLight.target);\n\nconst purpleLight = new THREE.PointLight(0x8800ff, 1.5, 15);\npurpleLight.position.set(-3, 2, 2);\nscene.add(purpleLight);\n\nconst pinkLight = new THREE.PointLight(0xff0066, 1.5, 15);\npinkLight.position.set(3, 1, -1);\nscene.add(pinkLight);\n\n// ... etc\n```\n\nOK let me just write the whole thing. I'll be comprehensive.\n\nFor the character, I want it to look like a real person. Let me use:\n- Capsule for torso\n- Sphere for head\n- Capsule for limbs\n- Detailed with materials that look like skin and clothes\n\nLet me think about the urban setting:\n- Concrete ground with painted lines (like a basketball court or street)\n- Brick walls in background\n- Neon signs\n- Speakers\n- Graffiti\n\nActually, to keep it manageable, let me focus on:\n- A stage/circle area\n- Speakers on sides\n- City skyline silhouette\n- Spotlight from above\n- Floor with reflective material\n\nFor the dance animation, I'll use a sequence of poses and tween between them. Let me also add some camera movement.\n\nOK let me code it all up now:\n\n```javascript\n// Build character\nconst character = new THREE.Group();\nscene.add(character);\n\nconst skinMat = new THREE.MeshStandardMaterial({\n color: 0xa87b5a, \n roughness: 0.7, \n metalness: 0.1\n});\nconst shirtMat = new THREE.MeshStandardMaterial({\n color: 0x222244, \n roughness: 0.8, \n metalness: 0.2\n});\nconst pantsMat = new THREE.MeshStandardMaterial({\n color: 0x111111, \n roughness: 0.9, \n metalness: 0.1\n});\nconst shoeMat = new THREE.MeshStandardMaterial({\n color: 0xeeeeee, \n roughness: 0.4, \n metalness: 0.3\n});\n\n// Hip pivot\nconst hip = new THREE.Group();\nhip.position.y = 0.9;\ncharacter.add(hip);\n\n// Torso\nconst torsoGroup = new THREE.Group();\nhip.add(torsoGroup);\nconst torsoGeo = new THREE.CylinderGeometry(0.25, 0.22, 0.7, 12);\nconst torso = new THREE.Mesh(torsoGeo, shirtMat);\ntorso.position.y = 0.35;\ntorso.castShadow = true;\ntorsoGroup.add(torso);\n\n// Neck\nconst neck = new THREE.Group();\nneck.position.y = 0.7;\ntorsoGroup.add(neck);\nconst neckGeo = new THREE.CylinderGeometry(0.08, 0.1, 0.12, 8);\nconst neckMesh = new THREE.Mesh(neckGeo, skinMat);\nneckMesh.position.y = 0.06;\nneckMesh.castShadow = true;\nneck.add(neckMesh);\n\n// Head\nconst headGroup = new THREE.Group();\nheadGroup.position.y = 0.15;\nneck.add(headGroup);\nconst head = new THREE.Mesh(new THREE.SphereGeometry(0.16, 16, 16), skinMat);\nhead.castShadow = true;\nheadGroup.add(head);\n\n// Hair\nconst hair = new THREE.Mesh(\n new THREE.SphereGeometry(0.17, 16, 16, 0, Math.PI*2, 0, Math.PI*0.6),\n new THREE.MeshStandardMaterial({color: 0x222222, roughness: 0.9})\n);\nhair.position.y = 0.02;\nheadGroup.add(hair);\n\n// ... etc for arms and legs\n```\n\nOK, this is getting long. Let me write the complete thing in one go and make it work well.\n\nLet me think about how to animate smoothly. I'll use a timeline with keyframes.\n\n```javascript\nconst danceSequence = [\n { pose: 'topRock', duration: 1.0 },\n { pose: 'sixStep', duration: 0.8 },\n { pose: 'babyFreeze', duration: 1.2 },\n { pose: 'flarePose', duration: 0.8 },\n { pose: 'standingPose', duration: 1.0 },\n { pose: 'topRock', duration: 1.0 }\n];\n```\n\nI'll lerp between poses.\n\nLet me also add:\n- Camera shake/sway\n- Pulsing lights\n- Particle effects\n- Maybe a turntable effect\n\nOK let me write the full code now. I'll be detailed.\n\n```html\n\n\n\n\nHip-Hop Dance\n\n\n\n

BREAKDANCE

POWER MOVES

\n\n\n\n\n\n\n\n\n\n\n```\n\nNow let me write the JavaScript. I'll make it really good.\n\n```javascript\n(function() {\n // Setup\n const scene = new THREE.Scene();\n scene.background = new THREE.Color(0x05050a);\n scene.fog = new THREE.FogExp2(0x05050a, 0.04);\n \n const camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 0.1, 200);\n camera.position.set(5, 2, 6);\n \n const renderer = new THREE.WebGLRenderer({ antialias: true });\n renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));\n renderer.setSize(window.innerWidth, window.innerHeight);\n renderer.shadowMap.enabled = true;\n renderer.shadowMap.type = THREE.PCFSoftShadowMap;\n renderer.toneMapping = THREE.ACESFilmicToneMapping;\n renderer.toneMappingExposure = 1.0;\n renderer.outputEncoding = THREE.sRGBEncoding;\n document.body.appendChild(renderer.domElement);\n \n // Post-processing\n const composer = new THREE.EffectComposer(renderer);\n composer.addPass(new THREE.RenderPass(scene, camera));\n const bloomPass = new THREE.UnrealBloomPass(\n new THREE.Vector2(window.innerWidth, window.innerHeight),\n 0.8, 0.4, 0.85\n );\n composer.addPass(bloomPass);\n \n // Resize\n window.addEventListener('resize', () => {\n camera.aspect = window.innerWidth / window.innerHeight;\n camera.updateProjectionMatrix();\n renderer.setSize(window.innerWidth, window.innerHeight);\n composer.setSize(window.innerWidth, window.innerHeight);\n });\n \n // ==== ENVIRONMENT ====\n \n // Floor (dance stage)\n const stageGeo = new THREE.CircleGeometry(4, 64);\n const stageMat = new THREE.MeshStandardMaterial({\n color: 0x1a1a1a,\n roughness: 0.3,\n metalness: 0.8\n });\n const stage = new THREE.Mesh(stageGeo, stageMat);\n stage.rotation.x = -Math.PI / 2;\n stage.receiveShadow = true;\n scene.add(stage);\n \n // Outer floor\n const outerGeo = new THREE.PlaneGeometry(100, 100);\n const outerMat = new THREE.MeshStandardMaterial({\n color: 0x0a0a0a,\n roughness: 0.9,\n metalness: 0.1\n });\n const outerFloor = new THREE.Mesh(outerGeo, outerMat);\n outerFloor.rotation.x = -Math.PI / 2;\n outerFloor.position.y = -0.01;\n outerFloor.receiveShadow = true;\n scene.add(outerFloor);\n \n // City skyline (background buildings)\n function createBuilding(x, z, w, h, d, color) {\n const geo = new THREE.BoxGeometry(w, h, d);\n const mat = new THREE.MeshStandardMaterial({\n color: color,\n roughness: 0.7,\n metalness: 0.3,\n emissive: new THREE.Color(color).multiplyScalar(0.1)\n });\n const building = new THREE.Mesh(geo, mat);\n building.position.set(x, h/2, z);\n building.castShadow = true;\n building.receiveShadow = true;\n scene.add(building);\n \n // Windows\n const windowGeo = new THREE.PlaneGeometry(w * 0.8, h * 0.7);\n const canvas = document.createElement('canvas');\n canvas.width = 128; canvas.height = 256;\n const ctx = canvas.getContext('2d');\n ctx.fillStyle = '#000';\n ctx.fillRect(0, 0, 128, 256);\n for (let y = 0; y < 8; y++) {\n for (let x = 0; x < 4; x++) {\n if (Math.random() > 0.3) {\n const brightness = Math.random() * 0.5 + 0.3;\n const hue = Math.random() > 0.5 ? 50 : 200;\n ctx.fillStyle = `hsl(${hue}, 80%, ${brightness * 100}%)`;\n ctx.fillRect(x * 32 + 4, y * 32 + 4, 24, 24);\n }\n }\n }\n const windowTex = new THREE.CanvasTexture(canvas);\n const windowMat = new THREE.MeshBasicMaterial({ map: windowTex });\n const windows = new THREE.Mesh(windowGeo, windowMat);\n windows.position.set(x, h/2, z - d/2 - 0.01);\n scene.add(windows);\n return building;\n }\n \n // Ring of buildings\n for (let i = 0; i < 20; i++) {\n const angle = (i / 20) * Math.PI * 2;\n const r = 30 + Math.random() * 10;\n const x = Math.cos(angle) * r;\n const z = Math.sin(angle) * r;\n const h = 5 + Math.random() * 15;\n const w = 2 + Math.random() * 3;\n const d = 2 + Math.random() * 3;\n const color = new THREE.Color().setHSL(0, 0, 0.05 + Math.random() * 0.1);\n createBuilding(x, z, w, h, d, color);\n }\n \n // Speakers\n function createSpeaker(x, z) {\n const group = new THREE.Group();\n const box = new THREE.Mesh(\n new THREE.BoxGeometry(0.8, 1.2, 0.7),\n new THREE.MeshStandardMaterial({color: 0x111111, roughness: 0.5, metalness: 0.5})\n );\n box.position.y = 0.6;\n box.castShadow = true;\n group.add(box);\n \n // Speaker cone\n const cone = new THREE.Mesh(\n new THREE.CircleGeometry(0.25, 32),\n new THREE.MeshStandardMaterial({color: 0x222222, roughness: 0.6})\n );\n cone.position.set(0, 0.5, 0.36);\n group.add(cone);\n const cone2 = new THREE.Mesh(\n new THREE.CircleGeometry(0.15, 32),\n new THREE.MeshStandardMaterial({color: 0x111111, roughness: 0.5})\n );\n cone2.position.set(0, 0.9, 0.36);\n group.add(cone2);\n \n group.position.set(x, 0, z);\n scene.add(group);\n return group;\n }\n \n const speakerL = createSpeaker(-3.5, 0);\n const speakerR = createSpeaker(3.5, 0);\n \n // ==== LIGHTS ====\n \n const ambient = new THREE.AmbientLight(0x202040, 0.3);\n scene.add(ambient);\n \n // Main spotlight\n const spot = new THREE.SpotLight(0xffffff, 3, 20, Math.PI/5, 0.3, 1);\n spot.position.set(0, 8, 2);\n spot.target.position.set(0, 0, 0);\n spot.castShadow = true;\n spot.shadow.mapSize.set(2048, 2048);\n spot.shadow.camera.near = 1;\n spot.shadow.camera.far = 20;\n spot.shadow.bias = -0.001;\n scene.add(spot);\n scene.add(spot.target);\n \n // Colored lights\n const purpleLight = new THREE.PointLight(0x8800ff, 2, 10);\n purpleLight.position.set(-3, 1, 1);\n scene.add(purpleLight);\n \n const cyanLight = new THREE.PointLight(0x00ffff, 2, 10);\n cyanLight.position.set(3, 1, 1);\n scene.add(cyanLight);\n \n const pinkLight = new THREE.PointLight(0xff0066, 1.5, 8);\n pinkLight.position.set(0, 0.5, -2);\n scene.add(pinkLight);\n \n // ==== CHARACTER ====\n \n // Materials\n const skinMat = new THREE.MeshStandardMaterial({color: 0xa87b5a, roughness: 0.6, metalness: 0.1});\n const shirtMat = new THREE.MeshStandardMaterial({color: 0xee2244, roughness: 0.8, metalness: 0.1});\n const pantsMat = new THREE.MeshStandardMaterial({color: 0x111111, roughness: 0.9, metalness: 0.1});\n const shoeMat = new THREE.MeshStandardMaterial({color: 0xffffff, roughness: 0.4, metalness: 0.3});\n const hairMat = new THREE.MeshStandardMaterial({color: 0x111111, roughness: 0.9});\n const capMat = new THREE.MeshStandardMaterial({color: 0x222222, roughness: 0.8});\n \n // Character group\n const dancer = new THREE.Group();\n scene.add(dancer);\n \n // Hip\n const hip = new THREE.Group();\n hip.position.y = 0.0; // We can offset\n dancer.add(hip);\n \n // Torso\n const torso = new THREE.Group();\n hip.add(torso);\n \n // Torso mesh\n const torsoMesh = new THREE.Mesh(\n new THREE.CylinderGeometry(0.22, 0.18, 0.7, 12),\n shirtMat\n );\n torsoMesh.position.y = 0.35;\n torsoMesh.castShadow = true;\n torso.add(torsoMesh);\n \n // Neck\n const neck = new THREE.Group();\n neck.position.y = 0.7;\n torso.add(neck);\n \n const neckMesh = new THREE.Mesh(\n new THREE.CylinderGeometry(0.06, 0.08, 0.1, 8),\n skinMat\n );\n neckMesh.position.y = 0.05;\n neckMesh.castShadow = true;\n neck.add(neckMesh);\n \n // Head\n const head = new THREE.Group();\n head.position.y = 0.15;\n neck.add(head);\n \n const headMesh = new THREE.Mesh(\n new THREE.SphereGeometry(0.15, 16, 16),\n skinMat\n );\n headMesh.castShadow = true;\n head.add(headMesh);\n \n // Cap\n const cap = new THREE.Mesh(\n new THREE.SphereGeometry(0.16, 16, 16, 0, Math.PI*2, 0, Math.PI*0.55),\n capMat\n );\n cap.position.y = 0.04;\n cap.castShadow = true;\n head.add(cap);\n \n // Cap brim\n const brim = new THREE.Mesh(\n new THREE.CylinderGeometry(0.18, 0.18, 0.02, 16, 1, false, 0, Math.PI),\n capMat\n );\n brim.rotation.x = -Math.PI/2;\n brim.rotation.z = -Math.PI/2;\n brim.position.set(0, 0.05, 0.15);\n head.add(brim);\n \n // Arms - L\n const shoulderL = new THREE.Group();\n shoulderL.position.set(-0.25, 0.55, 0);\n torso.add(shoulderL);\n \n const upperArmL = new THREE.Group();\n shoulderL.add(upperArmL);\n \n const upperArmLMesh = new THREE.Mesh(\n new THREE.CylinderGeometry(0.06, 0.07, 0.32, 8),\n shirtMat\n );\n upperArmLMesh.position.y = -0.16;\n upperArmLMesh.castShadow = true;\n upperArmL.add(upperArmLMesh);\n \n const elbowL = new THREE.Group();\n elbowL.position.y = -0.32;\n upperArmL.add(elbowL);\n \n const forearmL = new THREE.Group();\n elbowL.add(forearmL);\n \n const forearmLMesh = new THREE.Mesh(\n new THREE.CylinderGeometry(0.05, 0.06, 0.3, 8),\n skinMat\n );\n forearmLMesh.position.y = -0.15;\n forearmLMesh.castShadow = true;\n forearmL.add(forearmLMesh);\n \n const handL = new THREE.Group();\n handL.position.y = -0.3;\n forearmL.add(handL);\n \n const handLMesh = new THREE.Mesh(\n new THREE.SphereGeometry(0.07, 8, 8),\n skinMat\n );\n handLMesh.castShadow = true;\n handL.add(handLMesh);\n \n // Arms - R (mirror)\n const shoulderR = new THREE.Group();\n shoulderR.position.set(0.25, 0.55, 0);\n torso.add(shoulderR);\n \n const upperArmR = new THREE.Group();\n shoulderR.add(upperArmR);\n \n const upperArmRMesh = new THREE.Mesh(\n new THREE.CylinderGeometry(0.06, 0.07, 0.32, 8),\n shirtMat\n );\n upperArmRMesh.position.y = -0.16;\n upperArmRMesh.castShadow = true;\n upperArmR.add(upperArmRMesh);\n \n const elbowR = new THREE.Group();\n elbowR.position.y = -0.32;\n upperArmR.add(elbowR);\n \n const forearmR = new THREE.Group();\n elbowR.add(forearmR);\n \n const forearmRMesh = new THREE.Mesh(\n new THREE.CylinderGeometry(0.05, 0.06, 0.3, 8),\n skinMat\n );\n forearmRMesh.position.y = -0.15;\n forearmRMesh.castShadow = true;\n forearmR.add(forearmRMesh);\n \n const handR = new THREE.Group();\n handR.position.y = -0.3;\n forearmR.add(handR);\n \n const handRMesh = new THREE.Mesh(\n new THREE.SphereGeometry(0.07, 8, 8),\n skinMat\n );\n handRMesh.castShadow = true;\n handR.add(handRMesh);\n \n // Legs - L\n const hipJointL = new THREE.Group();\n hipJointL.position.set(-0.12, 0, 0);\n hip.add(hipJointL);\n \n const thighL = new THREE.Group();\n hipJointL.add(thighL);\n \n const thighLMesh = new THREE.Mesh(\n new THREE.CylinderGeometry(0.09, 0.08, 0.4, 8),\n pantsMat\n );\n thighLMesh.position.y = -0.2;\n thighLMesh.castShadow = true;\n thighL.add(thighLMesh);\n \n const kneeL = new THREE.Group();\n kneeL.position.y = -0.4;\n thighL.add(kneeL);\n \n const calfL = new THREE.Group();\n kneeL.add(calfL);\n \n const calfLMesh = new THREE.Mesh(\n new THREE.CylinderGeometry(0.07, 0.08, 0.4, 8),\n pantsMat\n );\n calfLMesh.position.y = -0.2;\n calfLMesh.castShadow = true;\n calfL.add(calfLMesh);\n \n const ankleL = new THREE.Group();\n ankleL.position.y = -0.4;\n calfL.add(ankleL);\n \n const footL = new THREE.Group();\n ankleL.add(footL);\n \n const footLMesh = new THREE.Mesh(\n new THREE.BoxGeometry(0.1, 0.06, 0.22),\n shoeMat\n );\n footLMesh.position.set(0, -0.03, 0.08);\n footLMesh.castShadow = true;\n footL.add(footLMesh);\n \n // Legs - R\n const hipJointR = new THREE.Group();\n hipJointR.position.set(0.12, 0, 0);\n hip.add(hipJointR);\n \n const thighR = new THREE.Group();\n hipJointR.add(thighR);\n \n const thighRMesh = new THREE.Mesh(\n new THREE.CylinderGeometry(0.09, 0.08, 0.4, 8),\n pantsMat\n );\n thighRMesh.position.y = -0.2;\n thighRMesh.castShadow = true;\n thighR.add(thighRMesh);\n \n const kneeR = new THREE.Group();\n kneeR.position.y = -0.4;\n thighR.add(kneeR);\n \n const calfR = new THREE.Group();\n kneeR.add(calfR);\n \n const calfRMesh = new THREE.Mesh(\n new THREE.CylinderGeometry(0.07, 0.08, 0.4, 8),\n pantsMat\n );\n calfRMesh.position.y = -0.2;\n calfRMesh.castShadow = true;\n calfR.add(calfRMesh);\n \n const ankleR = new THREE.Group();\n ankleR.position.y = -0.4;\n calfR.add(ankleR);\n \n const footR = new THREE.Group();\n ankleR.add(footR);\n \n const footRMesh = new THREE.Mesh(\n new THREE.BoxGeometry(0.1, 0.06, 0.22),\n shoeMat\n );\n footRMesh.position.set(0, -0.03, 0.08);\n footRMesh.castShadow = true;\n footR.add(footRMesh);\n \n // ==== POSES ====\n // Each pose is a function that sets rotation values\n // rotX, rotY, rotZ for each joint\n \n const defaultPose = {\n hip: [0, 0, 0],\n hipPos: [0, 0, 0],\n torso: [0, 0, 0],\n neck: [0, 0, 0],\n head: [0, 0, 0],\n shoulderL: [0, 0, 0],\n upperArmL: [0, 0, 0],\n elbowL: [0, 0, 0],\n forearmL: [0, 0, 0],\n shoulderR: [0, 0, 0],\n upperArmR: [0, 0, 0],\n elbowR: [0, 0, 0],\n forearmR: [0, 0, 0],\n hipJointL: [0, 0, 0],\n thighL: [0, 0, 0],\n kneeL: [0, 0, 0],\n calfL: [0, 0, 0],\n ankleL: [0, 0, 0],\n hipJointR: [0, 0, 0],\n thighR: [0, 0, 0],\n kneeR: [0, 0, 0],\n calfR: [0, 0, 0],\n ankleR: [0, 0, 0]\n };\n \n function deepCopy(obj) { return JSON.parse(JSON.stringify(obj)); }\n \n // Pose 1: Top Rock - Stand with attitude\n function pose1() {\n const p = deepCopy(defaultPose);\n p.hipPos = [0, 0, 0];\n p.torso = [0.1, 0.3, -0.1];\n p.neck = [0, -0.2, 0];\n p.head = [0, 0.2, 0];\n p.shoulderL = [0, 0, 0.4];\n p.upperArmL = [-0.2, 0, -0.8];\n p.elbowL = [0, 0, -1.2];\n p.shoulderR = [0, 0, -0.5];\n p.upperArmR = [-0.5, 0, 1.2];\n p.elbowR = [0, 0, -0.5];\n p.hipJointL = [0, 0, 0.1];\n p.thighL = [-0.1, 0.1, 0];\n p.kneeL = [0.1, 0, 0];\n p.hipJointR = [0, 0, -0.1];\n p.thighR = [-0.2, -0.1, 0];\n p.kneeR = [0.1, 0, 0];\n return p;\n }\n \n // Pose 2: Six Step - low to ground\n function pose2() {\n const p = deepCopy(defaultPose);\n p.hipPos = [0, -0.3, 0];\n p.torso = [-0.3, 0, 0.2];\n p.neck = [0.2, 0, 0];\n p.head = [0, 0, 0];\n p.shoulderL = [0.5, 0, 0.3];\n p.upperArmL = [0, 0, -1.4];\n p.elbowL = [0, 0, -0.3];\n p.shoulderR = [0.3, 0, -0.3];\n p.upperArmR = [0.2, 0, -1.0];\n p.elbowR = [0, 0, -0.4];\n p.hipJointL = [-0.5, 0, 0];\n p.thighL = [0.6, 0, 0];\n p.kneeL = [-0.5, 0, 0];\n p.ankleL = [0.4, 0, 0];\n p.hipJointR = [-0.3, 0, 0];\n p.thighR = [0.4, 0, 0];\n p.kneeR = [-0.3, 0, 0];\n p.ankleR = [0.3, 0, 0];\n return p;\n }\n \n // Pose 3: Baby Freeze - one hand on ground\n function pose3() {\n const p = deepCopy(defaultPose);\n p.hipPos = [0, 0, 0];\n p.torso = [0, 0, 0.6];\n p.neck = [-0.2, 0, -0.3];\n p.head = [0, 0, 0];\n p.shoulderL = [0, 0, 1.5];\n p.upperArmL = [0, 0, -1.5];\n p.elbowL = [0, 0, 0];\n p.shoulderR = [0, 0, 0.2];\n p.upperArmR = [0, 0, -0.3];\n p.elbowR = [0, 0, -1.5];\n p.hipJointL = [0, 0, 0];\n p.thighL = [-0.8, 0, 0];\n p.kneeL = [0, 0, 0];\n p.ankleL = [0.3, 0, 0];\n p.hipJointR = [0, 0, 0];\n p.thighR = [-1.2, 0, 0.3];\n p.kneeR = [0, 0, 0];\n p.ankleR = [0.3, 0, 0];\n return p;\n }\n \n // Pose 4: Air Flare - body in air, legs in V\n function pose4() {\n const p = deepCopy(defaultPose);\n p.hipPos = [0, 0.3, 0];\n p.torso = [-0.3, 0, 0];\n p.neck = [0.2, 0, 0];\n p.head = [0, 0, 0];\n p.shoulderL = [0, 0, 0.3];\n p.upperArmL = [0.5, 0, -1.3];\n p.elbowL = [0, 0, -0.2];\n p.shoulderR = [0, 0, -0.3];\n p.upperArmR = [0.5, 0, 1.3];\n p.elbowR = [0, 0, 0.2];\n p.hipJointL = [0, 0, 0.1];\n p.thighL = [0.5, 0.3, 0];\n p.kneeL = [-0.4, 0, 0];\n p.hipJointR = [0, 0, -0.1];\n p.thighR = [0.5, -0.3, 0];\n p.kneeR = [-0.4, 0, 0];\n return p;\n }\n \n // Pose 5: Windmill-like - horizontal spin pose\n function pose5() {\n const p = deepCopy(defaultPose);\n p.hipPos = [0, 0, 0];\n p.hip = [Math.PI/2, 0, 0]; // Body on side\n p.torso = [0, 0, 0];\n p.neck = [0, 0, 0];\n p.head = [0, 0, 0];\n p.shoulderL = [0, 0, 1.4];\n p.upperArmL = [0, 0, -1.4];\n p.elbowL = [0, 0, 0];\n p.shoulderR = [0, 0, 0.3];\n p.upperArmR = [0, 0, -0.5];\n p.elbowR = [0, 0, -1.2];\n p.hipJointL = [0, 0, 0.3];\n p.thighL = [0.3, 0, 0];\n p.kneeL = [-0.4, 0, 0];\n p.hipJointR = [0, 0, -0.3];\n p.thighR = [0.5, 0, 0];\n p.kneeR = [-0.6, 0, 0];\n return p;\n }\n \n // Pose 6: Handstand / Pose\n function pose6() {\n const p = deepCopy(defaultPose);\n p.hipPos = [0, 0.5, 0];\n p.hip = [-1.4, 0, 0]; // Body upside down\n p.torso = [0, 0, 0];\n p.neck = [0.3, 0, 0];\n p.head = [0, 0, 0];\n p.shoulderL = [0, 0, 0.3];\n p.upperArmL = [0, 0, 1.2];\n p.elbowL = [0, 0, -0.2];\n p.shoulderR = [0, 0, -0.3];\n p.upperArmR = [0, 0, -1.2];\n p.elbowR = [0, 0, 0.2];\n p.hipJointL = [0, 0, 0.2];\n p.thighL = [0.3, 0, 0];\n p.kneeL = [-0.3, 0, 0];\n p.hipJointR = [0, 0, -0.2];\n p.thighR = [0.5, 0, 0];\n p.kneeR = [-0.5, 0, 0];\n return p;\n }\n \n // ==== ANIMATION ====\n const allPoses = [pose1(), pose2(), pose3(), pose4(), pose5(), pose6()];\n \n // Order: top rock -> six step -> baby freeze -> air flare -> handstand -> back to top rock\n const sequence = [\n {pose: allPoses[0], duration: 1.2, label: 'TOP ROCK'},\n {pose: allPoses[1], duration: 0.8, label: 'SIX STEP'},\n {pose: allPoses[2], duration: 1.0, label: 'BABY FREEZE'},\n {pose: allPoses[3], duration: 0.6, label: 'AIR FLARE'},\n {pose: allPoses[4], duration: 0.8, label: 'WINDMILL'},\n {pose: allPoses[5], duration: 0.8, label: 'HANDSTAND'},\n {pose: allPoses[0], duration: 1.0, label: 'TOP ROCK'}\n ];\n \n let currentIndex = 0;\n let timeInCurrent = 0;\n let lastPose = allPoses[allPoses.length - 1];\n let nextPose = sequence[0].pose;\n \n // Apply pose\n function applyPose(pose, t) {\n // Hip position\n hip.position.x += (pose.hipPos[0] - hip.position.x) * t;\n hip.position.y += (pose.hipPos[1] - hip.position.y) * t;\n hip.position.z += (pose.hipPos[2] - hip.position.z) * t;\n \n // Hip rotation\n hip.rotation.x = THREE.MathUtils.lerp(hip.rotation.x, pose.hip[0], t);\n hip.rotation.y = THREE.MathUtils.lerp(hip.rotation.y, pose.hip[1], t);\n hip.rotation.z = THREE.MathUtils.lerp(hip.rotation.z, pose.hip[2], t);\n \n // Torso\n torso.rotation.x = THREE.MathUtils.lerp(torso.rotation.x, pose.torso[0], t);\n torso.rotation.y = THREE.MathUtils.lerp(torso.rotation.y, pose.torso[1], t);\n torso.rotation.z = THREE.MathUtils.lerp(torso.rotation.z, pose.torso[2], t);\n \n // Neck\n neck.rotation.x = THREE.MathUtils.lerp(neck.rotation.x, pose.neck[0], t);\n neck.rotation.y = THREE.MathUtils.lerp(neck.rotation.y, pose.neck[1], t);\n neck.rotation.z = THREE.MathUtils.lerp(neck.rotation.z, pose.neck[2], t);\n \n // Head\n head.rotation.x = THREE.MathUtils.lerp(head.rotation.x, pose.head[0], t);\n head.rotation.y = THREE.MathUtils.lerp(head.rotation.y, pose.head[1], t);\n head.rotation.z = THREE.MathUtils.lerp(head.rotation.z, pose.head[2], t);\n \n // L Arm\n shoulderL.rotation.x = THREE.MathUtils.lerp(shoulderL.rotation.x, pose.shoulderL[0], t);\n shoulderL.rotation.y = THREE.MathUtils.lerp(shoulderL.rotation.y, pose.shoulderL[1], t);\n shoulderL.rotation.z = THREE.MathUtils.lerp(shoulderL.rotation.z, pose.shoulderL[2], t);\n upperArmL.rotation.x = THREE.MathUtils.lerp(upperArmL.rotation.x, pose.upperArmL[0], t);\n upperArmL.rotation.y = THREE.MathUtils.lerp(upperArmL.rotation.y, pose.upperArmL[1], t);\n upperArmL.rotation.z = THREE.MathUtils.lerp(upperArmL.rotation.z, pose.upperArmL[2], t);\n elbowL.rotation.x = THREE.MathUtils.lerp(elbowL.rotation.x, pose.elbowL[0], t);\n elbowL.rotation.y = THREE.MathUtils.lerp(elbowL.rotation.y, pose.elbowL[1], t);\n elbowL.rotation.z = THREE.MathUtils.lerp(elbowL.rotation.z, pose.elbowL[2], t);\n forearmL.rotation.x = THREE.MathUtils.lerp(forearmL.rotation.x, pose.forearmL[0], t);\n forearmL.rotation.y = THREE.MathUtils.lerp(forearmL.rotation.y, pose.forearmL[1], t);\n forearmL.rotation.z = THREE.MathUtils.lerp(forearmL.rotation.z, pose.forearmL[2], t);\n \n // R Arm\n shoulderR.rotation.x = THREE.MathUtils.lerp(shoulderR.rotation.x, pose.shoulderR[0], t);\n shoulderR.rotation.y = THREE.MathUtils.lerp(shoulderR.rotation.y, pose.shoulderR[1], t);\n shoulderR.rotation.z = THREE.MathUtils.lerp(shoulderR.rotation.z, pose.shoulderR[2], t);\n upperArmR.rotation.x = THREE.MathUtils.lerp(upperArmR.rotation.x, pose.upperArmR[0], t);\n upperArmR.rotation.y = THREE.MathUtils.lerp(upperArmR.rotation.y, pose.upperArmR[1], t);\n upperArmR.rotation.z = THREE.MathUtils.lerp(upperArmR.rotation.z, pose.upperArmR[2], t);\n elbowR.rotation.x = THREE.MathUtils.lerp(elbowR.rotation.x, pose.elbowR[0], t);\n elbowR.rotation.y = THREE.MathUtils.lerp(elbowR.rotation.y, pose.elbowR[1], t);\n elbowR.rotation.z = THREE.MathUtils.lerp(elbowR.rotation.z, pose.elbowR[2], t);\n forearmR.rotation.x = THREE.MathUtils.lerp(forearmR.rotation.x, pose.forearmR[0], t);\n forearmR.rotation.y = THREE.MathUtils.lerp(forearmR.rotation.y, pose.forearmR[1], t);\n forearmR.rotation.z = THREE.MathUtils.lerp(forearmR.rotation.z, pose.forearmR[2], t);\n \n // L Leg\n hipJointL.rotation.x = THREE.MathUtils.lerp(hipJointL.rotation.x, pose.hipJointL[0], t);\n hipJointL.rotation.y = THREE.MathUtils.lerp(hipJointL.rotation.y, pose.hipJointL[1], t);\n hipJointL.rotation.z = THREE.MathUtils.lerp(hipJointL.rotation.z, pose.hipJointL[2], t);\n thighL.rotation.x = THREE.MathUtils.lerp(thighL.rotation.x, pose.thighL[0], t);\n thighL.rotation.y = THREE.MathUtils.lerp(thighL.rotation.y, pose.thighL[1], t);\n thighL.rotation.z = THREE.MathUtils.lerp(thighL.rotation.z, pose.thighL[2], t);\n kneeL.rotation.x = THREE.MathUtils.lerp(kneeL.rotation.x, pose.kneeL[0], t);\n kneeL.rotation.y = THREE.MathUtils.lerp(kneeL.rotation.y, pose.kneeL[1], t);\n kneeL.rotation.z = THREE.MathUtils.lerp(kneeL.rotation.z, pose.kneeL[2], t);\n ankleL.rotation.x = THREE.MathUtils.lerp(ankleL.rotation.x, pose.ankleL[0], t);\n ankleL.rotation.y = THREE.MathUtils.lerp(ankleL.rotation.y, pose.ankleL[1], t);\n ankleL.rotation.z = THREE.MathUtils.lerp(ankleL.rotation.z, pose.ankleL[2], t);\n \n // R Leg\n hipJointR.rotation.x = THREE.MathUtils.lerp(hipJointR.rotation.x, pose.hipJointR[0], t);\n hipJointR.rotation.y = THREE.MathUtils.lerp(hipJointR.rotation.y, pose.hipJointR[1], t);\n hipJointR.rotation.z = THREE.MathUtils.lerp(hipJointR.rotation.z, pose.hipJointR[2], t);\n thighR.rotation.x = THREE.MathUtils.lerp(thighR.rotation.x, pose.thighR[0], t);\n thighR.rotation.y = THREE.MathUtils.lerp(thighR.rotation.y, pose.thighR[1], t);\n thighR.rotation.z = THREE.MathUtils.lerp(thighR.rotation.z, pose.thighR[2], t);\n kneeR.rotation.x = THREE.MathUtils.lerp(kneeR.rotation.x, pose.kneeR[0], t);\n kneeR.rotation.y = THREE.MathUtils.lerp(kneeR.rotation.y, pose.kneeR[1], t);\n kneeR.rotation.z = THREE.MathUtils.lerp(kneeR.rotation.z, pose.kneeR[2], t);\n ankleR.rotation.x = THREE.MathUtils.lerp(ankleR.rotation.x, pose.ankleR[0], t);\n ankleR.rotation.y = THREE.MathUtils.lerp(ankleR.rotation.y, pose.ankleR[1], t);\n ankleR.rotation.z = THREE.MathUtils.lerp(ankleR.rotation.z, pose.ankleR[2], t);\n }\n \n // ==== PARTICLES ====\n const particleCount = 200;\n const particleGeo = new THREE.BufferGeometry();\n const positions = new Float32Array(particleCount * 3);\n const velocities = [];\n for (let i = 0; i < particleCount; i++) {\n positions[i*3] = (Math.random() - 0.5) * 10;\n positions[i*3+1] = Math.random() * 5;\n positions[i*3+2] = (Math.random() - 0.5) * 10;\n velocities.push({\n x: (Math.random() - 0.5) * 0.01,\n y: -0.005 - Math.random() * 0.01,\n z: (Math.random() - 0.5) * 0.01\n });\n }\n particleGeo.setAttribute('position', new THREE.BufferAttribute(positions, 3));\n const particleMat = new THREE.PointsMaterial({\n color: 0xffaa00,\n size: 0.05,\n transparent: true,\n opacity: 0.7,\n blending: THREE.AdditiveBlending\n });\n const particles = new THREE.Points(particleGeo, particleMat);\n scene.add(particles);\n \n // ==== ANIMATE ====\n const clock = new THREE.Clock();\n let labelEl = document.getElementById('title');\n let labelIdx = 0;\n \n function animate() {\n requestAnimationFrame(animate);\n const delta = clock.getDelta();\n const time = clock.getElapsedTime();\n \n // Animate dance\n timeInCurrent += delta;\n const current = sequence[currentIndex];\n if (timeInCurrent >= current.duration) {\n timeInCurrent = 0;\n lastPose = current.pose;\n currentIndex = (currentIndex + 1) % sequence.length;\n labelIdx = currentIndex;\n if (labelEl) labelEl.textContent = sequence[labelIdx].label;\n }\n const next = sequence[currentIndex];\n \n const t = Math.min(timeInCurrent / 0.3, 1.0); // transition time\n const easedT = t * t * (3 - 2*t); // smoothstep\n \n // Lerp from last to current\n // We need to do this for all joints\n lerpPoses(lastPose, next.pose, easedT);\n \n // Add some idle animation\n const idle = Math.sin(time * 2) * 0.02;\n torso.rotation.z += idle;\n \n // Animate lights\n purpleLight.intensity = 1.5 + Math.sin(time * 3) * 0.5;\n cyanLight.intensity = 1.5 + Math.sin(time * 3 + Math.PI) * 0.5;\n pinkLight.intensity = 1.0 + Math.sin(time * 5) * 0.3;\n \n // Move lights\n const orbitR = 4;\n purpleLight.position.x = Math.cos(time * 0.5) * orbitR;\n purpleLight.position.z = Math.sin(time * 0.5) * orbitR;\n cyanLight.position.x = Math.cos(time * 0.5 + Math.PI) * orbitR;\n cyanLight.position.z = Math.sin(time * 0.5 + Math.PI) * orbitR;\n \n // Animate particles\n const pos = particleGeo.attributes.position.array;\n for (let i = 0; i < particleCount; i++) {\n pos[i*3] += velocities[i].x;\n pos[i*3+1] += velocities[i].y;\n pos[i*3+2] += velocities[i].z;\n if (pos[i*3+1] < 0) {\n pos[i*3+1] = 5;\n pos[i*3] = (Math.random() - 0.5) * 10;\n pos[i*3+2] = (Math.random() - 0.5) * 10;\n }\n }\n particleGeo.attributes.position.needsUpdate = true;\n \n // Camera sway\n const camR = 7;\n camera.position.x = Math.cos(time * 0.3) * camR;\n camera.position.z = Math.sin(time * 0.3) * camR;\n camera.position.y = 2 + Math.sin(time * 0.5) * 0.5;\n camera.lookAt(0, 0.8, 0);\n \n // Rotate dancer slightly\n dancer.rotation.y = Math.sin(time * 0.2) * 0.1;\n \n composer.render();\n }\n \n function lerpPoses(p1, p2, t) {\n hip.position.x = THREE.MathUtils.lerp(p1.hipPos[0], p2.hipPos[0], t);\n hip.position.y = THREE.MathUtils.lerp(p1.hipPos[1], p2.hipPos[1], t);\n hip.position.z = THREE.MathUtils.lerp(p1.hipPos[2], p2.hipPos[2], t);\n \n hip.rotation.x = THREE.MathUtils.lerp(p1.hip[0], p2.hip[0], t);\n hip.rotation.y = THREE.MathUtils.lerp(p1.hip[1], p2.hip[1], t);\n hip.rotation.z = THREE.MathUtils.lerp(p1.hip[2], p2.hip[2], t);\n \n torso.rotation.x = THREE.MathUtils.lerp(p1.torso[0], p2.torso[0], t);\n torso.rotation.y = THREE.MathUtils.lerp(p1.torso[1], p2.torso[1], t);\n torso.rotation.z = THREE.MathUtils.lerp(p1.torso[2], p2.torso[2], t);\n \n neck.rotation.x = THREE.MathUtils.lerp(p1.neck[0], p2.neck[0], t);\n neck.rotation.y = THREE.MathUtils.lerp(p1.neck[1], p2.neck[1], t);\n neck.rotation.z = THREE.MathUtils.lerp(p1.neck[2], p2.neck[2], t);\n \n head.rotation.x = THREE.MathUtils.lerp(p1.head[0], p2.head[0], t);\n head.rotation.y = THREE.MathUtils.lerp(p1.head[1], p2.head[1], t);\n head.rotation.z = THREE.MathUtils.lerp(p1.head[2], p2.head[2], t);\n \n // L Arm\n shoulderL.rotation.x = THREE.MathUtils.lerp(p1.shoulderL[0], p2.shoulderL[0], t);\n shoulderL.rotation.y = THREE.MathUtils.lerp(p1.shoulderL[1], p2.shoulderL[1], t);\n shoulderL.rotation.z = THREE.MathUtils.lerp(p1.shoulderL[2], p2.shoulderL[2], t);\n upperArmL.rotation.x = THREE.MathUtils.lerp(p1.upperArmL[0], p2.upperArmL[0], t);\n upperArmL.rotation.y = THREE.MathUtils.lerp(p1.upperArmL[1], p2.upperArmL[1], t);\n upperArmL.rotation.z = THREE.MathUtils.lerp(p1.upperArmL[2], p2.upperArmL[2], t);\n elbowL.rotation.x = THREE.MathUtils.lerp(p1.elbowL[0], p2.elbowL[0], t);\n elbowL.rotation.y = THREE.MathUtils.lerp(p1.elbowL[1], p2.elbowL[1], t);\n elbowL.rotation.z = THREE.MathUtils.lerp(p1.elbowL[2], p2.elbowL[2], t);\n forearmL.rotation.x = THREE.MathUtils.lerp(p1.forearmL[0], p2.forearmL[0], t);\n forearmL.rotation.y = THREE.MathUtils.lerp(p1.forearmL[1], p2.forearmL[1], t);\n forearmL.rotation.z = THREE.MathUtils.lerp(p1.forearmL[2], p2.forearmL[2], t);\n \n // R Arm\n shoulderR.rotation.x = THREE.MathUtils.lerp(p1.shoulderR[0], p2.shoulderR[0], t);\n shoulderR.rotation.y = THREE.MathUtils.lerp(p1.shoulderR[1], p2.shoulderR[1], t);\n shoulderR.rotation.z = THREE.MathUtils.lerp(p1.shoulderR[2], p2.shoulderR[2], t);\n upperArmR.rotation.x = THREE.MathUtils.lerp(p1.upperArmR[0], p2.upperArmR[0], t);\n upperArmR.rotation.y = THREE.MathUtils.lerp(p1.upperArmR[1], p2.upperArmR[1], t);\n upperArmR.rotation.z = THREE.MathUtils.lerp(p1.upperArmR[2], p2.upperArmR[2], t);\n elbowR.rotation.x = THREE.MathUtils.lerp(p1.elbowR[0], p2.elbowR[0], t);\n elbowR.rotation.y = THREE.MathUtils.lerp(p1.elbowR[1], p2.elbowR[1], t);\n elbowR.rotation.z = THREE.MathUtils.lerp(p1.elbowR[2], p2.elbowR[2], t);\n forearmR.rotation.x = THREE.MathUtils.lerp(p1.forearmR[0], p2.forearmR[0], t);\n forearmR.rotation.y = THREE.MathUtils.lerp(p1.forearmR[1], p2.forearmR[1], t);\n forearmR.rotation.z = THREE.MathUtils.lerp(p1.forearmR[2], p2.forearmR[2], t);\n \n // L Leg\n hipJointL.rotation.x = THREE.MathUtils.lerp(p1.hipJointL[0], p2.hipJointL[0], t);\n hipJointL.rotation.y = THREE.MathUtils.lerp(p1.hipJointL[1], p2.hipJointL[1], t);\n hipJointL.rotation.z = THREE.MathUtils.lerp(p1.hipJointL[2], p2.hipJointL[2], t);\n thighL.rotation.x = THREE.MathUtils.lerp(p1.thighL[0], p2.thighL[0], t);\n thighL.rotation.y = THREE.MathUtils.lerp(p1.thighL[1], p2.thighL[1], t);\n thighL.rotation.z = THREE.MathUtils.lerp(p1.thighL[2], p2.thighL[2], t);\n kneeL.rotation.x = THREE.MathUtils.lerp(p1.kneeL[0], p2.kneeL[0], t);\n kneeL.rotation.y = THREE.MathUtils.lerp(p1.kneeL[1], p2.kneeL[1], t);\n kneeL.rotation.z = THREE.MathUtils.lerp(p1.kneeL[2], p2.kneeL[2], t);\n ankleL.rotation.x = THREE.MathUtils.lerp(p1.ankleL[0], p2.ankleL[0], t);\n ankleL.rotation.y = THREE.MathUtils.lerp(p1.ankleL[1], p2.ankleL[1], t);\n ankleL.rotation.z = THREE.MathUtils.lerp(p1.ankleL[2], p2.ankleL[2], t);\n \n // R Leg\n hipJointR.rotation.x = THREE.MathUtils.lerp(p1.hipJointR[0], p2.hipJointR[0], t);\n hipJointR.rotation.y = THREE.MathUtils.lerp(p1.hipJointR[1], p2.hipJointR[1], t);\n hipJointR.rotation.z = THREE.MathUtils.lerp(p1.hipJointR[2], p2.hipJointR[2], t);\n thighR.rotation.x = THREE.MathUtils.lerp(p1.thighR[0], p2.thighR[0], t);\n thighR.rotation.y = THREE.MathUtils.lerp(p1.thighR[1], p2.thighR[1], t);\n thighR.rotation.z = THREE.MathUtils.lerp(p1.thighR[2], p2.thighR[2], t);\n kneeR.rotation.x = THREE.MathUtils.lerp(p1.kneeR[0], p2.kneeR[0], t);\n kneeR.rotation.y = THREE.MathUtils.lerp(p1.kneeR[1], p2.kneeR[1], t);\n kneeR.rotation.z = THREE.MathUtils.lerp(p1.kneeR[2], p2.kneeR[2], t);\n ankleR.rotation.x = THREE.MathUtils.lerp(p1.ankleR[0], p2.ankleR[0], t);\n ankleR.rotation.y = THREE.MathUtils.lerp(p1.ankleR[1], p2.ankleR[1], t);\n ankleR.rotation.z = THREE.MathUtils.lerp(p1.ankleR[2], p2.ankleR[2], t);\n }\n \n animate();\n})();\n```\n\nOK that's a lot of code. Let me clean it up and make sure it works. Let me also add some additional features:\n- Graffiti on floor\n- Some particle effects for impact\n- Maybe a sound visualization\n- Better transitions\n\nActually, I think the code is getting too long. Let me focus on making it work well with what I have. Let me review and consolidate.\n\nA few issues I see:\n1. The hip position is set in the pose, but I'm also using it in the dance animation. Need to be careful.\n2. Some poses might have rotations that look weird. Need to test.\n3. The windmill pose has hip rotated 90 degrees which might not work well with the other rotations.\n\nLet me also use Quaternion slerp for better rotation interpolation. Actually, lerp on small angle values works fine.\n\nLet me simplify and finalize. I'll also add:\n- Graffiti on the floor\n- Better camera angles\n- Color cycling lights\n\nLet me also consider performance - using shadows on all objects can be slow. I'll only enable shadows on the dancer.\n\nLet me also add some cool elements:\n- Floor disc with light patterns\n- A turntable that spins\n- A \"B-BOY\" sign in the background\n\nActually, I think the code is solid. Let me finalize and write it out.\n\nOne more thing - I should add a fallback in case the post-processing scripts don't load. Let me just have a try/catch around the composer setup.\n\nAlso, I need to make sure all the CDN URLs are correct. Let me double-check:\n- three.min.js: https://cdn.jsdelivr.net/npm/three@0.128.0/build/three.min.js ✓\n- EffectComposer: https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/postprocessing/EffectComposer.js ✓\n- RenderPass: https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/postprocessing/RenderPass.js ✓\n- UnrealBloomPass: https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/postprocessing/UnrealBloomPass.js ✓\n- LuminosityHighPassShader: https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/shaders/LuminosityHighPassShader.js ✓\n- CopyShader: https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/shaders/CopyShader.js ✓\n- ShaderPass: https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/postprocessing/ShaderPass.js ✓\n\nThese should all work with r128. Actually, I think the ShaderPass requires the CopyShader first. Let me make sure to load in correct order.\n\nOK let me write the final version. I'll be more careful and make sure everything works.\n\nFinal code structure:\n1. HTML head with styles\n2. Body with UI overlay\n3. Three.js scripts\n4. Main script with all the logic\n\nLet me write the final version now. I'll make some improvements:\n- Add a \"ground\" with grid pattern\n- Add a backdrop\n- Use proper materials\n- Make the character more detailed\n- Use slerp for rotations\n\nLet me also add a \"transform control\" UI to show what's happening.\n\nActually, let me just finalize and output it. The user wants a \"siêu thực\" (hyper-realistic) image, so I should make the lighting and materials look as good as possible. Let me also add reflections.\n\nFor reflections, I can use a CubeCamera or just use MeshPhysicalMaterial with reflectivity. Actually, the simplest way is to use a high metalness value on the stage.\n\nFor the dancer, let me also use better materials:\n- Skin: Subsurface scattering effect (fake with emissive)\n- Shirt: Fabric texture\n- Pants: Fabric texture\n- Shoes: Leather look\n\nLet me write the final code now. I'll keep it as concise as possible while still being impressive.\n\nWait, let me also think about the camera angle. The user wants to \"see\" the dance. A good camera angle would be:\n- Slightly above the dancer\n- At an angle (not directly in front)\n- Slowly orbiting\n\nI had this in my code already.\n\nLet me also add a beat indicator or something to show the rhythm.\n\nOK let me finalize. I'll output the complete HTML now.\n\nActually, I realize I should also handle the case where post-processing might not work. Let me add a fallback.\n\nAlso, I should add some more visual elements:\n- Confetti or sparks for emphasis\n- Light beams from speakers\n- Strobe effect\n\nLet me write the final code:\n\n```html\n\n\n\n\nHip-Hop B-Boy 3D\n\n\n\n

Hip-Hop Power

Break The Limits

3D Animation

\n\n\n\n\n\n\n\n\n\n\n\n\n```\n\nOK let me write the JavaScript now. I'll be careful to make it work.\n\nLet me also think about adding a turntable effect. The dancer could spin on the turntable. I'll add that as part of the stage.\n\nAlso, let me think about the floor pattern. I could use a canvas texture to make a checkered/grid pattern that suggests a hip-hop dance floor.\n\nLet me write the complete JavaScript now:\n\n```javascript\n(function() {\n 'use strict';\n \n // ==== SCENE SETUP ====\n const scene = new THREE.Scene();\n scene.background = new THREE.Color(0x080812);\n scene.fog = new THREE.FogExp2(0x080812, 0.025);\n \n const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 200);\n camera.position.set(5, 2.5, 6);\n camera.lookAt(0, 1, 0);\n \n let renderer, composer, bloomPass;\n try {\n renderer = new THREE.WebGLRenderer({ antialias: true });\n renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));\n renderer.setSize(window.innerWidth, window.innerHeight);\n renderer.shadowMap.enabled = true;\n renderer.shadowMap.type = THREE.PCFSoftShadowMap;\n renderer.toneMapping = THREE.ACESFilmicToneMapping;\n renderer.toneMappingExposure = 1.2;\n renderer.outputEncoding = THREE.sRGBEncoding;\n document.body.appendChild(renderer.domElement);\n \n composer = new THREE.EffectComposer(renderer);\n composer.addPass(new THREE.RenderPass(scene, camera));\n bloomPass = new THREE.UnrealBloomPass(\n new THREE.Vector2(window.innerWidth, window.innerHeight),\n 0.7, 0.3, 0.8\n );\n composer.addPass(bloomPass);\n } catch (e) {\n console.error('Render setup failed:', e);\n document.body.innerHTML = '

WebGL not supported

';\n return;\n }\n \n // Resize handler\n window.addEventListener('resize', () => {\n camera.aspect = window.innerWidth / window.innerHeight;\n camera.updateProjectionMatrix();\n renderer.setSize(window.innerWidth, window.innerHeight);\n if (composer) composer.setSize(window.innerWidth, window.innerHeight);\n });\n \n // ==== ENVIRONMENT ====\n \n // Create floor texture\n function createFloorTexture() {\n const c = document.createElement('canvas');\n c.width = c.height = 512;\n const ctx = c.getContext('2d');\n // Dark base\n ctx.fillStyle = '#1a1a1a';\n ctx.fillRect(0, 0, 512, 512);\n // Grid\n ctx.strokeStyle = '#2a2a2a';\n ctx.lineWidth = 2;\n for (let i = 0; i <= 512; i += 64) {\n ctx.beginPath();\n ctx.moveTo(i, 0); ctx.lineTo(i, 512);\n ctx.moveTo(0, i); ctx.lineTo(512, i);\n ctx.stroke();\n }\n // Highlight\n ctx.fillStyle = 'rgba(255, 0, 100, 0.1)';\n ctx.fillRect(0, 0, 512, 512);\n // Some random lines\n ctx.strokeStyle = 'rgba(100, 200, 255, 0.2)';\n ctx.lineWidth = 4;\n for (let i = 0; i < 10; i++) {\n ctx.beginPath();\n ctx.moveTo(Math.random()*512, Math.random()*512);\n ctx.lineTo(Math.random()*512, Math.random()*512);\n ctx.stroke();\n }\n return new THREE.CanvasTexture(c);\n }\n \n // Stage (main floor)\n const stageMat = new THREE.MeshStandardMaterial({\n map: createFloorTexture(),\n roughness: 0.3,\n metalness: 0.7\n });\n const stage = new THREE.Mesh(new THREE.CircleGeometry(4, 64), stageMat);\n stage.rotation.x = -Math.PI / 2;\n stage.receiveShadow = true;\n scene.add(stage);\n \n // Outer ground\n const outerGround = new THREE.Mesh(\n new THREE.PlaneGeometry(200, 200),\n new THREE.MeshStandardMaterial({ color: 0x05050a, roughness: 0.9, metalness: 0.1 })\n );\n outerGround.rotation.x = -Math.PI / 2;\n outerGround.position.y = -0.01;\n outerGround.receiveShadow = true;\n scene.add(outerGround);\n \n // City buildings in distance\n function createCity() {\n const group = new THREE.Group();\n for (let i = 0; i < 30; i++) {\n const angle = (i / 30) * Math.PI * 2 + Math.random() * 0.1;\n const r = 25 + Math.random() * 15;\n const h = 4 + Math.random() * 18;\n const w = 2 + Math.random() * 3;\n const d = 2 + Math.random() * 3;\n \n // Color with slight blue tint\n const colorVal = 0.05 + Math.random() * 0.08;\n const color = new THREE.Color(colorVal, colorVal, colorVal * 1.5);\n \n const geo = new THREE.BoxGeometry(w, h, d);\n const mat = new THREE.MeshStandardMaterial({\n color: color,\n roughness: 0.7,\n metalness: 0.3,\n emissive: new THREE.Color(color).multiplyScalar(0.05)\n });\n const building = new THREE.Mesh(geo, mat);\n building.position.set(Math.cos(angle) * r, h/2, Math.sin(angle) * r);\n building.castShadow = false;\n building.receiveShadow = false;\n group.add(building);\n \n // Windows\n if (Math.random() > 0.3) {\n const wCanvas = document.createElement('canvas');\n wCanvas.width = 64; wCanvas.height = 128;\n const wctx = wCanvas.getContext('2d');\n wctx.fillStyle = '#000';\n wctx.fillRect(0, 0, 64, 128);\n for (let y = 0; y < 8; y++) {\n for (let x = 0; x < 3; x++) {\n if (Math.random() > 0.4) {\n const hue = 30 + Math.random() * 30;\n const light = 30 + Math.random() * 50;\n wctx.fillStyle = `hsl(${hue}, 80%, ${light}%)`;\n wctx.fillRect(x * 20 + 3, y * 14 + 3, 14, 10);\n }\n }\n }\n const wtex = new THREE.CanvasTexture(wCanvas);\n const winMat = new THREE.MeshBasicMaterial({ map: wtex });\n const windows = new THREE.Mesh(\n new THREE.PlaneGeometry(w * 0.8, h * 0.8),\n winMat\n );\n windows.position.copy(building.position);\n windows.position.y = h/2;\n windows.lookAt(0, h/2, 0);\n group.add(windows);\n }\n }\n return group;\n }\n scene.add(createCity());\n \n // ==== LIGHTS ====\n const ambient = new THREE.AmbientLight(0x202045, 0.4);\n scene.add(ambient);\n \n // Main spot from above\n const mainSpot = new THREE.SpotLight(0xffffff, 4, 25, Math.PI/4, 0.4, 1);\n mainSpot.position.set(0, 10, 1);\n mainSpot.target.position.set(0, 0, 0);\n mainSpot.castShadow = true;\n mainSpot.shadow.mapSize.set(2048, 2048);\n mainSpot.shadow.camera.near = 1;\n mainSpot.shadow.camera.far = 20;\n mainSpot.shadow.bias = -0.0005;\n scene.add(mainSpot, mainSpot.target);\n \n // Visible spotlight cone\n const spotCone = new THREE.Mesh(\n new THREE.ConeGeometry(2, 8, 32, 1, true),\n new THREE.MeshBasicMaterial({\n color: 0xffffff,\n transparent: true,\n opacity: 0.05,\n side: THREE.DoubleSide,\n depthWrite: false,\n blending: THREE.AdditiveBlending\n })\n );\n spotCone.position.set(0, 6, 0.5);\n scene.add(spotCone);\n \n // Colored stage lights\n const stageLights = [];\n const colors = [0xff0066, 0x00ffff, 0xff6600, 0x8800ff, 0x00ff66];\n for (let i = 0; i < 5; i++) {\n const angle = (i / 5) * Math.PI * 2;\n const light = new THREE.PointLight(colors[i], 2, 12);\n light.position.set(Math.cos(angle) * 5, 1.5 + Math.random() * 2, Math.sin(angle) * 5);\n scene.add(light);\n stageLights.push(light);\n \n // Visible light sphere\n const sphere = new THREE.Mesh(\n new THREE.SphereGeometry(0.1, 8, 8),\n new THREE.MeshBasicMaterial({ color: colors[i] })\n );\n sphere.position.copy(light.position);\n scene.add(sphere);\n }\n \n // ==== SPEAKERS ====\n function createSpeaker(x, z, rotation) {\n const g = new THREE.Group();\n const box = new THREE.Mesh(\n new THREE.BoxGeometry(0.8, 1.5, 0.7),\n new THREE.MeshStandardMaterial({ color: 0x111111, roughness: 0.5, metalness: 0.5 })\n );\n box.position.y = 0.75;\n box.castShadow = true;\n box.receiveShadow = true;\n g.add(box);\n \n // Speaker cones\n const cone1 = new THREE.Mesh(\n new THREE.CircleGeometry(0.25, 32),\n new THREE.MeshStandardMaterial({ color: 0x222222, roughness: 0.5, metalness: 0.3 })\n );\n cone1.position.set(0, 0.5, 0.36);\n g.add(cone1);\n const cone2 = new THREE.Mesh(\n new THREE.CircleGeometry(0.15, 32),\n new THREE.MeshStandardMaterial({ color: 0x1a1a1a, roughness: 0.4, metalness: 0.3 })\n );\n cone2.position.set(0, 1.0, 0.36);\n g.add(cone2);\n \n // Stand\n const stand = new THREE.Mesh(\n new THREE.CylinderGeometry(0.05, 0.08, 0.3, 8),\n new THREE.MeshStandardMaterial({ color: 0x333333, metalness: 0.6, roughness: 0.4 })\n );\n stand.position.y = 0.15;\n stand.castShadow = true;\n g.add(stand);\n \n g.position.set(x, 0, z);\n g.rotation.y = rotation;\n scene.add(g);\n return g;\n }\n \n const speakerL = createSpeaker(-3, 2, -Math.PI/4);\n const speakerR = createSpeaker(3, 2, Math.PI/4);\n \n // ==== CHARACTER ====\n // Materials\n const skinMat = new THREE.MeshStandardMaterial({ \n color: 0xa87b5a, \n roughness: 0.5, \n metalness: 0.05,\n emissive: 0x331a0a,\n emissiveIntensity: 0.1\n });\n const shirtMat = new THREE.MeshStandardMaterial({ \n color: 0xee1144, \n roughness: 0.85, \n metalness: 0.05 \n });\n const pantsMat = new THREE.MeshStandardMaterial({ \n color: 0x0a0a0a, \n roughness: 0.9, \n metalness: 0.05 \n });\n const shoeMat = new THREE.MeshStandardMaterial({ \n color: 0xffffff, \n roughness: 0.3, \n metalness: 0.4 \n });\n const hairMat = new THREE.MeshStandardMaterial({ color: 0x111111, roughness: 0.9 });\n const capMat = new THREE.MeshStandardMaterial({ color: 0x222222, roughness: 0.7, metalness: 0.1 });\n const headbandMat = new THREE.MeshStandardMaterial({ \n color: 0xffcc00, \n roughness: 0.6, \n metalness: 0.2,\n emissive: 0x442200,\n emissiveIntensity: 0.3\n });\n \n // Dancer group\n const dancer = new THREE.Group();\n dancer.position.y = 0;\n scene.add(dancer);\n \n // === Character skeleton ===\n function createLimb(geometry, material, parent) {\n const mesh = new THREE.Mesh(geometry, material);\n mesh.castShadow = true;\n parent.add(mesh);\n return mesh;\n }\n \n // Hip root\n const hipRoot = new THREE.Group();\n hipRoot.position.y = 1.0; // Hip height\n dancer.add(hipRoot);\n \n // Torso group\n const torso = new THREE.Group();\n hipRoot.add(torso);\n \n // Torso mesh\n createLimb(new THREE.CylinderGeometry(0.24, 0.20, 0.7, 16), shirtMat, torso).position.y = 0.35;\n \n // Add chest detail\n const chest = createLimb(new THREE.BoxGeometry(0.45, 0.3, 0.25), shirtMat, torso);\n chest.position.y = 0.5;\n chest.position.z = 0.05;\n \n // Neck\n const neck = new THREE.Group();\n neck.position.y = 0.7;\n torso.add(neck);\n createLimb(new THREE.CylinderGeometry(0.07, 0.09, 0.12, 12), skinMat, neck).position.y = 0.06;\n \n // Head\n const head = new THREE.Group();\n head.position.y = 0.18;\n neck.add(head);\n const headMesh = createLimb(new THREE.SphereGeometry(0.16, 24, 24), skinMat, head);\n headMesh.position.y = 0.04;\n \n // Hair (afro / cap)\n const hair = createLimb(\n new THREE.SphereGeometry(0.17, 16, 16, 0, Math.PI*2, 0, Math.PI*0.55),\n hairMat,\n head\n );\n hair.position.y = 0.05;\n \n // Cap\n const cap = createLimb(\n new THREE.SphereGeometry(0.165, 16, 16, 0, Math.PI*2, 0, Math.PI*0.55),\n capMat,\n head\n );\n cap.position.y = 0.07;\n cap.scale.y = 0.9;\n \n // Cap brim\n const brim = createLimb(\n new THREE.CylinderGeometry(0.2, 0.2, 0.015, 16, 1, false, 0, Math.PI),\n capMat,\n head\n );\n brim.rotation.x = -Math.PI/2;\n brim.rotation.z = -Math.PI/2;\n brim.position.set(0, 0.07, 0.18);\n \n // Headband\n const headband = createLimb(\n new THREE.TorusGeometry(0.165, 0.025, 8, 24),\n headbandMat,\n head\n );\n headband.position.y = 0.04;\n headband.rotation.x = Math.PI/2;\n \n // Sunglasses\n const glasses = createLimb(\n new THREE.BoxGeometry(0.25, 0.04, 0.02),\n new THREE.MeshStandardMaterial({ color: 0x000000, roughness: 0.2, metalness: 0.8 }),\n head\n );\n glasses.position.set(0, 0.05, 0.14);\n \n // Ears / headphones... let's skip for simplicity\n \n // ==== ARMS ====\n function createArm(side) {\n const sign = side === 'L' ? -1 : 1;\n \n const shoulder = new THREE.Group();\n shoulder.position.set(sign * 0.28, 0.6, 0);\n torso.add(shoulder);\n \n const upperArm = new THREE.Group();\n shoulder.add(upperArm);\n \n createLimb(\n new THREE.CylinderGeometry(0.07, 0.075, 0.32, 12),\n shirtMat,\n upperArm\n ).position.y = -0.16;\n \n const elbow = new THREE.Group();\n elbow.position.y = -0.32;\n upperArm.add(elbow);\n \n const forearm = new THREE.Group();\n elbow.add(forearm);\n \n createLimb(\n new THREE.CylinderGeometry(0.055, 0.065, 0.30, 12),\n skinMat,\n forearm\n ).position.y = -0.15;\n \n const wrist = new THREE.Group();\n wrist.position.y = -0.30;\n forearm.add(wrist);\n \n const hand = new THREE.Group();\n wrist.add(hand);\n \n // Fist\n const fist = createLimb(\n new THREE.SphereGeometry(0.08, 12, 12),\n skinMat,\n hand\n );\n fist.scale.set(1, 0.8, 1.3);\n \n return { shoulder, upperArm, elbow, forearm, wrist, hand };\n }\n \n const armL = createArm('L');\n const armR = createArm('R');\n \n // ==== LEGS ====\n function createLeg(side) {\n const sign = side === 'L' ? -1 : 1;\n \n const hipJoint = new THREE.Group();\n hipJoint.position.set(sign * 0.12, 0, 0);\n hipRoot.add(hipJoint);\n \n const thigh = new THREE.Group();\n hipJoint.add(thigh);\n \n createLimb(\n new THREE.CylinderGeometry(0.095, 0.08, 0.42, 12),\n pantsMat,\n thigh\n ).position.y = -0.21;\n \n const knee = new THREE.Group();\n knee.position.y = -0.42;\n thigh.add(knee);\n \n const calf = new THREE.Group();\n knee.add(calf);\n \n createLimb(\n new THREE.CylinderGeometry(0.075, 0.09, 0.42, 12),\n pantsMat,\n calf\n ).position.y = -0.21;\n \n const ankle = new THREE.Group();\n ankle.position.y = -0.42;\n calf.add(ankle);\n \n const foot = new THREE.Group();\n ankle.add(foot);\n \n createLimb(\n new THREE.BoxGeometry(0.1, 0.07, 0.24),\n shoeMat,\n foot\n ).position.set(0, -0.04, 0.08);\n \n return { hipJoint, thigh, knee, calf, ankle, foot };\n }\n \n const legL = createLeg('L');\n const legR = createLeg('R');\n \n // ==== POSES ====\n // Each joint has [rotX, rotY, rotZ]\n // hipPos is [x, y, z] for the hip root\n // Some poses have hip rotation\n \n function newPose() {\n return {\n hipPos: [0, 1.0, 0],\n hip: [0, 0, 0],\n torso: [0, 0, 0],\n neck: [0, 0, 0],\n head: [0, 0, 0],\n armL: { shoulder: [0,0,0], upper: [0,0,0], elbow: [0,0,0], forearm: [0,0,0] },\n armR: { shoulder: [0,0,0], upper: [0,0,0], elbow: [0,0,0], forearm: [0,0,0] },\n legL: { hip: [0,0,0], thigh: [0,0,0], knee: [0,0,0], ankle: [0,0,0] },\n legR: { hip: [0,0,0], thigh: [0,0,0], knee: [0,0,0], ankle: [0,0,0] }\n };\n }\n \n // 1. Top Rock - confident stance\n const pose_topRock = newPose();\n pose_topRock.hip = [0, 0.2, 0];\n pose_topRock.torso = [0.05, 0.3, -0.15];\n pose_topRock.neck = [0, -0.2, 0];\n pose_topRock.head = [0, 0.1, 0];\n pose_topRock.armL.shoulder = [0, 0, 0.5];\n pose_topRock.armL.upper = [-0.3, 0, -0.7];\n pose_topRock.armL.elbow = [0, 0, -1.2];\n pose_topRock.armR.shoulder = [0, 0, -0.6];\n pose_topRock.armR.upper = [-0.4, 0, 1.0];\n pose_topRock.armR.elbow = [0, 0, -0.4];\n pose_topRock.legL.hip = [0, 0, 0.1];\n pose_topRock.legL.thigh = [-0.1, 0.1, 0];\n pose_topRock.legL.knee = [0.1, 0, 0];\n pose_topRock.legR.hip = [0, 0, -0.1];\n pose_topRock.legR.thigh = [-0.2, -0.1, 0];\n pose_topRock.legR.knee = [0.1, 0, 0];\n \n // 2. Six Step - low crouch\n const pose_sixStep = newPose();\n pose_sixStep.hipPos = [0, 0.4, 0];\n pose_sixStep.hip = [0, 0, 0];\n pose_sixStep.torso = [-0.3, 0.3, 0.2];\n pose_sixStep.neck = [0.1, -0.2, 0];\n pose_sixStep.head = [0, 0, 0];\n pose_sixStep.armL.shoulder = [0.5, 0, 0.4];\n pose_sixStep.armL.upper = [0, 0, -1.4];\n pose_sixStep.armL.elbow = [0, 0, -0.3];\n pose_sixStep.armR.shoulder = [0.3, 0, -0.4];\n pose_sixStep.armR.upper = [0.2, 0, -0.9];\n pose_sixStep.armR.elbow = [0, 0, -0.5];\n pose_sixStep.legL.hip = [-0.5, 0, 0];\n pose_sixStep.legL.thigh = [0.6, 0, 0];\n pose_sixStep.legL.knee = [-0.4, 0, 0];\n pose_sixStep.legL.ankle = [0.4, 0, 0];\n pose_sixStep.legR.hip = [-0.3, 0, 0];\n pose_sixStep.legR.thigh = [0.4, 0, 0];\n pose_sixStep.legR.knee = [-0.3, 0, 0];\n pose_sixStep.legR.ankle = [0.3, 0, 0];\n \n // 3. Baby Freeze - one hand on ground\n const pose_babyFreeze = newPose();\n pose_babyFreeze.hipPos = [0, 0.5, 0];\n pose_babyFreeze.hip = [0, 0, 0.4];\n pose_babyFreeze.torso = [0, 0, 0.3];\n pose_babyFreeze.neck = [-0.2, 0, -0.2];\n pose_babyFreeze.head = [0, 0, 0];\n pose_babyFreeze.armL.shoulder = [0, 0, 1.5];\n pose_babyFreeze.armL.upper = [0, 0, -1.5];\n pose_babyFreeze.armL.elbow = [0, 0, 0];\n pose_babyFreeze.armR.shoulder = [0, 0, 0.3];\n pose_babyFreeze.armR.upper = [0, 0, -0.3];\n pose_babyFreeze.armR.elbow = [0, 0, -1.5];\n pose_babyFreeze.legL.hip = [0, 0, 0];\n pose_babyFreeze.legL.thigh = [-0.7, 0, 0];\n pose_babyFreeze.legL.knee = [0, 0, 0];\n pose_babyFreeze.legL.ankle = [0.3, 0, 0];\n pose_babyFreeze.legR.hip = [0, 0, 0];\n pose_babyFreeze.legR.thigh = [-1.2, 0, 0.3];\n pose_babyFreeze.legR.knee = [0, 0, 0];\n pose_babyFreeze.legR.ankle = [0.3, 0, 0];\n \n // 4. Air Flare - body in air\n const pose_airFlare = newPose();\n pose_airFlare.hipPos = [0, 1.5, 0];\n pose_airFlare.hip = [0, 0, 0];\n pose_airFlare.torso = [-0.3, 0, 0];\n pose_airFlare.neck = [0.2, 0, 0];\n pose_airFlare.head = [0, 0, 0];\n pose_airFlare.armL.shoulder = [0, 0, 0.3];\n pose_airFlare.armL.upper = [0.5, 0, -1.3];\n pose_airFlare.armL.elbow = [0, 0, -0.2];\n pose_airFlare.armR.shoulder = [0, 0, -0.3];\n pose_airFlare.armR.upper = [0.5, 0, 1.3];\n pose_airFlare.armR.elbow = [0, 0, 0.2];\n pose_airFlare.legL.hip = [0, 0, 0.1];\n pose_airFlare.legL.thigh = [0.5, 0.3, 0];\n pose_airFlare.legL.knee = [-0.4, 0, 0];\n pose_airFlare.legR.hip = [0, 0, -0.1];\n pose_airFlare.legR.thigh = [0.5, -0.3, 0];\n pose_airFlare.legR.knee = [-0.4, 0, 0];\n \n // 5. Windmill - body sideways\n const pose_windmill = newPose();\n pose_windmill.hipPos = [0, 0.3, 0];\n pose_windmill.hip = [Math.PI/2, 0, 0];\n pose_windmill.torso = [0, 0, 0];\n pose_windmill.neck = [0, 0, 0];\n pose_windmill.head = [0, 0, 0];\n pose_windmill.armL.shoulder = [0, 0, 1.4];\n pose_windmill.armL.upper = [0, 0, -1.4];\n pose_windmill.armL.elbow = [0, 0, 0];\n pose_windmill.armR.shoulder = [0, 0, 0.3];\n pose_windmill.armR.upper = [0, 0, -0.5];\n pose_windmill.armR.elbow = [0, 0, -1.2];\n pose_windmill.legL.hip = [0, 0, 0.3];\n pose_windmill.legL.thigh = [0.3, 0, 0];\n pose_windmill.legL.knee = [-0.4, 0, 0];\n pose_windmill.legR.hip = [0, 0, -0.3];\n pose_windmill.legR.thigh = [0.5, 0, 0];\n pose_windmill.legR.knee = [-0.6, 0, 0];\n \n // 6. Handstand - body upside down\n const pose_handstand = newPose();\n pose_handstand.hipPos = [0, 1.8, 0];\n pose_handstand.hip = [-1.4, 0, 0];\n pose_handstand.torso = [0, 0, 0];\n pose_handstand.neck = [0.3, 0, 0];\n pose_handstand.head = [0, 0, 0];\n pose_handstand.armL.shoulder = [0, 0, 0.3];\n pose_handstand.armL.upper = [0, 0, 1.2];\n pose_handstand.armL.elbow = [0, 0, -0.2];\n pose_handstand.armR.shoulder = [0, 0, -0.3];\n pose_handstand.armR.upper = [0, 0, -1.2];\n pose_handstand.armR.elbow = [0, 0, 0.2];\n pose_handstand.legL.hip = [0, 0, 0.2];\n pose_handstand.legL.thigh = [0.3, 0, 0];\n pose_handstand.legL.knee = [-0.3, 0, 0];\n pose_handstand.legR.hip = [0, 0, -0.2];\n pose_handstand.legR.thigh = [0.5, 0, 0];\n pose_handstand.legR.knee = [-0.5, 0, 0];\n \n // 7. Standing Ovation - arms raised\n const pose_ovation = newPose();\n pose_ovation.hip = [0, 0, 0];\n pose_ovation.torso = [0, 0, 0];\n pose_ovation.neck = [-0.1, 0, 0];\n pose_ovation.head = [0, 0, 0];\n pose_ovation.armL.shoulder = [0, 0, 0.2];\n pose_ovation.armL.upper = [0, 0, -2.8];\n pose_ovation.armL.elbow = [0, 0, -0.3];\n pose_ovation.armR.shoulder = [0, 0, -0.2];\n pose_ovation.armR.upper = [0, 0, 2.8];\n pose_ovation.armR.elbow = [0, 0, 0.3];\n pose_ovation.legL.hip = [0, 0, 0.05];\n pose_ovation.legL.thigh = [0, 0, 0];\n pose_ovation.legR.hip = [0, 0, -0.05];\n pose_ovation.legR.thigh = [0, 0, 0];\n \n // ==== SEQUENCE ====\n const sequence = [\n { pose: pose_topRock, duration: 1.2, name: 'TOP ROCK' },\n { pose: pose_sixStep, duration: 0.7, name: 'SIX STEP' },\n { pose: pose_babyFreeze, duration: 1.0, name: 'BABY FREEZE' },\n { pose: pose_airFlare, duration: 0.6, name: 'AIR FLARE' },\n { pose: pose_windmill, duration: 0.7, name: 'WINDMILL' },\n { pose: pose_handstand, duration: 0.8, name: 'HANDSTAND' },\n { pose: pose_ovation, duration: 0.8, name: 'OVATION' }\n ];\n \n // ==== APPLY POSE ====\n function applyLerp(p1, p2, t) {\n // Hip position\n hipRoot.position.x = THREE.MathUtils.lerp(p1.hipPos[0], p2.hipPos[0], t);\n hipRoot.position.y = THREE.MathUtils.lerp(p1.hipPos[1], p2.hipPos[1], t);\n hipRoot.position.z = THREE.MathUtils.lerp(p1.hipPos[2], p2.hipPos[2], t);\n \n // Hip rotation\n hipRoot.rotation.x = THREE.MathUtils.lerp(p1.hip[0], p2.hip[0], t);\n hipRoot.rotation.y = THREE.MathUtils.lerp(p1.hip[1], p2.hip[1], t);\n hipRoot.rotation.z = THREE.MathUtils.lerp(p1.hip[2], p2.hip[2], t);\n \n // Torso\n torso.rotation.x = THREE.MathUtils.lerp(p1.torso[0], p2.torso[0], t);\n torso.rotation.y = THREE.MathUtils.lerp(p1.torso[1], p2.torso[1], t);\n torso.rotation.z = THREE.MathUtils.lerp(p1.torso[2], p2.torso[2], t);\n \n // Neck\n neck.rotation.x = THREE.MathUtils.lerp(p1.neck[0], p2.neck[0], t);\n neck.rotation.y = THREE.MathUtils.lerp(p1.neck[1], p2.neck[1], t);\n neck.rotation.z = THREE.MathUtils.lerp(p1.neck[2], p2.neck[2], t);\n \n // Head\n head.rotation.x = THREE.MathUtils.lerp(p1.head[0], p2.head[0], t);\n head.rotation.y = THREE.MathUtils.lerp(p1.head[1], p2.head[1], t);\n head.rotation.z = THREE.MathUtils.lerp(p1.head[2], p2.head[2], t);\n \n // Arm L\n armL.shoulder.rotation.x = THREE.MathUtils.lerp(p1.armL.shoulder[0], p2.armL.shoulder[0], t);\n armL.shoulder.rotation.y = THREE.MathUtils.lerp(p1.armL.shoulder[1], p2.armL.shoulder[1], t);\n armL.shoulder.rotation.z = THREE.MathUtils.lerp(p1.armL.shoulder[2], p2.armL.shoulder[2], t);\n armL.upperArm.rotation.x = THREE.MathUtils.lerp(p1.armL.upper[0], p2.armL.upper[0], t);\n armL.upperArm.rotation.y = THREE.MathUtils.lerp(p1.armL.upper[1], p2.armL.upper[1], t);\n armL.upperArm.rotation.z = THREE.MathUtils.lerp(p1.armL.upper[2], p2.armL.upper[2], t);\n armL.elbow.rotation.x = THREE.MathUtils.lerp(p1.armL.elbow[0], p2.armL.elbow[0], t);\n armL.elbow.rotation.y = THREE.MathUtils.lerp(p1.armL.elbow[1], p2.armL.elbow[1], t);\n armL.elbow.rotation.z = THREE.MathUtils.lerp(p1.armL.elbow[2], p2.armL.elbow[2], t);\n armL.forearm.rotation.x = THREE.MathUtils.lerp(p1.armL.forearm[0], p2.armL.forearm[0], t);\n armL.forearm.rotation.y = THREE.MathUtils.lerp(p1.armL.forearm[1], p2.armL.forearm[1], t);\n armL.forearm.rotation.z = THREE.MathUtils.lerp(p1.armL.forearm[2], p2.armL.forearm[2], t);\n \n // Arm R\n armR.shoulder.rotation.x = THREE.MathUtils.lerp(p1.armR.shoulder[0], p2.armR.shoulder[0], t);\n armR.shoulder.rotation.y = THREE.MathUtils.lerp(p1.armR.shoulder[1], p2.armR.shoulder[1], t);\n armR.shoulder.rotation.z = THREE.MathUtils.lerp(p1.armR.shoulder[2], p2.armR.shoulder[2], t);\n armR.upperArm.rotation.x = THREE.MathUtils.lerp(p1.armR.upper[0], p2.armR.upper[0], t);\n armR.upperArm.rotation.y = THREE.MathUtils.lerp(p1.armR.upper[1], p2.armR.upper[1], t);\n armR.upperArm.rotation.z = THREE.MathUtils.lerp(p1.armR.upper[2], p2.armR.upper[2], t);\n armR.elbow.rotation.x = THREE.MathUtils.lerp(p1.armR.elbow[0], p2.armR.elbow[0], t);\n armR.elbow.rotation.y = THREE.MathUtils.lerp(p1.armR.elbow[1], p2.armR.elbow[1], t);\n armR.elbow.rotation.z = THREE.MathUtils.lerp(p1.armR.elbow[2], p2.armR.elbow[2], t);\n armR.forearm.rotation.x = THREE.MathUtils.lerp(p1.armR.forearm[0], p2.armR.forearm[0], t);\n armR.forearm.rotation.y = THREE.MathUtils.lerp(p1.armR.forearm[1], p2.armR.forearm[1], t);\n armR.forearm.rotation.z = THREE.MathUtils.lerp(p1.armR.forearm[2], p2.armR.forearm[2], t);\n \n // Leg L\n legL.hipJoint.rotation.x = THREE.MathUtils.lerp(p1.legL.hip[0], p2.legL.hip[0], t);\n legL.hipJoint.rotation.y = THREE.MathUtils.lerp(p1.legL.hip[1], p2.legL.hip[1], t);\n legL.hipJoint.rotation.z = THREE.MathUtils.lerp(p1.legL.hip[2], p2.legL.hip[2], t);\n legL.thigh.rotation.x = THREE.MathUtils.lerp(p1.legL.thigh[0], p2.legL.thigh[0], t);\n legL.thigh.rotation.y = THREE.MathUtils.lerp(p1.legL.thigh[1], p2.legL.thigh[1], t);\n legL.thigh.rotation.z = THREE.MathUtils.lerp(p1.legL.thigh[2], p2.legL.thigh[2], t);\n legL.knee.rotation.x = THREE.MathUtils.lerp(p1.legL.knee[0], p2.legL.knee[0], t);\n legL.knee.rotation.y = THREE.MathUtils.lerp(p1.legL.knee[1], p2.legL.knee[1], t);\n legL.knee.rotation.z = THREE.MathUtils.lerp(p1.legL.knee[2], p2.legL.knee[2], t);\n legL.ankle.rotation.x = THREE.MathUtils.lerp(p1.legL.ankle[0], p2.legL.ankle[0], t);\n legL.ankle.rotation.y = THREE.MathUtils.lerp(p1.legL.ankle[1], p2.legL.ankle[1], t);\n legL.ankle.rotation.z = THREE.MathUtils.lerp(p1.legL.ankle[2], p2.legL.ankle[2], t);\n \n // Leg R\n legR.hipJoint.rotation.x = THREE.MathUtils.lerp(p1.legR.hip[0], p2.legR.hip[0], t);\n legR.hipJoint.rotation.y = THREE.MathUtils.lerp(p1.legR.hip[1], p2.legR.hip[1], t);\n legR.hipJoint.rotation.z = THREE.MathUtils.lerp(p1.legR.hip[2], p2.legR.hip[2], t);\n legR.thigh.rotation.x = THREE.MathUtils.lerp(p1.legR.thigh[0], p2.legR.thigh[0], t);\n legR.thigh.rotation.y = THREE.MathUtils.lerp(p1.legR.thigh[1], p2.legR.thigh[1], t);\n legR.thigh.rotation.z = THREE.MathUtils.lerp(p1.legR.thigh[2], p2.legR.thigh[2], t);\n legR.knee.rotation.x = THREE.MathUtils.lerp(p1.legR.knee[0], p2.legR.knee[0], t);\n legR.knee.rotation.y = THREE.MathUtils.lerp(p1.legR.knee[1], p2.legR.knee[1], t);\n legR.knee.rotation.z = THREE.MathUtils.lerp(p1.legR.knee[2], p2.legR.knee[2], t);\n legR.ankle.rotation.x = THREE.MathUtils.lerp(p1.legR.ankle[0], p2.legR.ankle[0], t);\n legR.ankle.rotation.y = THREE.MathUtils.lerp(p1.legR.ankle[1], p2.legR.ankle[1], t);\n legR.ankle.rotation.z = THREE.MathUtils.lerp(p1.legR.ankle[2], p2.legR.ankle[2], t);\n }\n \n // ==== PARTICLES ====\n const particleCount = 300;\n const particleGeo = new THREE.BufferGeometry();\n const particlePositions = new Float32Array(particleCount * 3);\n const particleVelocities = [];\n for (let i = 0; i < particleCount; i++) {\n particlePositions[i*3] = (Math.random() - 0.5) * 12;\n particlePositions[i*3+1] = Math.random() * 6;\n particlePositions[i*3+2] = (Math.random() - 0.5) * 12;\n particleVelocities.push({\n x: (Math.random() - 0.5) * 0.02,\n y: -0.01 - Math.random() * 0.02,\n z: (Math.random() - 0.5) * 0.02\n });\n }\n particleGeo.setAttribute('position', new THREE.BufferAttribute(particlePositions, 3));\n const particleMat = new THREE.PointsMaterial({\n color: 0xffaa44,\n size: 0.06,\n transparent: true,\n opacity: 0.8,\n blending: THREE.AdditiveBlending,\n depthWrite: false\n });\n const particles = new THREE.Points(particleGeo, particleMat);\n scene.add(particles);\n \n // ==== ANIMATION ====\n const clock = new THREE.Clock();\n let seqIdx = 0;\n let seqTime = 0;\n let lastPose = sequence[sequence.length - 1].pose;\n let nextPose = sequence[0].pose;\n let nextDuration = sequence[0].duration;\n let nextName = sequence[0].name;\n const moveNameEl = document.getElementById('move-name');\n \n function showMoveName(name) {\n if (moveNameEl) {\n moveNameEl.textContent = name;\n moveNameEl.classList.remove('show');\n void moveNameEl.offsetWidth; // Reflow\n moveNameEl.classList.add('show');\n }\n }\n \n function animate() {\n requestAnimationFrame(animate);\n const delta = Math.min(clock.getDelta(), 0.1);\n const time = clock.getElapsedTime();\n \n // Sequence\n seqTime += delta;\n if (seqTime >= nextDuration) {\n lastPose = nextPose;\n seqIdx = (seqIdx + 1) % sequence.length;\n const s = sequence[seqIdx];\n nextPose = s.pose;\n nextDuration = s.duration;\n seqTime = 0;\n showMoveName(s.name);\n }\n \n const t = Math.min(seqTime / 0.25, 1);\n const easedT = t * t * (3 - 2*t);\n applyLerp(lastPose, nextPose, easedT);\n \n // Add subtle idle motion\n const idleX = Math.sin(time * 1.5) * 0.02;\n const idleY = Math.cos(time * 1.2) * 0.015;\n \n // Animate lights\n for (let i = 0; i < stageLights.length; i++) {\n const light = stageLights[i];\n const phase = (i / stageLights.length) * Math.PI * 2;\n const intensity = 1.5 + Math.sin(time * 2 + phase) * 0.8;\n light.intensity = intensity;\n \n // Move lights in a circle\n const angle = time * 0.4 + phase;\n const r = 4.5;\n light.position.x = Math.cos(angle) * r;\n light.position.z = Math.sin(angle) * r;\n light.position.y = 1.5 + Math.sin(time * 1.5 + phase) * 0.5;\n }\n \n // Animate particles\n const positions = particleGeo.attributes.position.array;\n for (let i = 0; i < particleCount; i++) {\n positions[i*3] += particleVelocities[i].x;\n positions[i*3+1] += particleVelocities[i].y;\n positions[i*3+2] += particleVelocities[i].z;\n if (positions[i*3+1] < 0) {\n positions[i*3+1] = 5 + Math.random() * 2;\n positions[i*3] = (Math.random() - 0.5) * 12;\n positions[i*3+2] = (Math.random() - 0.5) * 12;\n }\n }\n particleGeo.attributes.position.needsUpdate = true;\n \n // Camera orbit\n const camAngle = time * 0.25;\n const camR = 6 + Math.sin(time * 0.3) * 1;\n camera.position.x = Math.cos(camAngle) * camR;\n camera.position.z = Math.sin(camAngle) * camR;\n camera.position.y = 2.5 + Math.sin(time * 0.4) * 0.5;\n camera.lookAt(0, hipRoot.position.y, 0);\n \n // Render\n if (composer) composer.render();\n else renderer.render(scene, camera);\n }\n \n // Initialize\n showMoveName(sequence[0].name);\n applyLerp(sequence[0].pose, sequence[0].pose, 0);\n animate();\n})();\n```\n\nOK that's the full code. Let me review it for issues:\n\n1. The `createLimb` function returns the mesh, but I should make sure the position is set correctly. Let me check the calls.\n\n```javascript\ncreateLimb(new THREE.CylinderGeometry(0.24, 0.20, 0.7, 16), shirtMat, torso).position.y = 0.35;\n```\n\nThis should work - the function returns the mesh, and we set its position. Good.\n\n2. The arm/leg joint groups have proper rotation pivots. The shoulders are at the shoulder position, then upper arm extends down from there. Let me trace through:\n- shoulder position: (0.28, 0.6, 0) - at the top of torso\n- upperArm group: child of shoulder, contains the upper arm mesh at y=-0.16\n- elbow group: child of upperArm, at y=-0.32 (bottom of upper arm)\n- forearm group: child of elbow, contains forearm mesh at y=-0.15\n- wrist: child of forearm, at y=-0.30 (bottom of forearm)\n- hand: child of wrist, contains fist\n\nThe rotations are applied to the groups, so the limbs swing from the joint. Good.\n\n3. For the legs:\n- hipJoint position: (0.12, 0, 0) - at the hip\n- thigh group: contains thigh mesh at y=-0.21\n- knee group: at y=-0.42 (bottom of thigh)\n- calf group: contains calf mesh at y=-0.21\n- ankle: at y=-0.42\n- foot: contains foot mesh\n\nOK this looks right.\n\n4. The poses have rotations in radians. Let me make sure they're reasonable.\n- 0.5 rad = ~28 degrees\n- 1.0 rad = ~57 degrees\n- 1.5 rad = ~86 degrees\n- Math.PI/2 = 90 degrees\n\nThese should be reasonable for dance poses.\n\n5. The transition: I lerp from last pose to current pose over 0.25 seconds, but the duration of each pose is 0.6-1.2 seconds. So there's some time to hold the pose. That should work.\n\n6. The camera orbit and light animation add dynamism.\n\n7. The post-processing should add bloom for a more cinematic look.\n\nI think this is solid. Let me finalize and write the complete HTML.\n\nOne thing I want to double-check: the `THREE.MathUtils.lerp` function. In r128, this should be available. Yes, it is.\n\nAlso, the `outputEncoding` property - in r128, this is the correct property. Newer versions use `outputColorSpace`. But for r128, outputEncoding is right.\n\nLet me also make sure the post-processing scripts work. The order matters - I need to load them after three.js, and the ShaderPass requires CopyShader. Let me make sure the order is right.\n\nActually, in three.js r128, the EffectComposer automatically loads the CopyShader and ShaderPass when needed. The order should be:\n1. three.min.js\n2. EffectComposer.js\n3. RenderPass.js\n4. UnrealBloomPass.js\n5. LuminosityHighPassShader.js (needed by UnrealBloomPass)\n6. CopyShader.js (needed by EffectComposer internally)\n7. ShaderPass.js (needed by UnrealBloomPass internally)\n\nBut since they're all in examples/js/, and they're plain script tags, they should load in order. The internal dependencies should resolve at runtime.\n\nOK let me finalize. I'll output the complete HTML now.\n\nActually, let me also add a few more visual touches:\n- A \"BREAK\" sign or graffiti\n- More dynamic lighting\n- Maybe a turntable that spins\n\nLet me add a turntable under the dancer that spins slowly.\n\nAlso, I want to make the dancer more interesting. Let me add:\n- Tattoos or markings (just emissive lines)\n- A watch or bracelet\n- Maybe a microphone or something\n\nActually, let me keep it clean and focus on the animation. The user wants to see hip-hop dance moves, so the focus should be on the dancer.\n\nLet me also make the floor have a turntable effect - circular lines that rotate.\n\nOK let me finalize and output the code.\n\nWait, I should also add some \"spotlight beam\" effect to make it more dramatic. I have a cone for that, but it should be positioned correctly relative to the spotlight.\n\nLet me also add some \"energy\" particles that emit from the dancer when they hit a pose.\n\nOK let me just finalize. I'll output the complete HTML now.\n\nOne more thing - I want to make sure the code works even if the post-processing fails. So I'll wrap that in a try/catch and fall back to direct rendering.\n\nOK here's the final code. Let me write it out.\n\nHmm, I realize I have a slight issue with the windmill pose. The hip rotation of PI/2 would rotate the entire body sideways, but then the legs would also rotate. That might look weird. Let me reconsider.\n\nActually, for a windmill, the body is supposed to be horizontal, with one hand on the ground. The legs are in the air. So the hip rotation should be around the X axis (rotating forward), but the body should be on its side. That's a complex pose that might not work well with my current setup.\n\nLet me simplify the windmill pose to be more like a backspin or a low crouch.\n\nActually, let me just remove the windmill pose and replace it with a \"Chair Freeze\" or \"Headstand\" or something simpler. Or I can just keep it but with more reasonable rotations.\n\nLet me change pose_windmill to a \"Back Spin\" pose - low and on back:\n\n```javascript\nconst pose_backspin = newPose();\npose_backspin.hipPos = [0, 0.2, 0];\npose_backspin.hip = [Math.PI/2, 0, 0]; // Body on back\npose_backspin.torso = [0, 0, 0];\npose_backspin.neck = [0, 0, 0];\npose_backspin.head = [0, 0, 0];\npose_backspin.armL.shoulder = [0, 0, 1.4];\npose_backspin.armL.upper = [0, 0, -1.4];\npose_backspin.armL.elbow = [0, 0, 0];\npose_backspin.armR.shoulder = [0, 0, 0.3];\npose_backspin.armR.upper = [0, 0, -0.5];\npose_backspin.armR.elbow = [0, 0, -1.2];\npose_backspin.legL.hip = [0, 0, 0.3];\npose_backspin.legL.thigh = [0.3, 0, 0];\npose_backspin.legL.knee = [-0.4, 0, 0];\npose_backspin.legR.hip = [0, 0, -0.3];\npose_backspin.legR.thigh = [0.5, 0, 0];\npose_backspin.legR.knee = [-0.6, 0, 0];\n```\n\nHmm, with hip rotated PI/2 around X, the body would be horizontal. But then the legs, which hang from the hip, would be in the air. That should look like a backspin/flare-like pose.\n\nLet me also adjust the air flare to be more clear. In an air flare, the body is parallel to the ground, supported by the hands, with the legs in the air doing a V motion. Let me adjust:\n\n```javascript\nconst pose_airFlare = newPose();\npose_airFlare.hipPos = [0, 1.0, 0];\npose_airFlare.hip = [0, 0, 0];\npose_airFlare.torso = [-0.2, 0, 0];\npose_airFlare.neck = [0.2, 0, 0];\npose_airFlare.head = [0, 0, 0];\npose_airFlare.armL.shoulder = [0, 0, 0.3];\npose_airFlare.armL.upper = [0.3, 0, -1.3];\npose_airFlare.armL.elbow = [0, 0, -0.2];\npose_airFlare.armR.shoulder = [0, 0, -0.3];\npose_airFlare.armR.upper = [0.3, 0, 1.3];\npose_airFlare.armR.elbow = [0, 0, 0.2];\npose_airFlare.legL.hip = [0, 0, 0.1];\npose_airFlare.legL.thigh = [0.3, 0.3, 0];\npose_airFlare.legL.knee = [-0.2, 0, 0];\npose_airFlare.legR.hip = [0, 0, -0.1];\npose_airFlare.legR.thigh = [0.3, -0.3, 0];\npose_airFlare.legR.knee = [-0.2, 0, 0];\n```\n\nOK I think I have a good set of poses. Let me finalize.\n\nActually, let me think about the camera position more. With the camera orbiting, the dancer should be visible from all angles. But during some poses (like the backspin/windmill), the dancer is horizontal, so the camera angle matters a lot.\n\nLet me set the camera to be at a higher angle so we can see the dancer even when horizontal.\n\ncamera.position.y = 2.5 + Math.sin(time * 0.4) * 0.5;\n\nThat's at about 2-3 units high. The stage is at y=0, dancer at y=1. So the camera is looking down slightly. That should work.\n\nOK let me write the final code now.\n\nOne more thing - I want to add a visual effect when a new pose starts. Like a flash of light or some particles. Let me add that.\n\n```javascript\n// Trigger effect on pose change\nlet flashTime = -1;\nfunction showMoveName(name) {\n if (moveNameEl) {\n moveNameEl.textContent = name;\n moveNameEl.classList.remove('show');\n void moveNameEl.offsetWidth;\n moveNameEl.classList.add('show');\n }\n flashTime = 0; // Trigger flash\n}\n\n// In animate:\nif (flashTime >= 0) {\n flashTime += delta;\n const flashIntensity = Math.max(0, 1 - flashTime * 3) * 3;\n mainSpot.intensity = 4 + flashIntensity;\n if (flashTime > 0.5) flashTime = -1;\n}\n```\n\nOK that adds a flash effect when a new move starts.\n\nLet me also add a \"shadow\" of the dancer on the ground for realism. But with the existing setup, the spotlight should cast a shadow on the stage.\n\nAlright, let me finalize and write the code.\n\nI realize I've been thinking for a while. Let me just write the final HTML and JavaScript.\n\nActually one more thought - for the title display, let me have it cycle through the move names with style. But that's already handled by the showMoveName function.\n\nOK final code time. Let me also consider that the user wants \"siêu thực\" (hyper-realistic). So I should try to make the rendering as good as possible. Let me use:\n- High shadow map resolution\n- ACES tone mapping\n- Bloom for highlights\n- Multiple light sources\n- Realistic materials\n\nI think my code does this. Let me finalize.\n\nLet me also add a subtle camera shake during transitions for impact.\n\n```javascript\n// Camera shake on pose change\nif (seqTime < 0.1) {\n const shake = (0.1 - seqTime) * 0.1;\n camera.position.x += (Math.random() - 0.5) * shake;\n camera.position.y += (Math.random() - 0.5) * shake;\n}\n```\n\nOK let me write the final code. I'll keep it as one HTML file.\n\nI realize the code is getting very long. Let me try to be more concise but still effective. I'll use helper functions and arrays to reduce repetition.\n\nLet me restructure the limb joint setup to be more concise:\n\n```javascript\nfunction setupLimb(parent, side, lengths) {\n // Creates a chain of joints and returns references\n}\n```\n\nBut for clarity, I'll just keep the explicit code.\n\nOK, final code:\n\nI need to be careful about the order of the CDNs. Let me list them:\n1. three.min.js\n2. postprocessing/EffectComposer.js\n3. postprocessing/RenderPass.js\n4. postprocessing/UnrealBloomPass.js\n5. shaders/LuminosityHighPassShader.js\n6. shaders/CopyShader.js\n7. postprocessing/ShaderPass.js\n\nAll from r128. The UnrealBloomPass depends on LuminosityHighPassShader. ShaderPass is used by EffectComposer for the final pass.\n\nOK let me write the final HTML file now.\n\nI realize I should also handle the case where the post-processing scripts don't load. The error handling I have should work.\n\nLet me write it all out now. I'll make the code as clean and impressive as possible.\n\nFinal structure:\n1. HTML head with styles\n2. UI overlay (title, move name)\n3. Three.js scripts\n4. Main JavaScript with all the scene setup and animation\n\nLet me write it now.\n\nWait, one more thing. The user asked for \"ảnh mẫu siêu thực\" which means \"hyper-realistic sample image\". So maybe they want a still image, not an animation? But they also said \"đang nhảy hiphop gồm nhiều động tác khó\" (dancing hip-hop with many difficult moves), which suggests animation.\n\nI think an animation that cycles through the moves is what they want. They can take screenshots if they want a still image. Let me make the animation impressive.\n\nAlso, \"siêu thực\" can mean \"hyper-realistic\" or \"surreal\". In Vietnamese, it usually means \"hyper-realistic\" in this context. So I'll focus on realistic rendering.\n\nOK let me finalize the code now. I'll write it out.\n\nLet me think about the character once more. I want it to look like a B-Boy/B-Girl. Key elements:\n- Baggy clothes\n- Cap or beanie\n- Sneakers\n- Attitude\n\nI have most of these. Let me make sure the proportions look right. The character is about 1.7 units tall in the scene, which represents 1.7m. That's realistic.\n\nOK let me write the final code.\n\nActually, I realize I should also add a \"shadows on the ground\" effect for the dancer. The spotlight should cast a shadow of the dancer on the stage. I have shadow casting enabled on the meshes and the spotlight, and shadow receiving on the stage. So this should work.\n\nLet me also add a subtle \"rim light\" effect to highlight the dancer. I can do this with a directional light or a spotlight from behind.\n\n```javascript\nconst rimLight = new THREE.SpotLight(0x00ffff, 1.5, 15, Math.PI/3, 0.5, 1);\nrimLight.position.set(-3, 4, -5);\nrimLight.target.position.set(0, 1, 0);\nscene.add(rimLight, rimLight.target);\n```\n\nOK let me finalize. I'll write the complete HTML now.\n\nLet me also think about the floor texture. I want it to look like a dance floor or a street performance area. Let me add some lines and patterns to the texture.\n\nOK I've been going back and forth. Let me just write the final code. I'll make decisions as I go.\n\nHere's the final HTML:\n\n[Writing the complete HTML now...]\n\nLet me also consider that in the current code, the `armL.shoulder.rotation.z` controls the arm to swing to the side. For the top rock pose, the left arm is at z=0.5 which swings it slightly back, and the upper arm has z=-0.7 which brings it forward and out. The elbow has z=-1.2 which bends the elbow.\n\nWait, I need to think about the axis conventions. In Three.js:\n- X axis: right (red)\n- Y axis: up (green)\n- Z axis: forward (blue)\n\nFor a character facing forward (along -Z), the X axis is left-right, Y is up-down, Z is forward-backward.\n\nFor the shoulder joint:\n- rotation.x: rotates the arm forward/backward (pitch)\n- rotation.y: rotates the arm around the body (rotation)\n- rotation.z: swings the arm up/down to the side (roll)\n\nFor the arm to be raised to the side, we want rotation.z = PI/2 (90 degrees) for the shoulder, and then the upper arm group can be rotated to point up.\n\nWait, the shoulder is at the top of the torso, and the upper arm hangs down from it. The upper arm mesh is at y=-0.16 in the upper arm group. So the upper arm group is the pivot.\n\nIf I want the arm to be raised straight up, I need to rotate the upper arm group by PI around Z (so the arm points up instead of down). But that would also flip the elbow.\n\nActually, let me think again. The upper arm group is at the shoulder position. The upper arm mesh is at y=-0.16, meaning it extends downward. If I rotate the upper arm group by PI around Z, the arm would extend upward, and the elbow would be at y=0.32 (above the shoulder).\n\nSo for the \"Ovation\" pose where both arms are raised up, I want:\n- shoulder.rotation.x = 0\n- shoulder.rotation.z = 0 (no swing)\n- upperArm.rotation.x = 0\n- upperArm.rotation.z = PI (or maybe -PI?)\n\nLet me check the sign. If the arm is hanging down (y=-0.16) and I rotate around Z by PI, the arm would go to y=+0.16, which is upward. Yes.\n\nBut wait, the elbow group is at y=-0.32 in the upper arm group. After rotation, it would be at y=+0.32, above the shoulder. The forearm would then extend down from there. But that would make the elbow joint above the hand, which is correct for a raised arm.\n\nHmm, but for a natural raised arm pose, the elbow should be bent slightly. So:\n- upperArm.rotation.z = PI + a bit (so the arm goes up and slightly back)\n- elbow.rotation.x or z = small angle to bend the elbow\n\nActually, for both arms raised straight up:\n- shoulder rotation: 0\n- upperArm rotation z: PI (so arm points up)\n- elbow rotation: 0 (straight arm)\n- forearm rotation: 0\n\nBut then the hands would be at the top. If I want the hands to be visible, I need to consider the camera angle.\n\nFor the ovation pose, let me set:\n```javascript\npose_ovation.armL.shoulder = [0, 0, 0.1];\npose_ovation.armL.upper = [0, 0, -Math.PI + 0.2]; // Arm goes up and slightly back\npose_ovation.armL.elbow = [0, 0, -0.3]; // Slight bend\npose_ovation.armR.shoulder = [0, 0, -0.1];\npose_ovation.armR.upper = [0, 0, Math.PI - 0.2];\npose_ovation.armR.elbow = [0, 0, 0.3];\n```\n\nWait, the upper arm rotation z should be PI to make the arm go up. Let me reconsider.\n\nIf the upper arm mesh is at y=-0.16 (pointing down), and I rotate the group by PI around Z, the mesh is now at y=+0.16 (pointing up). That's what I want.\n\nBut the sign of the rotation depends on the coordinate system. In Three.js, rotation around Z by positive angle is counter-clockwise when looking from +Z. So:\n- rotation.z = PI/2: arm points to +X\n- rotation.z = PI: arm points to -Y (up if Y is up)\n- rotation.z = -PI/2: arm points to -X\n- rotation.z = -PI: same as PI\n\nFor the left arm (at x=-0.28), to raise it up:\n- shoulder.rotation.z = 0 (no swing to the side)\n- upperArm.rotation.z = PI (arm goes from pointing down to pointing up)\n\nBut wait, the left arm is at negative X. If I rotate by PI around Z, the arm would go from pointing down (along -Y) to pointing up (along +Y), regardless of the X position. Yes, that should work.\n\nFor both arms raised, both upper arms need rotation.z = PI (or -PI, same thing).\n\nLet me update the ovation pose:\n```javascript\npose_ovation.armL.shoulder = [0, 0, 0.1];\npose_ovation.armL.upper = [0, 0, Math.PI - 0.2];\npose_ovation.armL.elbow = [0, 0, -0.3];\npose_ovation.armR.shoulder = [0, 0, -0.1];\npose_ovation.armR.upper = [0, 0, -Math.PI + 0.2];\npose_ovation.armR.elbow = [0, 0, 0.3];\n```\n\nHmm, but the sign of the rotation for left and right arms should be opposite to make them symmetric. Let me think...\n\nActually, for the left arm at x=-0.28, if I rotate the upper arm by PI around Z, the arm goes up. For the right arm at x=+0.28, if I rotate the upper arm by PI around Z, the arm also goes up. So both should be PI (or both -PI).\n\nWait, but if both are PI, then the elbows would both be at the same X position (positive Y, but X depends on the shoulder position). Let me think again.\n\nLeft shoulder at (-0.28, 0.6, 0). Upper arm extends to (-0.28, 0.6-0.16, 0) = (-0.28, 0.44, 0). After rotation Z=PI, the upper arm would extend to (-0.28, 0.6+0.16, 0) = (-0.28, 0.76, 0). The elbow at (-0.28, 0.6-0.32, 0) = (-0.28, 0.28, 0) would go to (-0.28, 0.6+0.32, 0) = (-0.28, 0.92, 0). So the left arm goes straight up.\n\nRight shoulder at (+0.28, 0.6, 0). After rotation Z=PI, the upper arm goes to (+0.28, 0.76, 0), elbow to (+0.28, 0.92, 0). So right arm also goes straight up.\n\nOK so both arms use rotation.z = PI to go up. Good.\n\nBut wait, if I want the arms to be slightly out to the sides (like a V shape), I'd need to add some rotation.z to the shoulder as well. For the left arm, shoulder.rotation.z = -0.2 would swing it out to the left. For the right arm, shoulder.rotation.z = +0.2 would swing it out to the right.\n\nLet me update:\n```javascript\npose_ovation.armL.shoulder = [0, 0, -0.2]; // Swing out to left\npose_ovation.armL.upper = [0, 0, Math.PI]; // Arm up\npose_ovation.armL.elbow = [0, 0, -0.2]; // Slight bend\npose_ovation.armR.shoulder = [0, 0, 0.2]; // Swing out to right\npose_ovation.armR.upper = [0, 0, -Math.PI]; // Arm up\npose_ovation.armR.elbow = [0, 0, 0.2];\n```\n\nOK that makes more sense.\n\nFor the top rock pose, I want one arm up and one to the side. Let me reconsider.\n\nActually, in hip-hop top rock, the dancer usually has both arms active - one up, one out, or both in a rhythmic motion. Let me just make a confident stance with arms in different positions.\n\nFor pose_topRock:\n- Left arm: raised up and out, elbow bent\n- Right arm: out to the side, slightly bent\n\n```javascript\npose_topRock.armL.shoulder = [0, 0, -0.3]; // Slight swing out\npose_topRock.armL.upper = [0, 0, -Math.PI + 0.5]; // Arm up and out\npose_topRock.armL.elbow = [0, 0, -0.5]; // Bent\npose_topRock.armR.shoulder = [0, 0, 0.5]; // Swing out to side\npose_topRock.armR.upper = [0, 0, -Math.PI/2]; // Arm to the side\npose_topRock.armR.elbow = [0, 0, -0.4]; // Bent\n```\n\nHmm, let me think more carefully. The upper arm group rotation is what points the arm in a direction. If upperArm.rotation.z = -PI/2, the arm points to -X (left). If upperArm.rotation.z = PI, the arm points up.\n\nFor the right arm to point to the right (+X), I need upperArm.rotation.z = PI/2.\nFor the left arm to point to the left (-X), I need upperArm.rotation.z = -PI/2.\n\nFor the right arm to point up, upperArm.rotation.z = -PI (or PI).\nFor the left arm to point up, upperArm.rotation.z = PI (or -PI).\n\nWait, let me reconsider. The upper arm mesh is at y=-0.16 in the upper arm group. So it extends downward. The direction from the shoulder to the elbow is (0, -0.32, 0) in the upper arm group's local space.\n\nIf I rotate the upper arm group by angle θ around Z, the direction becomes (sin(θ), -cos(θ), 0). Wait, let me redo this.\n\nOriginal direction: (0, -1, 0) (downward).\nAfter rotation by θ around Z: (sin(θ), -cos(θ), 0).\n\nFor the arm to point to the right (+X): sin(θ)=1, -cos(θ)=0, so θ = PI/2.\nFor the arm to point to the left (-X): sin(θ)=-1, -cos(θ)=0, so θ = -PI/2.\nFor the arm to point up (+Y): sin(θ)=0, -cos(θ)=1, so θ = PI.\nFor the arm to point down (-Y): sin(θ)=0, -cos(θ)=-1, so θ = 0.\n\nOK so:\n- Right arm pointing right: upperArm.rotation.z = PI/2\n- Right arm pointing up: upperArm.rotation.z = PI (or -PI)\n- Left arm pointing left: upperArm.rotation.z = -PI/2\n- Left arm pointing up: upperArm.rotation.z = PI (or -PI)\n\nWait, that doesn't seem right. Let me think again.\n\nIf I rotate around Z by PI, the vector (0, -1, 0) becomes (0, 1, 0). Yes, that's up. So upperArm.rotation.z = PI makes the arm point up.\n\nIf I rotate around Z by -PI/2, the vector (0, -1, 0) becomes (-1, 0, 0). That's left. So upperArm.rotation.z = -PI/2 makes the arm point left. But this is for the right arm group. The right shoulder is at +X. If the arm points left, it crosses the body. That's not what we want.\n\nFor the right arm to point to the right (+X), the vector should be (1, 0, 0). That's rotation by +PI/2 around Z.\n\nFor the left arm to point to the left (-X), the vector should be (-1, 0, 0). That's rotation by -PI/2 around Z.\n\nOK so:\n- Right arm out to side: upperArm.rotation.z = PI/2 (points right)\n- Left arm out to side: upperArm.rotation.z = -PI/2 (points left)\n- Both arms up: both upperArm.rotation.z = PI\n\nBut wait, I need to think about the shoulder rotation as well. The shoulder rotation can add more pose variety.\n\nFor the top rock pose, let me have:\n- Left arm: up and out, elbow bent (like a \"raise the roof\" gesture)\n- Right arm: out to the side, hand up\n\n```javascript\n// Left arm up and out\npose_topRock.armL.shoulder = [0, 0, 0]; // No shoulder rotation\npose_topRock.armL.upper = [0, 0, -2.5]; // Rotate so arm points up-left (between up and left)\npose_topRock.armL.elbow = [0, 0, -0.8]; // Bent elbow\n\n// Right arm out to side\npose_topRock.armR.shoulder = [0, 0, 0];\npose_topRock.armR.upper = [0, 0, -1.2]; // Rotate so arm points to the right and slightly up\npose_topRock.armR.elbow = [0, 0, -0.5];\n```\n\nWait, I had different signs. Let me re-examine.\n\nActually, I think I had the signs confused. Let me just experiment with values and see what looks right. The key is that the arm should extend in a reasonable direction.\n\nFor the elbow rotation: the elbow group is at the bottom of the upper arm. The forearm extends from there. If I rotate the elbow group around Z, the forearm swings.\n\nIf upper arm is pointing up (rotation.z = PI), and I want the forearm to point to the left, I need to rotate the elbow group by -PI/2 around Z (so the forearm goes from pointing down to pointing left). Wait, but the forearm is at y=-0.15 in the elbow group, so it points down. After rotation by -PI/2 around Z, the forearm would point to... let me calculate.\n\nOriginal forearm direction in elbow group: (0, -1, 0).\nAfter rotation by -PI/2 around Z: (-1, 0, 0) (left).\n\nBut wait, this is in the local space of the elbow group, which is already rotated by the upper arm rotation. So in world space, the forearm direction depends on both rotations.\n\nOK this is getting complex. Let me just use values that look reasonable and adjust if needed.\n\nFor my poses, I'll use:\n- shoulder.rotation.z = small values to swing arm left/right\n- upperArm.rotation.z = main direction of upper arm\n- elbow.rotation.z = bend angle of elbow\n\nFor the \"both arms up\" ovation pose:\n- shoulder.rotation.z = 0\n- upperArm.rotation.z = PI (or -PI, same thing for 180 degrees)\n- elbow.rotation.z = 0 (straight) or small bend\n\nWait, but with upperArm.rotation.z = PI, the arm points up. The elbow is at the top of the upper arm. The forearm hangs down from the elbow. So the hand is at the top. That's the correct \"hands up\" pose.\n\nBut the elbow group is at y=-0.32 in the upper arm group. After upperArm.rotation.z = PI, the elbow group is at y=+0.32 in world space (relative to shoulder). The forearm group is a child of elbow, at y=-0.15 in elbow's local space. After elbow's rotation (which we set to 0 for now), the forearm is at y=+0.32 + 0*cos(0) + (-0.15)*cos(0) = ... wait, this is getting confusing.\n\nLet me just trust the math and set reasonable values. I'll output the code and it should look OK.\n\nLet me also add some \"depth\" to the poses by varying the X rotation (forward/backward).\n\nOK, let me just write the final code and stop overthinking.\n\nActually, let me simplify by using a function to compute the rotations. But no, just direct values should work.\n\nLet me also consider that the dancer should be facing the camera initially, but the camera is orbiting. So the dancer is always facing the camera? No, the dancer is at the origin, and the camera orbits around. So from the camera's view, the dancer is seen from different angles.\n\nI could also have the dancer rotate slightly to face the camera, or just let the camera orbit and show all sides.\n\nFor simplicity, let me just have the camera orbit and show the dancer from all angles.\n\nOK final code time. Let me write it out.\n\nI'll use the following pose values that should look good:\n\nPose 1: Top Rock (standing, arms active)\nPose 2: Six Step (low crouch)\nPose 3: Baby Freeze (one hand on ground)\nPose 4: Air Flare (body in air, legs in V)\nPose 5: Back Spin (body on side, legs in air)\nPose 6: Handstand (body upside down)\nPose 7: Standing Ovation (arms raised)\n\nOK let me write the code.\n\nI realize this is taking a long time. Let me just output the code and be done with it. I'll make sure it works.\n\nLet me also add the user instruction. The user said \"dùng three.js tạo ảnh mẫu siêu thực đang nhảy hiphop gồm nhiều động tác khó.\" which means \"use three.js to create a hyper-realistic sample image of someone doing hip-hop dance with many difficult moves.\"\n\nSo the response should be the HTML code. Let me output it.\n\nActually, the user wants the code in an iframe. So I should output the full HTML. Let me do that.\n\nI'll make sure the code is complete and self-contained. No external resources except the Three.js CDN scripts.\n\nLet me finalize and output now.","reasoning_details":[{"type":"reasoning.text","text":"The user wants a Three.js example of a hyper-realistic image of someone doing hip-hop dance with multiple difficult moves. Since this needs to be in an iframe, I need to provide complete HTML with Three.js.\n\nLet me create a detailed 3D scene with:\n1. A humanoid figure performing hip-hop dance\n2. Multiple dance poses/keyframes that animate\n3. Realistic lighting and shadows\n4. Urban environment (street, building, speakers)\n5. Particle effects for atmosphere\n\nI'll use Three.js to create a stylized 3D character with simple geometry but realistic lighting, textures, and post-processing effects. Let me make it visually impressive.\n\nI'll structure the scene:\n- Ground plane with texture\n- Background buildings\n- A dancing figure made of multiple parts (head, torso, arms, legs)\n- Animation of hip-hop dance moves (e.g., top rock, footwork, freezes, power moves)\n- Stage lighting\n- Particles for dust/light effects\n- Music speakers\n- Post-processing for bloom effect\n\nLet me code this:\n\n```html\n\n\n\nHip-Hop Dance\n\n\n\n

Hip-Hop Dance Animation

HIP-HOP

BREAK THE GRAVITY

BREAKDANCE

POWER MOVES

Hip-Hop Power

Break The Limits

3D Animation

WebGL not supported

';\n return;\n }\n \n // Resize handler\n window.addEventListener('resize', () => {\n camera.aspect = window.innerWidth / window.innerHeight;\n camera.updateProjectionMatrix();\n renderer.setSize(window.innerWidth, window.innerHeight);\n if (composer) composer.setSize(window.innerWidth, window.innerHeight);\n });\n \n // ==== ENVIRONMENT ====\n \n // Create floor texture\n function createFloorTexture() {\n const c = document.createElement('canvas');\n c.width = c.height = 512;\n const ctx = c.getContext('2d');\n // Dark base\n ctx.fillStyle = '#1a1a1a';\n ctx.fillRect(0, 0, 512, 512);\n // Grid\n ctx.strokeStyle = '#2a2a2a';\n ctx.lineWidth = 2;\n for (let i = 0; i <= 512; i += 64) {\n ctx.beginPath();\n ctx.moveTo(i, 0); ctx.lineTo(i, 512);\n ctx.moveTo(0, i); ctx.lineTo(512, i);\n ctx.stroke();\n }\n // Highlight\n ctx.fillStyle = 'rgba(255, 0, 100, 0.1)';\n ctx.fillRect(0, 0, 512, 512);\n // Some random lines\n ctx.strokeStyle = 'rgba(100, 200, 255, 0.2)';\n ctx.lineWidth = 4;\n for (let i = 0; i < 10; i++) {\n ctx.beginPath();\n ctx.moveTo(Math.random()*512, Math.random()*512);\n ctx.lineTo(Math.random()*512, Math.random()*512);\n ctx.stroke();\n }\n return new THREE.CanvasTexture(c);\n }\n \n // Stage (main floor)\n const stageMat = new THREE.MeshStandardMaterial({\n map: createFloorTexture(),\n roughness: 0.3,\n metalness: 0.7\n });\n const stage = new THREE.Mesh(new THREE.CircleGeometry(4, 64), stageMat);\n stage.rotation.x = -Math.PI / 2;\n stage.receiveShadow = true;\n scene.add(stage);\n \n // Outer ground\n const outerGround = new THREE.Mesh(\n new THREE.PlaneGeometry(200, 200),\n new THREE.MeshStandardMaterial({ color: 0x05050a, roughness: 0.9, metalness: 0.1 })\n );\n outerGround.rotation.x = -Math.PI / 2;\n outerGround.position.y = -0.01;\n outerGround.receiveShadow = true;\n scene.add(outerGround);\n \n // City buildings in distance\n function createCity() {\n const group = new THREE.Group();\n for (let i = 0; i < 30; i++) {\n const angle = (i / 30) * Math.PI * 2 + Math.random() * 0.1;\n const r = 25 + Math.random() * 15;\n const h = 4 + Math.random() * 18;\n const w = 2 + Math.random() * 3;\n const d = 2 + Math.random() * 3;\n \n // Color with slight blue tint\n const colorVal = 0.05 + Math.random() * 0.08;\n const color = new THREE.Color(colorVal, colorVal, colorVal * 1.5);\n \n const geo = new THREE.BoxGeometry(w, h, d);\n const mat = new THREE.MeshStandardMaterial({\n color: color,\n roughness: 0.7,\n metalness: 0.3,\n emissive: new THREE.Color(color).multiplyScalar(0.05)\n });\n const building = new THREE.Mesh(geo, mat);\n building.position.set(Math.cos(angle) * r, h/2, Math.sin(angle) * r);\n building.castShadow = false;\n building.receiveShadow = false;\n group.add(building);\n \n // Windows\n if (Math.random() > 0.3) {\n const wCanvas = document.createElement('canvas');\n wCanvas.width = 64; wCanvas.height = 128;\n const wctx = wCanvas.getContext('2d');\n wctx.fillStyle = '#000';\n wctx.fillRect(0, 0, 64, 128);\n for (let y = 0; y < 8; y++) {\n for (let x = 0; x < 3; x++) {\n if (Math.random() > 0.4) {\n const hue = 30 + Math.random() * 30;\n const light = 30 + Math.random() * 50;\n wctx.fillStyle = `hsl(${hue}, 80%, ${light}%)`;\n wctx.fillRect(x * 20 + 3, y * 14 + 3, 14, 10);\n }\n }\n }\n const wtex = new THREE.CanvasTexture(wCanvas);\n const winMat = new THREE.MeshBasicMaterial({ map: wtex });\n const windows = new THREE.Mesh(\n new THREE.PlaneGeometry(w * 0.8, h * 0.8),\n winMat\n );\n windows.position.copy(building.position);\n windows.position.y = h/2;\n windows.lookAt(0, h/2, 0);\n group.add(windows);\n }\n }\n return group;\n }\n scene.add(createCity());\n \n // ==== LIGHTS ====\n const ambient = new THREE.AmbientLight(0x202045, 0.4);\n scene.add(ambient);\n \n // Main spot from above\n const mainSpot = new THREE.SpotLight(0xffffff, 4, 25, Math.PI/4, 0.4, 1);\n mainSpot.position.set(0, 10, 1);\n mainSpot.target.position.set(0, 0, 0);\n mainSpot.castShadow = true;\n mainSpot.shadow.mapSize.set(2048, 2048);\n mainSpot.shadow.camera.near = 1;\n mainSpot.shadow.camera.far = 20;\n mainSpot.shadow.bias = -0.0005;\n scene.add(mainSpot, mainSpot.target);\n \n // Visible spotlight cone\n const spotCone = new THREE.Mesh(\n new THREE.ConeGeometry(2, 8, 32, 1, true),\n new THREE.MeshBasicMaterial({\n color: 0xffffff,\n transparent: true,\n opacity: 0.05,\n side: THREE.DoubleSide,\n depthWrite: false,\n blending: THREE.AdditiveBlending\n })\n );\n spotCone.position.set(0, 6, 0.5);\n scene.add(spotCone);\n \n // Colored stage lights\n const stageLights = [];\n const colors = [0xff0066, 0x00ffff, 0xff6600, 0x8800ff, 0x00ff66];\n for (let i = 0; i < 5; i++) {\n const angle = (i / 5) * Math.PI * 2;\n const light = new THREE.PointLight(colors[i], 2, 12);\n light.position.set(Math.cos(angle) * 5, 1.5 + Math.random() * 2, Math.sin(angle) * 5);\n scene.add(light);\n stageLights.push(light);\n \n // Visible light sphere\n const sphere = new THREE.Mesh(\n new THREE.SphereGeometry(0.1, 8, 8),\n new THREE.MeshBasicMaterial({ color: colors[i] })\n );\n sphere.position.copy(light.position);\n scene.add(sphere);\n }\n \n // ==== SPEAKERS ====\n function createSpeaker(x, z, rotation) {\n const g = new THREE.Group();\n const box = new THREE.Mesh(\n new THREE.BoxGeometry(0.8, 1.5, 0.7),\n new THREE.MeshStandardMaterial({ color: 0x111111, roughness: 0.5, metalness: 0.5 })\n );\n box.position.y = 0.75;\n box.castShadow = true;\n box.receiveShadow = true;\n g.add(box);\n \n // Speaker cones\n const cone1 = new THREE.Mesh(\n new THREE.CircleGeometry(0.25, 32),\n new THREE.MeshStandardMaterial({ color: 0x222222, roughness: 0.5, metalness: 0.3 })\n );\n cone1.position.set(0, 0.5, 0.36);\n g.add(cone1);\n const cone2 = new THREE.Mesh(\n new THREE.CircleGeometry(0.15, 32),\n new THREE.MeshStandardMaterial({ color: 0x1a1a1a, roughness: 0.4, metalness: 0.3 })\n );\n cone2.position.set(0, 1.0, 0.36);\n g.add(cone2);\n \n // Stand\n const stand = new THREE.Mesh(\n new THREE.CylinderGeometry(0.05, 0.08, 0.3, 8),\n new THREE.MeshStandardMaterial({ color: 0x333333, metalness: 0.6, roughness: 0.4 })\n );\n stand.position.y = 0.15;\n stand.castShadow = true;\n g.add(stand);\n \n g.position.set(x, 0, z);\n g.rotation.y = rotation;\n scene.add(g);\n return g;\n }\n \n const speakerL = createSpeaker(-3, 2, -Math.PI/4);\n const speakerR = createSpeaker(3, 2, Math.PI/4);\n \n // ==== CHARACTER ====\n // Materials\n const skinMat = new THREE.MeshStandardMaterial({ \n color: 0xa87b5a, \n roughness: 0.5, \n metalness: 0.05,\n emissive: 0x331a0a,\n emissiveIntensity: 0.1\n });\n const shirtMat = new THREE.MeshStandardMaterial({ \n color: 0xee1144, \n roughness: 0.85, \n metalness: 0.05 \n });\n const pantsMat = new THREE.MeshStandardMaterial({ \n color: 0x0a0a0a, \n roughness: 0.9, \n metalness: 0.05 \n });\n const shoeMat = new THREE.MeshStandardMaterial({ \n color: 0xffffff, \n roughness: 0.3, \n metalness: 0.4 \n });\n const hairMat = new THREE.MeshStandardMaterial({ color: 0x111111, roughness: 0.9 });\n const capMat = new THREE.MeshStandardMaterial({ color: 0x222222, roughness: 0.7, metalness: 0.1 });\n const headbandMat = new THREE.MeshStandardMaterial({ \n color: 0xffcc00, \n roughness: 0.6, \n metalness: 0.2,\n emissive: 0x442200,\n emissiveIntensity: 0.3\n });\n \n // Dancer group\n const dancer = new THREE.Group();\n dancer.position.y = 0;\n scene.add(dancer);\n \n // === Character skeleton ===\n function createLimb(geometry, material, parent) {\n const mesh = new THREE.Mesh(geometry, material);\n mesh.castShadow = true;\n parent.add(mesh);\n return mesh;\n }\n \n // Hip root\n const hipRoot = new THREE.Group();\n hipRoot.position.y = 1.0; // Hip height\n dancer.add(hipRoot);\n \n // Torso group\n const torso = new THREE.Group();\n hipRoot.add(torso);\n \n // Torso mesh\n createLimb(new THREE.CylinderGeometry(0.24, 0.20, 0.7, 16), shirtMat, torso).position.y = 0.35;\n \n // Add chest detail\n const chest = createLimb(new THREE.BoxGeometry(0.45, 0.3, 0.25), shirtMat, torso);\n chest.position.y = 0.5;\n chest.position.z = 0.05;\n \n // Neck\n const neck = new THREE.Group();\n neck.position.y = 0.7;\n torso.add(neck);\n createLimb(new THREE.CylinderGeometry(0.07, 0.09, 0.12, 12), skinMat, neck).position.y = 0.06;\n \n // Head\n const head = new THREE.Group();\n head.position.y = 0.18;\n neck.add(head);\n const headMesh = createLimb(new THREE.SphereGeometry(0.16, 24, 24), skinMat, head);\n headMesh.position.y = 0.04;\n \n // Hair (afro / cap)\n const hair = createLimb(\n new THREE.SphereGeometry(0.17, 16, 16, 0, Math.PI*2, 0, Math.PI*0.55),\n hairMat,\n head\n );\n hair.position.y = 0.05;\n \n // Cap\n const cap = createLimb(\n new THREE.SphereGeometry(0.165, 16, 16, 0, Math.PI*2, 0, Math.PI*0.55),\n capMat,\n head\n );\n cap.position.y = 0.07;\n cap.scale.y = 0.9;\n \n // Cap brim\n const brim = createLimb(\n new THREE.CylinderGeometry(0.2, 0.2, 0.015, 16, 1, false, 0, Math.PI),\n capMat,\n head\n );\n brim.rotation.x = -Math.PI/2;\n brim.rotation.z = -Math.PI/2;\n brim.position.set(0, 0.07, 0.18);\n \n // Headband\n const headband = createLimb(\n new THREE.TorusGeometry(0.165, 0.025, 8, 24),\n headbandMat,\n head\n );\n headband.position.y = 0.04;\n headband.rotation.x = Math.PI/2;\n \n // Sunglasses\n const glasses = createLimb(\n new THREE.BoxGeometry(0.25, 0.04, 0.02),\n new THREE.MeshStandardMaterial({ color: 0x000000, roughness: 0.2, metalness: 0.8 }),\n head\n );\n glasses.position.set(0, 0.05, 0.14);\n \n // Ears / headphones... let's skip for simplicity\n \n // ==== ARMS ====\n function createArm(side) {\n const sign = side === 'L' ? -1 : 1;\n \n const shoulder = new THREE.Group();\n shoulder.position.set(sign * 0.28, 0.6, 0);\n torso.add(shoulder);\n \n const upperArm = new THREE.Group();\n shoulder.add(upperArm);\n \n createLimb(\n new THREE.CylinderGeometry(0.07, 0.075, 0.32, 12),\n shirtMat,\n upperArm\n ).position.y = -0.16;\n \n const elbow = new THREE.Group();\n elbow.position.y = -0.32;\n upperArm.add(elbow);\n \n const forearm = new THREE.Group();\n elbow.add(forearm);\n \n createLimb(\n new THREE.CylinderGeometry(0.055, 0.065, 0.30, 12),\n skinMat,\n forearm\n ).position.y = -0.15;\n \n const wrist = new THREE.Group();\n wrist.position.y = -0.30;\n forearm.add(wrist);\n \n const hand = new THREE.Group();\n wrist.add(hand);\n \n // Fist\n const fist = createLimb(\n new THREE.SphereGeometry(0.08, 12, 12),\n skinMat,\n hand\n );\n fist.scale.set(1, 0.8, 1.3);\n \n return { shoulder, upperArm, elbow, forearm, wrist, hand };\n }\n \n const armL = createArm('L');\n const armR = createArm('R');\n \n // ==== LEGS ====\n function createLeg(side) {\n const sign = side === 'L' ? -1 : 1;\n \n const hipJoint = new THREE.Group();\n hipJoint.position.set(sign * 0.12, 0, 0);\n hipRoot.add(hipJoint);\n \n const thigh = new THREE.Group();\n hipJoint.add(thigh);\n \n createLimb(\n new THREE.CylinderGeometry(0.095, 0.08, 0.42, 12),\n pantsMat,\n thigh\n ).position.y = -0.21;\n \n const knee = new THREE.Group();\n knee.position.y = -0.42;\n thigh.add(knee);\n \n const calf = new THREE.Group();\n knee.add(calf);\n \n createLimb(\n new THREE.CylinderGeometry(0.075, 0.09, 0.42, 12),\n pantsMat,\n calf\n ).position.y = -0.21;\n \n const ankle = new THREE.Group();\n ankle.position.y = -0.42;\n calf.add(ankle);\n \n const foot = new THREE.Group();\n ankle.add(foot);\n \n createLimb(\n new THREE.BoxGeometry(0.1, 0.07, 0.24),\n shoeMat,\n foot\n ).position.set(0, -0.04, 0.08);\n \n return { hipJoint, thigh, knee, calf, ankle, foot };\n }\n \n const legL = createLeg('L');\n const legR = createLeg('R');\n \n // ==== POSES ====\n // Each joint has [rotX, rotY, rotZ]\n // hipPos is [x, y, z] for the hip root\n // Some poses have hip rotation\n \n function newPose() {\n return {\n hipPos: [0, 1.0, 0],\n hip: [0, 0, 0],\n torso: [0, 0, 0],\n neck: [0, 0, 0],\n head: [0, 0, 0],\n armL: { shoulder: [0,0,0], upper: [0,0,0], elbow: [0,0,0], forearm: [0,0,0] },\n armR: { shoulder: [0,0,0], upper: [0,0,0], elbow: [0,0,0], forearm: [0,0,0] },\n legL: { hip: [0,0,0], thigh: [0,0,0], knee: [0,0,0], ankle: [0,0,0] },\n legR: { hip: [0,0,0], thigh: [0,0,0], knee: [0,0,0], ankle: [0,0,0] }\n };\n }\n \n // 1. Top Rock - confident stance\n const pose_topRock = newPose();\n pose_topRock.hip = [0, 0.2, 0];\n pose_topRock.torso = [0.05, 0.3, -0.15];\n pose_topRock.neck = [0, -0.2, 0];\n pose_topRock.head = [0, 0.1, 0];\n pose_topRock.armL.shoulder = [0, 0, 0.5];\n pose_topRock.armL.upper = [-0.3, 0, -0.7];\n pose_topRock.armL.elbow = [0, 0, -1.2];\n pose_topRock.armR.shoulder = [0, 0, -0.6];\n pose_topRock.armR.upper = [-0.4, 0, 1.0];\n pose_topRock.armR.elbow = [0, 0, -0.4];\n pose_topRock.legL.hip = [0, 0, 0.1];\n pose_topRock.legL.thigh = [-0.1, 0.1, 0];\n pose_topRock.legL.knee = [0.1, 0, 0];\n pose_topRock.legR.hip = [0, 0, -0.1];\n pose_topRock.legR.thigh = [-0.2, -0.1, 0];\n pose_topRock.legR.knee = [0.1, 0, 0];\n \n // 2. Six Step - low crouch\n const pose_sixStep = newPose();\n pose_sixStep.hipPos = [0, 0.4, 0];\n pose_sixStep.hip = [0, 0, 0];\n pose_sixStep.torso = [-0.3, 0.3, 0.2];\n pose_sixStep.neck = [0.1, -0.2, 0];\n pose_sixStep.head = [0, 0, 0];\n pose_sixStep.armL.shoulder = [0.5, 0, 0.4];\n pose_sixStep.armL.upper = [0, 0, -1.4];\n pose_sixStep.armL.elbow = [0, 0, -0.3];\n pose_sixStep.armR.shoulder = [0.3, 0, -0.4];\n pose_sixStep.armR.upper = [0.2, 0, -0.9];\n pose_sixStep.armR.elbow = [0, 0, -0.5];\n pose_sixStep.legL.hip = [-0.5, 0, 0];\n pose_sixStep.legL.thigh = [0.6, 0, 0];\n pose_sixStep.legL.knee = [-0.4, 0, 0];\n pose_sixStep.legL.ankle = [0.4, 0, 0];\n pose_sixStep.legR.hip = [-0.3, 0, 0];\n pose_sixStep.legR.thigh = [0.4, 0, 0];\n pose_sixStep.legR.knee = [-0.3, 0, 0];\n pose_sixStep.legR.ankle = [0.3, 0, 0];\n \n // 3. Baby Freeze - one hand on ground\n const pose_babyFreeze = newPose();\n pose_babyFreeze.hipPos = [0, 0.5, 0];\n pose_babyFreeze.hip = [0, 0, 0.4];\n pose_babyFreeze.torso = [0, 0, 0.3];\n pose_babyFreeze.neck = [-0.2, 0, -0.2];\n pose_babyFreeze.head = [0, 0, 0];\n pose_babyFreeze.armL.shoulder = [0, 0, 1.5];\n pose_babyFreeze.armL.upper = [0, 0, -1.5];\n pose_babyFreeze.armL.elbow = [0, 0, 0];\n pose_babyFreeze.armR.shoulder = [0, 0, 0.3];\n pose_babyFreeze.armR.upper = [0, 0, -0.3];\n pose_babyFreeze.armR.elbow = [0, 0, -1.5];\n pose_babyFreeze.legL.hip = [0, 0, 0];\n pose_babyFreeze.legL.thigh = [-0.7, 0, 0];\n pose_babyFreeze.legL.knee = [0, 0, 0];\n pose_babyFreeze.legL.ankle = [0.3, 0, 0];\n pose_babyFreeze.legR.hip = [0, 0, 0];\n pose_babyFreeze.legR.thigh = [-1.2, 0, 0.3];\n pose_babyFreeze.legR.knee = [0, 0, 0];\n pose_babyFreeze.legR.ankle = [0.3, 0, 0];\n \n // 4. Air Flare - body in air\n const pose_airFlare = newPose();\n pose_airFlare.hipPos = [0, 1.5, 0];\n pose_airFlare.hip = [0, 0, 0];\n pose_airFlare.torso = [-0.3, 0, 0];\n pose_airFlare.neck = [0.2, 0, 0];\n pose_airFlare.head = [0, 0, 0];\n pose_airFlare.armL.shoulder = [0, 0, 0.3];\n pose_airFlare.armL.upper = [0.5, 0, -1.3];\n pose_airFlare.armL.elbow = [0, 0, -0.2];\n pose_airFlare.armR.shoulder = [0, 0, -0.3];\n pose_airFlare.armR.upper = [0.5, 0, 1.3];\n pose_airFlare.armR.elbow = [0, 0, 0.2];\n pose_airFlare.legL.hip = [0, 0, 0.1];\n pose_airFlare.legL.thigh = [0.5, 0.3, 0];\n pose_airFlare.legL.knee = [-0.4, 0, 0];\n pose_airFlare.legR.hip = [0, 0, -0.1];\n pose_airFlare.legR.thigh = [0.5, -0.3, 0];\n pose_airFlare.legR.knee = [-0.4, 0, 0];\n \n // 5. Windmill - body sideways\n const pose_windmill = newPose();\n pose_windmill.hipPos = [0, 0.3, 0];\n pose_windmill.hip = [Math.PI/2, 0, 0];\n pose_windmill.torso = [0, 0, 0];\n pose_windmill.neck = [0, 0, 0];\n pose_windmill.head = [0, 0, 0];\n pose_windmill.armL.shoulder = [0, 0, 1.4];\n pose_windmill.armL.upper = [0, 0, -1.4];\n pose_windmill.armL.elbow = [0, 0, 0];\n pose_windmill.armR.shoulder = [0, 0, 0.3];\n pose_windmill.armR.upper = [0, 0, -0.5];\n pose_windmill.armR.elbow = [0, 0, -1.2];\n pose_windmill.legL.hip = [0, 0, 0.3];\n pose_windmill.legL.thigh = [0.3, 0, 0];\n pose_windmill.legL.knee = [-0.4, 0, 0];\n pose_windmill.legR.hip = [0, 0, -0.3];\n pose_windmill.legR.thigh = [0.5, 0, 0];\n pose_windmill.legR.knee = [-0.6, 0, 0];\n \n // 6. Handstand - body upside down\n const pose_handstand = newPose();\n pose_handstand.hipPos = [0, 1.8, 0];\n pose_handstand.hip = [-1.4, 0, 0];\n pose_handstand.torso = [0, 0, 0];\n pose_handstand.neck = [0.3, 0, 0];\n pose_handstand.head = [0, 0, 0];\n pose_handstand.armL.shoulder = [0, 0, 0.3];\n pose_handstand.armL.upper = [0, 0, 1.2];\n pose_handstand.armL.elbow = [0, 0, -0.2];\n pose_handstand.armR.shoulder = [0, 0, -0.3];\n pose_handstand.armR.upper = [0, 0, -1.2];\n pose_handstand.armR.elbow = [0, 0, 0.2];\n pose_handstand.legL.hip = [0, 0, 0.2];\n pose_handstand.legL.thigh = [0.3, 0, 0];\n pose_handstand.legL.knee = [-0.3, 0, 0];\n pose_handstand.legR.hip = [0, 0, -0.2];\n pose_handstand.legR.thigh = [0.5, 0, 0];\n pose_handstand.legR.knee = [-0.5, 0, 0];\n \n // 7. Standing Ovation - arms raised\n const pose_ovation = newPose();\n pose_ovation.hip = [0, 0, 0];\n pose_ovation.torso = [0, 0, 0];\n pose_ovation.neck = [-0.1, 0, 0];\n pose_ovation.head = [0, 0, 0];\n pose_ovation.armL.shoulder = [0, 0, 0.2];\n pose_ovation.armL.upper = [0, 0, -2.8];\n pose_ovation.armL.elbow = [0, 0, -0.3];\n pose_ovation.armR.shoulder = [0, 0, -0.2];\n pose_ovation.armR.upper = [0, 0, 2.8];\n pose_ovation.armR.elbow = [0, 0, 0.3];\n pose_ovation.legL.hip = [0, 0, 0.05];\n pose_ovation.legL.thigh = [0, 0, 0];\n pose_ovation.legR.hip = [0, 0, -0.05];\n pose_ovation.legR.thigh = [0, 0, 0];\n \n // ==== SEQUENCE ====\n const sequence = [\n { pose: pose_topRock, duration: 1.2, name: 'TOP ROCK' },\n { pose: pose_sixStep, duration: 0.7, name: 'SIX STEP' },\n { pose: pose_babyFreeze, duration: 1.0, name: 'BABY FREEZE' },\n { pose: pose_airFlare, duration: 0.6, name: 'AIR FLARE' },\n { pose: pose_windmill, duration: 0.7, name: 'WINDMILL' },\n { pose: pose_handstand, duration: 0.8, name: 'HANDSTAND' },\n { pose: pose_ovation, duration: 0.8, name: 'OVATION' }\n ];\n \n // ==== APPLY POSE ====\n function applyLerp(p1, p2, t) {\n // Hip position\n hipRoot.position.x = THREE.MathUtils.lerp(p1.hipPos[0], p2.hipPos[0], t);\n hipRoot.position.y = THREE.MathUtils.lerp(p1.hipPos[1], p2.hipPos[1], t);\n hipRoot.position.z = THREE.MathUtils.lerp(p1.hipPos[2], p2.hipPos[2], t);\n \n // Hip rotation\n hipRoot.rotation.x = THREE.MathUtils.lerp(p1.hip[0], p2.hip[0], t);\n hipRoot.rotation.y = THREE.MathUtils.lerp(p1.hip[1], p2.hip[1], t);\n hipRoot.rotation.z = THREE.MathUtils.lerp(p1.hip[2], p2.hip[2], t);\n \n // Torso\n torso.rotation.x = THREE.MathUtils.lerp(p1.torso[0], p2.torso[0], t);\n torso.rotation.y = THREE.MathUtils.lerp(p1.torso[1], p2.torso[1], t);\n torso.rotation.z = THREE.MathUtils.lerp(p1.torso[2], p2.torso[2], t);\n \n // Neck\n neck.rotation.x = THREE.MathUtils.lerp(p1.neck[0], p2.neck[0], t);\n neck.rotation.y = THREE.MathUtils.lerp(p1.neck[1], p2.neck[1], t);\n neck.rotation.z = THREE.MathUtils.lerp(p1.neck[2], p2.neck[2], t);\n \n // Head\n head.rotation.x = THREE.MathUtils.lerp(p1.head[0], p2.head[0], t);\n head.rotation.y = THREE.MathUtils.lerp(p1.head[1], p2.head[1], t);\n head.rotation.z = THREE.MathUtils.lerp(p1.head[2], p2.head[2], t);\n \n // Arm L\n armL.shoulder.rotation.x = THREE.MathUtils.lerp(p1.armL.shoulder[0], p2.armL.shoulder[0], t);\n armL.shoulder.rotation.y = THREE.MathUtils.lerp(p1.armL.shoulder[1], p2.armL.shoulder[1], t);\n armL.shoulder.rotation.z = THREE.MathUtils.lerp(p1.armL.shoulder[2], p2.armL.shoulder[2], t);\n armL.upperArm.rotation.x = THREE.MathUtils.lerp(p1.armL.upper[0], p2.armL.upper[0], t);\n armL.upperArm.rotation.y = THREE.MathUtils.lerp(p1.armL.upper[1], p2.armL.upper[1], t);\n armL.upperArm.rotation.z = THREE.MathUtils.lerp(p1.armL.upper[2], p2.armL.upper[2], t);\n armL.elbow.rotation.x = THREE.MathUtils.lerp(p1.armL.elbow[0], p2.armL.elbow[0], t);\n armL.elbow.rotation.y = THREE.MathUtils.lerp(p1.armL.elbow[1], p2.armL.elbow[1], t);\n armL.elbow.rotation.z = THREE.MathUtils.lerp(p1.armL.elbow[2], p2.armL.elbow[2], t);\n armL.forearm.rotation.x = THREE.MathUtils.lerp(p1.armL.forearm[0], p2.armL.forearm[0], t);\n armL.forearm.rotation.y = THREE.MathUtils.lerp(p1.armL.forearm[1], p2.armL.forearm[1], t);\n armL.forearm.rotation.z = THREE.MathUtils.lerp(p1.armL.forearm[2], p2.armL.forearm[2], t);\n \n // Arm R\n armR.shoulder.rotation.x = THREE.MathUtils.lerp(p1.armR.shoulder[0], p2.armR.shoulder[0], t);\n armR.shoulder.rotation.y = THREE.MathUtils.lerp(p1.armR.shoulder[1], p2.armR.shoulder[1], t);\n armR.shoulder.rotation.z = THREE.MathUtils.lerp(p1.armR.shoulder[2], p2.armR.shoulder[2], t);\n armR.upperArm.rotation.x = THREE.MathUtils.lerp(p1.armR.upper[0], p2.armR.upper[0], t);\n armR.upperArm.rotation.y = THREE.MathUtils.lerp(p1.armR.upper[1], p2.armR.upper[1], t);\n armR.upperArm.rotation.z = THREE.MathUtils.lerp(p1.armR.upper[2], p2.armR.upper[2], t);\n armR.elbow.rotation.x = THREE.MathUtils.lerp(p1.armR.elbow[0], p2.armR.elbow[0], t);\n armR.elbow.rotation.y = THREE.MathUtils.lerp(p1.armR.elbow[1], p2.armR.elbow[1], t);\n armR.elbow.rotation.z = THREE.MathUtils.lerp(p1.armR.elbow[2], p2.armR.elbow[2], t);\n armR.forearm.rotation.x = THREE.MathUtils.lerp(p1.armR.forearm[0], p2.armR.forearm[0], t);\n armR.forearm.rotation.y = THREE.MathUtils.lerp(p1.armR.forearm[1], p2.armR.forearm[1], t);\n armR.forearm.rotation.z = THREE.MathUtils.lerp(p1.armR.forearm[2], p2.armR.forearm[2], t);\n \n // Leg L\n legL.hipJoint.rotation.x = THREE.MathUtils.lerp(p1.legL.hip[0], p2.legL.hip[0], t);\n legL.hipJoint.rotation.y = THREE.MathUtils.lerp(p1.legL.hip[1], p2.legL.hip[1], t);\n legL.hipJoint.rotation.z = THREE.MathUtils.lerp(p1.legL.hip[2], p2.legL.hip[2], t);\n legL.thigh.rotation.x = THREE.MathUtils.lerp(p1.legL.thigh[0], p2.legL.thigh[0], t);\n legL.thigh.rotation.y = THREE.MathUtils.lerp(p1.legL.thigh[1], p2.legL.thigh[1], t);\n legL.thigh.rotation.z = THREE.MathUtils.lerp(p1.legL.thigh[2], p2.legL.thigh[2], t);\n legL.knee.rotation.x = THREE.MathUtils.lerp(p1.legL.knee[0], p2.legL.knee[0], t);\n legL.knee.rotation.y = THREE.MathUtils.lerp(p1.legL.knee[1], p2.legL.knee[1], t);\n legL.knee.rotation.z = THREE.MathUtils.lerp(p1.legL.knee[2], p2.legL.knee[2], t);\n legL.ankle.rotation.x = THREE.MathUtils.lerp(p1.legL.ankle[0], p2.legL.ankle[0], t);\n legL.ankle.rotation.y = THREE.MathUtils.lerp(p1.legL.ankle[1], p2.legL.ankle[1], t);\n legL.ankle.rotation.z = THREE.MathUtils.lerp(p1.legL.ankle[2], p2.legL.ankle[2], t);\n \n // Leg R\n legR.hipJoint.rotation.x = THREE.MathUtils.lerp(p1.legR.hip[0], p2.legR.hip[0], t);\n legR.hipJoint.rotation.y = THREE.MathUtils.lerp(p1.legR.hip[1], p2.legR.hip[1], t);\n legR.hipJoint.rotation.z = THREE.MathUtils.lerp(p1.legR.hip[2], p2.legR.hip[2], t);\n legR.thigh.rotation.x = THREE.MathUtils.lerp(p1.legR.thigh[0], p2.legR.thigh[0], t);\n legR.thigh.rotation.y = THREE.MathUtils.lerp(p1.legR.thigh[1], p2.legR.thigh[1], t);\n legR.thigh.rotation.z = THREE.MathUtils.lerp(p1.legR.thigh[2], p2.legR.thigh[2], t);\n legR.knee.rotation.x = THREE.MathUtils.lerp(p1.legR.knee[0], p2.legR.knee[0], t);\n legR.knee.rotation.y = THREE.MathUtils.lerp(p1.legR.knee[1], p2.legR.knee[1], t);\n legR.knee.rotation.z = THREE.MathUtils.lerp(p1.legR.knee[2], p2.legR.knee[2], t);\n legR.ankle.rotation.x = THREE.MathUtils.lerp(p1.legR.ankle[0], p2.legR.ankle[0], t);\n legR.ankle.rotation.y = THREE.MathUtils.lerp(p1.legR.ankle[1], p2.legR.ankle[1], t);\n legR.ankle.rotation.z = THREE.MathUtils.lerp(p1.legR.ankle[2], p2.legR.ankle[2], t);\n }\n \n // ==== PARTICLES ====\n const particleCount = 300;\n const particleGeo = new THREE.BufferGeometry();\n const particlePositions = new Float32Array(particleCount * 3);\n const particleVelocities = [];\n for (let i = 0; i < particleCount; i++) {\n particlePositions[i*3] = (Math.random() - 0.5) * 12;\n particlePositions[i*3+1] = Math.random() * 6;\n particlePositions[i*3+2] = (Math.random() - 0.5) * 12;\n particleVelocities.push({\n x: (Math.random() - 0.5) * 0.02,\n y: -0.01 - Math.random() * 0.02,\n z: (Math.random() - 0.5) * 0.02\n });\n }\n particleGeo.setAttribute('position', new THREE.BufferAttribute(particlePositions, 3));\n const particleMat = new THREE.PointsMaterial({\n color: 0xffaa44,\n size: 0.06,\n transparent: true,\n opacity: 0.8,\n blending: THREE.AdditiveBlending,\n depthWrite: false\n });\n const particles = new THREE.Points(particleGeo, particleMat);\n scene.add(particles);\n \n // ==== ANIMATION ====\n const clock = new THREE.Clock();\n let seqIdx = 0;\n let seqTime = 0;\n let lastPose = sequence[sequence.length - 1].pose;\n let nextPose = sequence[0].pose;\n let nextDuration = sequence[0].duration;\n let nextName = sequence[0].name;\n const moveNameEl = document.getElementById('move-name');\n \n function showMoveName(name) {\n if (moveNameEl) {\n moveNameEl.textContent = name;\n moveNameEl.classList.remove('show');\n void moveNameEl.offsetWidth; // Reflow\n moveNameEl.classList.add('show');\n }\n }\n \n function animate() {\n requestAnimationFrame(animate);\n const delta = Math.min(clock.getDelta(), 0.1);\n const time = clock.getElapsedTime();\n \n // Sequence\n seqTime += delta;\n if (seqTime >= nextDuration) {\n lastPose = nextPose;\n seqIdx = (seqIdx + 1) % sequence.length;\n const s = sequence[seqIdx];\n nextPose = s.pose;\n nextDuration = s.duration;\n seqTime = 0;\n showMoveName(s.name);\n }\n \n const t = Math.min(seqTime / 0.25, 1);\n const easedT = t * t * (3 - 2*t);\n applyLerp(lastPose, nextPose, easedT);\n \n // Add subtle idle motion\n const idleX = Math.sin(time * 1.5) * 0.02;\n const idleY = Math.cos(time * 1.2) * 0.015;\n \n // Animate lights\n for (let i = 0; i < stageLights.length; i++) {\n const light = stageLights[i];\n const phase = (i / stageLights.length) * Math.PI * 2;\n const intensity = 1.5 + Math.sin(time * 2 + phase) * 0.8;\n light.intensity = intensity;\n \n // Move lights in a circle\n const angle = time * 0.4 + phase;\n const r = 4.5;\n light.position.x = Math.cos(angle) * r;\n light.position.z = Math.sin(angle) * r;\n light.position.y = 1.5 + Math.sin(time * 1.5 + phase) * 0.5;\n }\n \n // Animate particles\n const positions = particleGeo.attributes.position.array;\n for (let i = 0; i < particleCount; i++) {\n positions[i*3] += particleVelocities[i].x;\n positions[i*3+1] += particleVelocities[i].y;\n positions[i*3+2] += particleVelocities[i].z;\n if (positions[i*3+1] < 0) {\n positions[i*3+1] = 5 + Math.random() * 2;\n positions[i*3] = (Math.random() - 0.5) * 12;\n positions[i*3+2] = (Math.random() - 0.5) * 12;\n }\n }\n particleGeo.attributes.position.needsUpdate = true;\n \n // Camera orbit\n const camAngle = time * 0.25;\n const camR = 6 + Math.sin(time * 0.3) * 1;\n camera.position.x = Math.cos(camAngle) * camR;\n camera.position.z = Math.sin(camAngle) * camR;\n camera.position.y = 2.5 + Math.sin(time * 0.4) * 0.5;\n camera.lookAt(0, hipRoot.position.y, 0);\n \n // Render\n if (composer) composer.render();\n else renderer.render(scene, camera);\n }\n \n // Initialize\n showMoveName(sequence[0].name);\n applyLerp(sequence[0].pose, sequence[0].pose, 0);\n animate();\n})();\n```\n\nOK that's the full code. Let me review it for issues:\n\n1. The `createLimb` function returns the mesh, but I should make sure the position is set correctly. Let me check the calls.\n\n```javascript\ncreateLimb(new THREE.CylinderGeometry(0.24, 0.20, 0.7, 16), shirtMat, torso).position.y = 0.35;\n```\n\nThis should work - the function returns the mesh, and we set its position. Good.\n\n2. The arm/leg joint groups have proper rotation pivots. The shoulders are at the shoulder position, then upper arm extends down from there. Let me trace through:\n- shoulder position: (0.28, 0.6, 0) - at the top of torso\n- upperArm group: child of shoulder, contains the upper arm mesh at y=-0.16\n- elbow group: child of upperArm, at y=-0.32 (bottom of upper arm)\n- forearm group: child of elbow, contains forearm mesh at y=-0.15\n- wrist: child of forearm, at y=-0.30 (bottom of forearm)\n- hand: child of wrist, contains fist\n\nThe rotations are applied to the groups, so the limbs swing from the joint. Good.\n\n3. For the legs:\n- hipJoint position: (0.12, 0, 0) - at the hip\n- thigh group: contains thigh mesh at y=-0.21\n- knee group: at y=-0.42 (bottom of thigh)\n- calf group: contains calf mesh at y=-0.21\n- ankle: at y=-0.42\n- foot: contains foot mesh\n\nOK this looks right.\n\n4. The poses have rotations in radians. Let me make sure they're reasonable.\n- 0.5 rad = ~28 degrees\n- 1.0 rad = ~57 degrees\n- 1.5 rad = ~86 degrees\n- Math.PI/2 = 90 degrees\n\nThese should be reasonable for dance poses.\n\n5. The transition: I lerp from last pose to current pose over 0.25 seconds, but the duration of each pose is 0.6-1.2 seconds. So there's some time to hold the pose. That should work.\n\n6. The camera orbit and light animation add dynamism.\n\n7. The post-processing should add bloom for a more cinematic look.\n\nI think this is solid. Let me finalize and write the complete HTML.\n\nOne thing I want to double-check: the `THREE.MathUtils.lerp` function. In r128, this should be available. Yes, it is.\n\nAlso, the `outputEncoding` property - in r128, this is the correct property. Newer versions use `outputColorSpace`. But for r128, outputEncoding is right.\n\nLet me also make sure the post-processing scripts work. The order matters - I need to load them after three.js, and the ShaderPass requires CopyShader. Let me make sure the order is right.\n\nActually, in three.js r128, the EffectComposer automatically loads the CopyShader and ShaderPass when needed. The order should be:\n1. three.min.js\n2. EffectComposer.js\n3. RenderPass.js\n4. UnrealBloomPass.js\n5. LuminosityHighPassShader.js (needed by UnrealBloomPass)\n6. CopyShader.js (needed by EffectComposer internally)\n7. ShaderPass.js (needed by UnrealBloomPass internally)\n\nBut since they're all in examples/js/, and they're plain script tags, they should load in order. The internal dependencies should resolve at runtime.\n\nOK let me finalize. I'll output the complete HTML now.\n\nActually, let me also add a few more visual touches:\n- A \"BREAK\" sign or graffiti\n- More dynamic lighting\n- Maybe a turntable that spins\n\nLet me add a turntable under the dancer that spins slowly.\n\nAlso, I want to make the dancer more interesting. Let me add:\n- Tattoos or markings (just emissive lines)\n- A watch or bracelet\n- Maybe a microphone or something\n\nActually, let me keep it clean and focus on the animation. The user wants to see hip-hop dance moves, so the focus should be on the dancer.\n\nLet me also make the floor have a turntable effect - circular lines that rotate.\n\nOK let me finalize and output the code.\n\nWait, I should also add some \"spotlight beam\" effect to make it more dramatic. I have a cone for that, but it should be positioned correctly relative to the spotlight.\n\nLet me also add some \"energy\" particles that emit from the dancer when they hit a pose.\n\nOK let me just finalize. I'll output the complete HTML now.\n\nOne more thing - I want to make sure the code works even if the post-processing fails. So I'll wrap that in a try/catch and fall back to direct rendering.\n\nOK here's the final code. Let me write it out.\n\nHmm, I realize I have a slight issue with the windmill pose. The hip rotation of PI/2 would rotate the entire body sideways, but then the legs would also rotate. That might look weird. Let me reconsider.\n\nActually, for a windmill, the body is supposed to be horizontal, with one hand on the ground. The legs are in the air. So the hip rotation should be around the X axis (rotating forward), but the body should be on its side. That's a complex pose that might not work well with my current setup.\n\nLet me simplify the windmill pose to be more like a backspin or a low crouch.\n\nActually, let me just remove the windmill pose and replace it with a \"Chair Freeze\" or \"Headstand\" or something simpler. Or I can just keep it but with more reasonable rotations.\n\nLet me change pose_windmill to a \"Back Spin\" pose - low and on back:\n\n```javascript\nconst pose_backspin = newPose();\npose_backspin.hipPos = [0, 0.2, 0];\npose_backspin.hip = [Math.PI/2, 0, 0]; // Body on back\npose_backspin.torso = [0, 0, 0];\npose_backspin.neck = [0, 0, 0];\npose_backspin.head = [0, 0, 0];\npose_backspin.armL.shoulder = [0, 0, 1.4];\npose_backspin.armL.upper = [0, 0, -1.4];\npose_backspin.armL.elbow = [0, 0, 0];\npose_backspin.armR.shoulder = [0, 0, 0.3];\npose_backspin.armR.upper = [0, 0, -0.5];\npose_backspin.armR.elbow = [0, 0, -1.2];\npose_backspin.legL.hip = [0, 0, 0.3];\npose_backspin.legL.thigh = [0.3, 0, 0];\npose_backspin.legL.knee = [-0.4, 0, 0];\npose_backspin.legR.hip = [0, 0, -0.3];\npose_backspin.legR.thigh = [0.5, 0, 0];\npose_backspin.legR.knee = [-0.6, 0, 0];\n```\n\nHmm, with hip rotated PI/2 around X, the body would be horizontal. But then the legs, which hang from the hip, would be in the air. That should look like a backspin/flare-like pose.\n\nLet me also adjust the air flare to be more clear. In an air flare, the body is parallel to the ground, supported by the hands, with the legs in the air doing a V motion. Let me adjust:\n\n```javascript\nconst pose_airFlare = newPose();\npose_airFlare.hipPos = [0, 1.0, 0];\npose_airFlare.hip = [0, 0, 0];\npose_airFlare.torso = [-0.2, 0, 0];\npose_airFlare.neck = [0.2, 0, 0];\npose_airFlare.head = [0, 0, 0];\npose_airFlare.armL.shoulder = [0, 0, 0.3];\npose_airFlare.armL.upper = [0.3, 0, -1.3];\npose_airFlare.armL.elbow = [0, 0, -0.2];\npose_airFlare.armR.shoulder = [0, 0, -0.3];\npose_airFlare.armR.upper = [0.3, 0, 1.3];\npose_airFlare.armR.elbow = [0, 0, 0.2];\npose_airFlare.legL.hip = [0, 0, 0.1];\npose_airFlare.legL.thigh = [0.3, 0.3, 0];\npose_airFlare.legL.knee = [-0.2, 0, 0];\npose_airFlare.legR.hip = [0, 0, -0.1];\npose_airFlare.legR.thigh = [0.3, -0.3, 0];\npose_airFlare.legR.knee = [-0.2, 0, 0];\n```\n\nOK I think I have a good set of poses. Let me finalize.\n\nActually, let me think about the camera position more. With the camera orbiting, the dancer should be visible from all angles. But during some poses (like the backspin/windmill), the dancer is horizontal, so the camera angle matters a lot.\n\nLet me set the camera to be at a higher angle so we can see the dancer even when horizontal.\n\ncamera.position.y = 2.5 + Math.sin(time * 0.4) * 0.5;\n\nThat's at about 2-3 units high. The stage is at y=0, dancer at y=1. So the camera is looking down slightly. That should work.\n\nOK let me write the final code now.\n\nOne more thing - I want to add a visual effect when a new pose starts. Like a flash of light or some particles. Let me add that.\n\n```javascript\n// Trigger effect on pose change\nlet flashTime = -1;\nfunction showMoveName(name) {\n if (moveNameEl) {\n moveNameEl.textContent = name;\n moveNameEl.classList.remove('show');\n void moveNameEl.offsetWidth;\n moveNameEl.classList.add('show');\n }\n flashTime = 0; // Trigger flash\n}\n\n// In animate:\nif (flashTime >= 0) {\n flashTime += delta;\n const flashIntensity = Math.max(0, 1 - flashTime * 3) * 3;\n mainSpot.intensity = 4 + flashIntensity;\n if (flashTime > 0.5) flashTime = -1;\n}\n```\n\nOK that adds a flash effect when a new move starts.\n\nLet me also add a \"shadow\" of the dancer on the ground for realism. But with the existing setup, the spotlight should cast a shadow on the stage.\n\nAlright, let me finalize and write the code.\n\nI realize I've been thinking for a while. Let me just write the final HTML and JavaScript.\n\nActually one more thought - for the title display, let me have it cycle through the move names with style. But that's already handled by the showMoveName function.\n\nOK final code time. Let me also consider that the user wants \"siêu thực\" (hyper-realistic). So I should try to make the rendering as good as possible. Let me use:\n- High shadow map resolution\n- ACES tone mapping\n- Bloom for highlights\n- Multiple light sources\n- Realistic materials\n\nI think my code does this. Let me finalize.\n\nLet me also add a subtle camera shake during transitions for impact.\n\n```javascript\n// Camera shake on pose change\nif (seqTime < 0.1) {\n const shake = (0.1 - seqTime) * 0.1;\n camera.position.x += (Math.random() - 0.5) * shake;\n camera.position.y += (Math.random() - 0.5) * shake;\n}\n```\n\nOK let me write the final code. I'll keep it as one HTML file.\n\nI realize the code is getting very long. Let me try to be more concise but still effective. I'll use helper functions and arrays to reduce repetition.\n\nLet me restructure the limb joint setup to be more concise:\n\n```javascript\nfunction setupLimb(parent, side, lengths) {\n // Creates a chain of joints and returns references\n}\n```\n\nBut for clarity, I'll just keep the explicit code.\n\nOK, final code:\n\nI need to be careful about the order of the CDNs. Let me list them:\n1. three.min.js\n2. postprocessing/EffectComposer.js\n3. postprocessing/RenderPass.js\n4. postprocessing/UnrealBloomPass.js\n5. shaders/LuminosityHighPassShader.js\n6. shaders/CopyShader.js\n7. postprocessing/ShaderPass.js\n\nAll from r128. The UnrealBloomPass depends on LuminosityHighPassShader. ShaderPass is used by EffectComposer for the final pass.\n\nOK let me write the final HTML file now.\n\nI realize I should also handle the case where the post-processing scripts don't load. The error handling I have should work.\n\nLet me write it all out now. I'll make the code as clean and impressive as possible.\n\nFinal structure:\n1. HTML head with styles\n2. UI overlay (title, move name)\n3. Three.js scripts\n4. Main JavaScript with all the scene setup and animation\n\nLet me write it now.\n\nWait, one more thing. The user asked for \"ảnh mẫu siêu thực\" which means \"hyper-realistic sample image\". So maybe they want a still image, not an animation? But they also said \"đang nhảy hiphop gồm nhiều động tác khó\" (dancing hip-hop with many difficult moves), which suggests animation.\n\nI think an animation that cycles through the moves is what they want. They can take screenshots if they want a still image. Let me make the animation impressive.\n\nAlso, \"siêu thực\" can mean \"hyper-realistic\" or \"surreal\". In Vietnamese, it usually means \"hyper-realistic\" in this context. So I'll focus on realistic rendering.\n\nOK let me finalize the code now. I'll write it out.\n\nLet me think about the character once more. I want it to look like a B-Boy/B-Girl. Key elements:\n- Baggy clothes\n- Cap or beanie\n- Sneakers\n- Attitude\n\nI have most of these. Let me make sure the proportions look right. The character is about 1.7 units tall in the scene, which represents 1.7m. That's realistic.\n\nOK let me write the final code.\n\nActually, I realize I should also add a \"shadows on the ground\" effect for the dancer. The spotlight should cast a shadow of the dancer on the stage. I have shadow casting enabled on the meshes and the spotlight, and shadow receiving on the stage. So this should work.\n\nLet me also add a subtle \"rim light\" effect to highlight the dancer. I can do this with a directional light or a spotlight from behind.\n\n```javascript\nconst rimLight = new THREE.SpotLight(0x00ffff, 1.5, 15, Math.PI/3, 0.5, 1);\nrimLight.position.set(-3, 4, -5);\nrimLight.target.position.set(0, 1, 0);\nscene.add(rimLight, rimLight.target);\n```\n\nOK let me finalize. I'll write the complete HTML now.\n\nLet me also think about the floor texture. I want it to look like a dance floor or a street performance area. Let me add some lines and patterns to the texture.\n\nOK I've been going back and forth. Let me just write the final code. I'll make decisions as I go.\n\nHere's the final HTML:\n\n[Writing the complete HTML now...]\n\nLet me also consider that in the current code, the `armL.shoulder.rotation.z` controls the arm to swing to the side. For the top rock pose, the left arm is at z=0.5 which swings it slightly back, and the upper arm has z=-0.7 which brings it forward and out. The elbow has z=-1.2 which bends the elbow.\n\nWait, I need to think about the axis conventions. In Three.js:\n- X axis: right (red)\n- Y axis: up (green)\n- Z axis: forward (blue)\n\nFor a character facing forward (along -Z), the X axis is left-right, Y is up-down, Z is forward-backward.\n\nFor the shoulder joint:\n- rotation.x: rotates the arm forward/backward (pitch)\n- rotation.y: rotates the arm around the body (rotation)\n- rotation.z: swings the arm up/down to the side (roll)\n\nFor the arm to be raised to the side, we want rotation.z = PI/2 (90 degrees) for the shoulder, and then the upper arm group can be rotated to point up.\n\nWait, the shoulder is at the top of the torso, and the upper arm hangs down from it. The upper arm mesh is at y=-0.16 in the upper arm group. So the upper arm group is the pivot.\n\nIf I want the arm to be raised straight up, I need to rotate the upper arm group by PI around Z (so the arm points up instead of down). But that would also flip the elbow.\n\nActually, let me think again. The upper arm group is at the shoulder position. The upper arm mesh is at y=-0.16, meaning it extends downward. If I rotate the upper arm group by PI around Z, the arm would extend upward, and the elbow would be at y=0.32 (above the shoulder).\n\nSo for the \"Ovation\" pose where both arms are raised up, I want:\n- shoulder.rotation.x = 0\n- shoulder.rotation.z = 0 (no swing)\n- upperArm.rotation.x = 0\n- upperArm.rotation.z = PI (or maybe -PI?)\n\nLet me check the sign. If the arm is hanging down (y=-0.16) and I rotate around Z by PI, the arm would go to y=+0.16, which is upward. Yes.\n\nBut wait, the elbow group is at y=-0.32 in the upper arm group. After rotation, it would be at y=+0.32, above the shoulder. The forearm would then extend down from there. But that would make the elbow joint above the hand, which is correct for a raised arm.\n\nHmm, but for a natural raised arm pose, the elbow should be bent slightly. So:\n- upperArm.rotation.z = PI + a bit (so the arm goes up and slightly back)\n- elbow.rotation.x or z = small angle to bend the elbow\n\nActually, for both arms raised straight up:\n- shoulder rotation: 0\n- upperArm rotation z: PI (so arm points up)\n- elbow rotation: 0 (straight arm)\n- forearm rotation: 0\n\nBut then the hands would be at the top. If I want the hands to be visible, I need to consider the camera angle.\n\nFor the ovation pose, let me set:\n```javascript\npose_ovation.armL.shoulder = [0, 0, 0.1];\npose_ovation.armL.upper = [0, 0, -Math.PI + 0.2]; // Arm goes up and slightly back\npose_ovation.armL.elbow = [0, 0, -0.3]; // Slight bend\npose_ovation.armR.shoulder = [0, 0, -0.1];\npose_ovation.armR.upper = [0, 0, Math.PI - 0.2];\npose_ovation.armR.elbow = [0, 0, 0.3];\n```\n\nWait, the upper arm rotation z should be PI to make the arm go up. Let me reconsider.\n\nIf the upper arm mesh is at y=-0.16 (pointing down), and I rotate the group by PI around Z, the mesh is now at y=+0.16 (pointing up). That's what I want.\n\nBut the sign of the rotation depends on the coordinate system. In Three.js, rotation around Z by positive angle is counter-clockwise when looking from +Z. So:\n- rotation.z = PI/2: arm points to +X\n- rotation.z = PI: arm points to -Y (up if Y is up)\n- rotation.z = -PI/2: arm points to -X\n- rotation.z = -PI: same as PI\n\nFor the left arm (at x=-0.28), to raise it up:\n- shoulder.rotation.z = 0 (no swing to the side)\n- upperArm.rotation.z = PI (arm goes from pointing down to pointing up)\n\nBut wait, the left arm is at negative X. If I rotate by PI around Z, the arm would go from pointing down (along -Y) to pointing up (along +Y), regardless of the X position. Yes, that should work.\n\nFor both arms raised, both upper arms need rotation.z = PI (or -PI, same thing).\n\nLet me update the ovation pose:\n```javascript\npose_ovation.armL.shoulder = [0, 0, 0.1];\npose_ovation.armL.upper = [0, 0, Math.PI - 0.2];\npose_ovation.armL.elbow = [0, 0, -0.3];\npose_ovation.armR.shoulder = [0, 0, -0.1];\npose_ovation.armR.upper = [0, 0, -Math.PI + 0.2];\npose_ovation.armR.elbow = [0, 0, 0.3];\n```\n\nHmm, but the sign of the rotation for left and right arms should be opposite to make them symmetric. Let me think...\n\nActually, for the left arm at x=-0.28, if I rotate the upper arm by PI around Z, the arm goes up. For the right arm at x=+0.28, if I rotate the upper arm by PI around Z, the arm also goes up. So both should be PI (or both -PI).\n\nWait, but if both are PI, then the elbows would both be at the same X position (positive Y, but X depends on the shoulder position). Let me think again.\n\nLeft shoulder at (-0.28, 0.6, 0). Upper arm extends to (-0.28, 0.6-0.16, 0) = (-0.28, 0.44, 0). After rotation Z=PI, the upper arm would extend to (-0.28, 0.6+0.16, 0) = (-0.28, 0.76, 0). The elbow at (-0.28, 0.6-0.32, 0) = (-0.28, 0.28, 0) would go to (-0.28, 0.6+0.32, 0) = (-0.28, 0.92, 0). So the left arm goes straight up.\n\nRight shoulder at (+0.28, 0.6, 0). After rotation Z=PI, the upper arm goes to (+0.28, 0.76, 0), elbow to (+0.28, 0.92, 0). So right arm also goes straight up.\n\nOK so both arms use rotation.z = PI to go up. Good.\n\nBut wait, if I want the arms to be slightly out to the sides (like a V shape), I'd need to add some rotation.z to the shoulder as well. For the left arm, shoulder.rotation.z = -0.2 would swing it out to the left. For the right arm, shoulder.rotation.z = +0.2 would swing it out to the right.\n\nLet me update:\n```javascript\npose_ovation.armL.shoulder = [0, 0, -0.2]; // Swing out to left\npose_ovation.armL.upper = [0, 0, Math.PI]; // Arm up\npose_ovation.armL.elbow = [0, 0, -0.2]; // Slight bend\npose_ovation.armR.shoulder = [0, 0, 0.2]; // Swing out to right\npose_ovation.armR.upper = [0, 0, -Math.PI]; // Arm up\npose_ovation.armR.elbow = [0, 0, 0.2];\n```\n\nOK that makes more sense.\n\nFor the top rock pose, I want one arm up and one to the side. Let me reconsider.\n\nActually, in hip-hop top rock, the dancer usually has both arms active - one up, one out, or both in a rhythmic motion. Let me just make a confident stance with arms in different positions.\n\nFor pose_topRock:\n- Left arm: raised up and out, elbow bent\n- Right arm: out to the side, slightly bent\n\n```javascript\npose_topRock.armL.shoulder = [0, 0, -0.3]; // Slight swing out\npose_topRock.armL.upper = [0, 0, -Math.PI + 0.5]; // Arm up and out\npose_topRock.armL.elbow = [0, 0, -0.5]; // Bent\npose_topRock.armR.shoulder = [0, 0, 0.5]; // Swing out to side\npose_topRock.armR.upper = [0, 0, -Math.PI/2]; // Arm to the side\npose_topRock.armR.elbow = [0, 0, -0.4]; // Bent\n```\n\nHmm, let me think more carefully. The upper arm group rotation is what points the arm in a direction. If upperArm.rotation.z = -PI/2, the arm points to -X (left). If upperArm.rotation.z = PI, the arm points up.\n\nFor the right arm to point to the right (+X), I need upperArm.rotation.z = PI/2.\nFor the left arm to point to the left (-X), I need upperArm.rotation.z = -PI/2.\n\nFor the right arm to point up, upperArm.rotation.z = -PI (or PI).\nFor the left arm to point up, upperArm.rotation.z = PI (or -PI).\n\nWait, let me reconsider. The upper arm mesh is at y=-0.16 in the upper arm group. So it extends downward. The direction from the shoulder to the elbow is (0, -0.32, 0) in the upper arm group's local space.\n\nIf I rotate the upper arm group by angle θ around Z, the direction becomes (sin(θ), -cos(θ), 0). Wait, let me redo this.\n\nOriginal direction: (0, -1, 0) (downward).\nAfter rotation by θ around Z: (sin(θ), -cos(θ), 0).\n\nFor the arm to point to the right (+X): sin(θ)=1, -cos(θ)=0, so θ = PI/2.\nFor the arm to point to the left (-X): sin(θ)=-1, -cos(θ)=0, so θ = -PI/2.\nFor the arm to point up (+Y): sin(θ)=0, -cos(θ)=1, so θ = PI.\nFor the arm to point down (-Y): sin(θ)=0, -cos(θ)=-1, so θ = 0.\n\nOK so:\n- Right arm pointing right: upperArm.rotation.z = PI/2\n- Right arm pointing up: upperArm.rotation.z = PI (or -PI)\n- Left arm pointing left: upperArm.rotation.z = -PI/2\n- Left arm pointing up: upperArm.rotation.z = PI (or -PI)\n\nWait, that doesn't seem right. Let me think again.\n\nIf I rotate around Z by PI, the vector (0, -1, 0) becomes (0, 1, 0). Yes, that's up. So upperArm.rotation.z = PI makes the arm point up.\n\nIf I rotate around Z by -PI/2, the vector (0, -1, 0) becomes (-1, 0, 0). That's left. So upperArm.rotation.z = -PI/2 makes the arm point left. But this is for the right arm group. The right shoulder is at +X. If the arm points left, it crosses the body. That's not what we want.\n\nFor the right arm to point to the right (+X), the vector should be (1, 0, 0). That's rotation by +PI/2 around Z.\n\nFor the left arm to point to the left (-X), the vector should be (-1, 0, 0). That's rotation by -PI/2 around Z.\n\nOK so:\n- Right arm out to side: upperArm.rotation.z = PI/2 (points right)\n- Left arm out to side: upperArm.rotation.z = -PI/2 (points left)\n- Both arms up: both upperArm.rotation.z = PI\n\nBut wait, I need to think about the shoulder rotation as well. The shoulder rotation can add more pose variety.\n\nFor the top rock pose, let me have:\n- Left arm: up and out, elbow bent (like a \"raise the roof\" gesture)\n- Right arm: out to the side, hand up\n\n```javascript\n// Left arm up and out\npose_topRock.armL.shoulder = [0, 0, 0]; // No shoulder rotation\npose_topRock.armL.upper = [0, 0, -2.5]; // Rotate so arm points up-left (between up and left)\npose_topRock.armL.elbow = [0, 0, -0.8]; // Bent elbow\n\n// Right arm out to side\npose_topRock.armR.shoulder = [0, 0, 0];\npose_topRock.armR.upper = [0, 0, -1.2]; // Rotate so arm points to the right and slightly up\npose_topRock.armR.elbow = [0, 0, -0.5];\n```\n\nWait, I had different signs. Let me re-examine.\n\nActually, I think I had the signs confused. Let me just experiment with values and see what looks right. The key is that the arm should extend in a reasonable direction.\n\nFor the elbow rotation: the elbow group is at the bottom of the upper arm. The forearm extends from there. If I rotate the elbow group around Z, the forearm swings.\n\nIf upper arm is pointing up (rotation.z = PI), and I want the forearm to point to the left, I need to rotate the elbow group by -PI/2 around Z (so the forearm goes from pointing down to pointing left). Wait, but the forearm is at y=-0.15 in the elbow group, so it points down. After rotation by -PI/2 around Z, the forearm would point to... let me calculate.\n\nOriginal forearm direction in elbow group: (0, -1, 0).\nAfter rotation by -PI/2 around Z: (-1, 0, 0) (left).\n\nBut wait, this is in the local space of the elbow group, which is already rotated by the upper arm rotation. So in world space, the forearm direction depends on both rotations.\n\nOK this is getting complex. Let me just use values that look reasonable and adjust if needed.\n\nFor my poses, I'll use:\n- shoulder.rotation.z = small values to swing arm left/right\n- upperArm.rotation.z = main direction of upper arm\n- elbow.rotation.z = bend angle of elbow\n\nFor the \"both arms up\" ovation pose:\n- shoulder.rotation.z = 0\n- upperArm.rotation.z = PI (or -PI, same thing for 180 degrees)\n- elbow.rotation.z = 0 (straight) or small bend\n\nWait, but with upperArm.rotation.z = PI, the arm points up. The elbow is at the top of the upper arm. The forearm hangs down from the elbow. So the hand is at the top. That's the correct \"hands up\" pose.\n\nBut the elbow group is at y=-0.32 in the upper arm group. After upperArm.rotation.z = PI, the elbow group is at y=+0.32 in world space (relative to shoulder). The forearm group is a child of elbow, at y=-0.15 in elbow's local space. After elbow's rotation (which we set to 0 for now), the forearm is at y=+0.32 + 0*cos(0) + (-0.15)*cos(0) = ... wait, this is getting confusing.\n\nLet me just trust the math and set reasonable values. I'll output the code and it should look OK.\n\nLet me also add some \"depth\" to the poses by varying the X rotation (forward/backward).\n\nOK, let me just write the final code and stop overthinking.\n\nActually, let me simplify by using a function to compute the rotations. But no, just direct values should work.\n\nLet me also consider that the dancer should be facing the camera initially, but the camera is orbiting. So the dancer is always facing the camera? No, the dancer is at the origin, and the camera orbits around. So from the camera's view, the dancer is seen from different angles.\n\nI could also have the dancer rotate slightly to face the camera, or just let the camera orbit and show all sides.\n\nFor simplicity, let me just have the camera orbit and show the dancer from all angles.\n\nOK final code time. Let me write it out.\n\nI'll use the following pose values that should look good:\n\nPose 1: Top Rock (standing, arms active)\nPose 2: Six Step (low crouch)\nPose 3: Baby Freeze (one hand on ground)\nPose 4: Air Flare (body in air, legs in V)\nPose 5: Back Spin (body on side, legs in air)\nPose 6: Handstand (body upside down)\nPose 7: Standing Ovation (arms raised)\n\nOK let me write the code.\n\nI realize this is taking a long time. Let me just output the code and be done with it. I'll make sure it works.\n\nLet me also add the user instruction. The user said \"dùng three.js tạo ảnh mẫu siêu thực đang nhảy hiphop gồm nhiều động tác khó.\" which means \"use three.js to create a hyper-realistic sample image of someone doing hip-hop dance with many difficult moves.\"\n\nSo the response should be the HTML code. Let me output it.\n\nActually, the user wants the code in an iframe. So I should output the full HTML. Let me do that.\n\nI'll make sure the code is complete and self-contained. No external resources except the Three.js CDN scripts.\n\nLet me finalize and output now.","format":"unknown","index":0}]},"native_finish_reason":"stop"}],"created":1781841316,"model":"minimax/minimax-m3-20260531","object":"chat.completion","service_tier":null,"system_fingerprint":null,"usage":{"completion_tokens":48300,"prompt_tokens":271,"total_tokens":48571,"completion_tokens_details":{"accepted_prediction_tokens":null,"audio_tokens":0,"reasoning_tokens":29637,"rejected_prediction_tokens":null,"image_tokens":0},"prompt_tokens_details":{"audio_tokens":0,"cached_tokens":114,"cache_write_tokens":0,"video_tokens":0},"cost":0.05801394,"is_byok":false,"cost_details":{"upstream_inference_cost":0.05801394,"upstream_inference_prompt_cost":0.00005394,"upstream_inference_completions_cost":0.05796}},"provider":"Minimax"}