Hip-Hop Dance

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. Let me create a detailed 3D scene with: 1. A humanoid figure performing hip-hop dance 2. Multiple dance poses/keyframes that animate 3. Realistic lighting and shadows 4. Urban environment (street, building, speakers) 5. Particle effects for atmosphere I'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. I'll structure the scene: - Ground plane with texture - Background buildings - A dancing figure made of multiple parts (head, torso, arms, legs) - Animation of hip-hop dance moves (e.g., top rock, footwork, freezes, power moves) - Stage lighting - Particles for dust/light effects - Music speakers - Post-processing for bloom effect Let me code this: ```html Hip-Hop Dance

Hip-Hop Dance Animation

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

HIP-HOP

BREAK THE GRAVITY

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

BREAKDANCE

POWER MOVES

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

Hip-Hop Power

Break The Limits

3D Animation

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

WebGL not supported

'; return; } // Resize handler window.addEventListener('resize', () => { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize(window.innerWidth, window.innerHeight); if (composer) composer.setSize(window.innerWidth, window.innerHeight); }); // ==== ENVIRONMENT ==== // Create floor texture function createFloorTexture() { const c = document.createElement('canvas'); c.width = c.height = 512; const ctx = c.getContext('2d'); // Dark base ctx.fillStyle = '#1a1a1a'; ctx.fillRect(0, 0, 512, 512); // Grid ctx.strokeStyle = '#2a2a2a'; ctx.lineWidth = 2; for (let i = 0; i <= 512; i += 64) { ctx.beginPath(); ctx.moveTo(i, 0); ctx.lineTo(i, 512); ctx.moveTo(0, i); ctx.lineTo(512, i); ctx.stroke(); } // Highlight ctx.fillStyle = 'rgba(255, 0, 100, 0.1)'; ctx.fillRect(0, 0, 512, 512); // Some random lines ctx.strokeStyle = 'rgba(100, 200, 255, 0.2)'; ctx.lineWidth = 4; for (let i = 0; i < 10; i++) { ctx.beginPath(); ctx.moveTo(Math.random()*512, Math.random()*512); ctx.lineTo(Math.random()*512, Math.random()*512); ctx.stroke(); } return new THREE.CanvasTexture(c); } // Stage (main floor) const stageMat = new THREE.MeshStandardMaterial({ map: createFloorTexture(), roughness: 0.3, metalness: 0.7 }); const stage = new THREE.Mesh(new THREE.CircleGeometry(4, 64), stageMat); stage.rotation.x = -Math.PI / 2; stage.receiveShadow = true; scene.add(stage); // Outer ground const outerGround = new THREE.Mesh( new THREE.PlaneGeometry(200, 200), new THREE.MeshStandardMaterial({ color: 0x05050a, roughness: 0.9, metalness: 0.1 }) ); outerGround.rotation.x = -Math.PI / 2; outerGround.position.y = -0.01; outerGround.receiveShadow = true; scene.add(outerGround); // City buildings in distance function createCity() { const group = new THREE.Group(); for (let i = 0; i < 30; i++) { const angle = (i / 30) * Math.PI * 2 + Math.random() * 0.1; const r = 25 + Math.random() * 15; const h = 4 + Math.random() * 18; const w = 2 + Math.random() * 3; const d = 2 + Math.random() * 3; // Color with slight blue tint const colorVal = 0.05 + Math.random() * 0.08; const color = new THREE.Color(colorVal, colorVal, colorVal * 1.5); const geo = new THREE.BoxGeometry(w, h, d); const mat = new THREE.MeshStandardMaterial({ color: color, roughness: 0.7, metalness: 0.3, emissive: new THREE.Color(color).multiplyScalar(0.05) }); const building = new THREE.Mesh(geo, mat); building.position.set(Math.cos(angle) * r, h/2, Math.sin(angle) * r); building.castShadow = false; building.receiveShadow = false; group.add(building); // Windows if (Math.random() > 0.3) { const wCanvas = document.createElement('canvas'); wCanvas.width = 64; wCanvas.height = 128; const wctx = wCanvas.getContext('2d'); wctx.fillStyle = '#000'; wctx.fillRect(0, 0, 64, 128); for (let y = 0; y < 8; y++) { for (let x = 0; x < 3; x++) { if (Math.random() > 0.4) { const hue = 30 + Math.random() * 30; const light = 30 + Math.random() * 50; wctx.fillStyle = `hsl(${hue}, 80%, ${light}%)`; wctx.fillRect(x * 20 + 3, y * 14 + 3, 14, 10); } } } const wtex = new THREE.CanvasTexture(wCanvas); const winMat = new THREE.MeshBasicMaterial({ map: wtex }); const windows = new THREE.Mesh( new THREE.PlaneGeometry(w * 0.8, h * 0.8), winMat ); windows.position.copy(building.position); windows.position.y = h/2; windows.lookAt(0, h/2, 0); group.add(windows); } } return group; } scene.add(createCity()); // ==== LIGHTS ==== const ambient = new THREE.AmbientLight(0x202045, 0.4); scene.add(ambient); // Main spot from above const mainSpot = new THREE.SpotLight(0xffffff, 4, 25, Math.PI/4, 0.4, 1); mainSpot.position.set(0, 10, 1); mainSpot.target.position.set(0, 0, 0); mainSpot.castShadow = true; mainSpot.shadow.mapSize.set(2048, 2048); mainSpot.shadow.camera.near = 1; mainSpot.shadow.camera.far = 20; mainSpot.shadow.bias = -0.0005; scene.add(mainSpot, mainSpot.target); // Visible spotlight cone const spotCone = new THREE.Mesh( new THREE.ConeGeometry(2, 8, 32, 1, true), new THREE.MeshBasicMaterial({ color: 0xffffff, transparent: true, opacity: 0.05, side: THREE.DoubleSide, depthWrite: false, blending: THREE.AdditiveBlending }) ); spotCone.position.set(0, 6, 0.5); scene.add(spotCone); // Colored stage lights const stageLights = []; const colors = [0xff0066, 0x00ffff, 0xff6600, 0x8800ff, 0x00ff66]; for (let i = 0; i < 5; i++) { const angle = (i / 5) * Math.PI * 2; const light = new THREE.PointLight(colors[i], 2, 12); light.position.set(Math.cos(angle) * 5, 1.5 + Math.random() * 2, Math.sin(angle) * 5); scene.add(light); stageLights.push(light); // Visible light sphere const sphere = new THREE.Mesh( new THREE.SphereGeometry(0.1, 8, 8), new THREE.MeshBasicMaterial({ color: colors[i] }) ); sphere.position.copy(light.position); scene.add(sphere); } // ==== SPEAKERS ==== function createSpeaker(x, z, rotation) { const g = new THREE.Group(); const box = new THREE.Mesh( new THREE.BoxGeometry(0.8, 1.5, 0.7), new THREE.MeshStandardMaterial({ color: 0x111111, roughness: 0.5, metalness: 0.5 }) ); box.position.y = 0.75; box.castShadow = true; box.receiveShadow = true; g.add(box); // Speaker cones const cone1 = new THREE.Mesh( new THREE.CircleGeometry(0.25, 32), new THREE.MeshStandardMaterial({ color: 0x222222, roughness: 0.5, metalness: 0.3 }) ); cone1.position.set(0, 0.5, 0.36); g.add(cone1); const cone2 = new THREE.Mesh( new THREE.CircleGeometry(0.15, 32), new THREE.MeshStandardMaterial({ color: 0x1a1a1a, roughness: 0.4, metalness: 0.3 }) ); cone2.position.set(0, 1.0, 0.36); g.add(cone2); // Stand const stand = new THREE.Mesh( new THREE.CylinderGeometry(0.05, 0.08, 0.3, 8), new THREE.MeshStandardMaterial({ color: 0x333333, metalness: 0.6, roughness: 0.4 }) ); stand.position.y = 0.15; stand.castShadow = true; g.add(stand); g.position.set(x, 0, z); g.rotation.y = rotation; scene.add(g); return g; } const speakerL = createSpeaker(-3, 2, -Math.PI/4); const speakerR = createSpeaker(3, 2, Math.PI/4); // ==== CHARACTER ==== // Materials const skinMat = new THREE.MeshStandardMaterial({ color: 0xa87b5a, roughness: 0.5, metalness: 0.05, emissive: 0x331a0a, emissiveIntensity: 0.1 }); const shirtMat = new THREE.MeshStandardMaterial({ color: 0xee1144, roughness: 0.85, metalness: 0.05 }); const pantsMat = new THREE.MeshStandardMaterial({ color: 0x0a0a0a, roughness: 0.9, metalness: 0.05 }); const shoeMat = new THREE.MeshStandardMaterial({ color: 0xffffff, roughness: 0.3, metalness: 0.4 }); const hairMat = new THREE.MeshStandardMaterial({ color: 0x111111, roughness: 0.9 }); const capMat = new THREE.MeshStandardMaterial({ color: 0x222222, roughness: 0.7, metalness: 0.1 }); const headbandMat = new THREE.MeshStandardMaterial({ color: 0xffcc00, roughness: 0.6, metalness: 0.2, emissive: 0x442200, emissiveIntensity: 0.3 }); // Dancer group const dancer = new THREE.Group(); dancer.position.y = 0; scene.add(dancer); // === Character skeleton === function createLimb(geometry, material, parent) { const mesh = new THREE.Mesh(geometry, material); mesh.castShadow = true; parent.add(mesh); return mesh; } // Hip root const hipRoot = new THREE.Group(); hipRoot.position.y = 1.0; // Hip height dancer.add(hipRoot); // Torso group const torso = new THREE.Group(); hipRoot.add(torso); // Torso mesh createLimb(new THREE.CylinderGeometry(0.24, 0.20, 0.7, 16), shirtMat, torso).position.y = 0.35; // Add chest detail const chest = createLimb(new THREE.BoxGeometry(0.45, 0.3, 0.25), shirtMat, torso); chest.position.y = 0.5; chest.position.z = 0.05; // Neck const neck = new THREE.Group(); neck.position.y = 0.7; torso.add(neck); createLimb(new THREE.CylinderGeometry(0.07, 0.09, 0.12, 12), skinMat, neck).position.y = 0.06; // Head const head = new THREE.Group(); head.position.y = 0.18; neck.add(head); const headMesh = createLimb(new THREE.SphereGeometry(0.16, 24, 24), skinMat, head); headMesh.position.y = 0.04; // Hair (afro / cap) const hair = createLimb( new THREE.SphereGeometry(0.17, 16, 16, 0, Math.PI*2, 0, Math.PI*0.55), hairMat, head ); hair.position.y = 0.05; // Cap const cap = createLimb( new THREE.SphereGeometry(0.165, 16, 16, 0, Math.PI*2, 0, Math.PI*0.55), capMat, head ); cap.position.y = 0.07; cap.scale.y = 0.9; // Cap brim const brim = createLimb( new THREE.CylinderGeometry(0.2, 0.2, 0.015, 16, 1, false, 0, Math.PI), capMat, head ); brim.rotation.x = -Math.PI/2; brim.rotation.z = -Math.PI/2; brim.position.set(0, 0.07, 0.18); // Headband const headband = createLimb( new THREE.TorusGeometry(0.165, 0.025, 8, 24), headbandMat, head ); headband.position.y = 0.04; headband.rotation.x = Math.PI/2; // Sunglasses const glasses = createLimb( new THREE.BoxGeometry(0.25, 0.04, 0.02), new THREE.MeshStandardMaterial({ color: 0x000000, roughness: 0.2, metalness: 0.8 }), head ); glasses.position.set(0, 0.05, 0.14); // Ears / headphones... let's skip for simplicity // ==== ARMS ==== function createArm(side) { const sign = side === 'L' ? -1 : 1; const shoulder = new THREE.Group(); shoulder.position.set(sign * 0.28, 0.6, 0); torso.add(shoulder); const upperArm = new THREE.Group(); shoulder.add(upperArm); createLimb( new THREE.CylinderGeometry(0.07, 0.075, 0.32, 12), shirtMat, upperArm ).position.y = -0.16; const elbow = new THREE.Group(); elbow.position.y = -0.32; upperArm.add(elbow); const forearm = new THREE.Group(); elbow.add(forearm); createLimb( new THREE.CylinderGeometry(0.055, 0.065, 0.30, 12), skinMat, forearm ).position.y = -0.15; const wrist = new THREE.Group(); wrist.position.y = -0.30; forearm.add(wrist); const hand = new THREE.Group(); wrist.add(hand); // Fist const fist = createLimb( new THREE.SphereGeometry(0.08, 12, 12), skinMat, hand ); fist.scale.set(1, 0.8, 1.3); return { shoulder, upperArm, elbow, forearm, wrist, hand }; } const armL = createArm('L'); const armR = createArm('R'); // ==== LEGS ==== function createLeg(side) { const sign = side === 'L' ? -1 : 1; const hipJoint = new THREE.Group(); hipJoint.position.set(sign * 0.12, 0, 0); hipRoot.add(hipJoint); const thigh = new THREE.Group(); hipJoint.add(thigh); createLimb( new THREE.CylinderGeometry(0.095, 0.08, 0.42, 12), pantsMat, thigh ).position.y = -0.21; const knee = new THREE.Group(); knee.position.y = -0.42; thigh.add(knee); const calf = new THREE.Group(); knee.add(calf); createLimb( new THREE.CylinderGeometry(0.075, 0.09, 0.42, 12), pantsMat, calf ).position.y = -0.21; const ankle = new THREE.Group(); ankle.position.y = -0.42; calf.add(ankle); const foot = new THREE.Group(); ankle.add(foot); createLimb( new THREE.BoxGeometry(0.1, 0.07, 0.24), shoeMat, foot ).position.set(0, -0.04, 0.08); return { hipJoint, thigh, knee, calf, ankle, foot }; } const legL = createLeg('L'); const legR = createLeg('R'); // ==== POSES ==== // Each joint has [rotX, rotY, rotZ] // hipPos is [x, y, z] for the hip root // Some poses have hip rotation function newPose() { return { hipPos: [0, 1.0, 0], hip: [0, 0, 0], torso: [0, 0, 0], neck: [0, 0, 0], head: [0, 0, 0], armL: { shoulder: [0,0,0], upper: [0,0,0], elbow: [0,0,0], forearm: [0,0,0] }, armR: { shoulder: [0,0,0], upper: [0,0,0], elbow: [0,0,0], forearm: [0,0,0] }, legL: { hip: [0,0,0], thigh: [0,0,0], knee: [0,0,0], ankle: [0,0,0] }, legR: { hip: [0,0,0], thigh: [0,0,0], knee: [0,0,0], ankle: [0,0,0] } }; } // 1. Top Rock - confident stance const pose_topRock = newPose(); pose_topRock.hip = [0, 0.2, 0]; pose_topRock.torso = [0.05, 0.3, -0.15]; pose_topRock.neck = [0, -0.2, 0]; pose_topRock.head = [0, 0.1, 0]; pose_topRock.armL.shoulder = [0, 0, 0.5]; pose_topRock.armL.upper = [-0.3, 0, -0.7]; pose_topRock.armL.elbow = [0, 0, -1.2]; pose_topRock.armR.shoulder = [0, 0, -0.6]; pose_topRock.armR.upper = [-0.4, 0, 1.0]; pose_topRock.armR.elbow = [0, 0, -0.4]; pose_topRock.legL.hip = [0, 0, 0.1]; pose_topRock.legL.thigh = [-0.1, 0.1, 0]; pose_topRock.legL.knee = [0.1, 0, 0]; pose_topRock.legR.hip = [0, 0, -0.1]; pose_topRock.legR.thigh = [-0.2, -0.1, 0]; pose_topRock.legR.knee = [0.1, 0, 0]; // 2. Six Step - low crouch const pose_sixStep = newPose(); pose_sixStep.hipPos = [0, 0.4, 0]; pose_sixStep.hip = [0, 0, 0]; pose_sixStep.torso = [-0.3, 0.3, 0.2]; pose_sixStep.neck = [0.1, -0.2, 0]; pose_sixStep.head = [0, 0, 0]; pose_sixStep.armL.shoulder = [0.5, 0, 0.4]; pose_sixStep.armL.upper = [0, 0, -1.4]; pose_sixStep.armL.elbow = [0, 0, -0.3]; pose_sixStep.armR.shoulder = [0.3, 0, -0.4]; pose_sixStep.armR.upper = [0.2, 0, -0.9]; pose_sixStep.armR.elbow = [0, 0, -0.5]; pose_sixStep.legL.hip = [-0.5, 0, 0]; pose_sixStep.legL.thigh = [0.6, 0, 0]; pose_sixStep.legL.knee = [-0.4, 0, 0]; pose_sixStep.legL.ankle = [0.4, 0, 0]; pose_sixStep.legR.hip = [-0.3, 0, 0]; pose_sixStep.legR.thigh = [0.4, 0, 0]; pose_sixStep.legR.knee = [-0.3, 0, 0]; pose_sixStep.legR.ankle = [0.3, 0, 0]; // 3. Baby Freeze - one hand on ground const pose_babyFreeze = newPose(); pose_babyFreeze.hipPos = [0, 0.5, 0]; pose_babyFreeze.hip = [0, 0, 0.4]; pose_babyFreeze.torso = [0, 0, 0.3]; pose_babyFreeze.neck = [-0.2, 0, -0.2]; pose_babyFreeze.head = [0, 0, 0]; pose_babyFreeze.armL.shoulder = [0, 0, 1.5]; pose_babyFreeze.armL.upper = [0, 0, -1.5]; pose_babyFreeze.armL.elbow = [0, 0, 0]; pose_babyFreeze.armR.shoulder = [0, 0, 0.3]; pose_babyFreeze.armR.upper = [0, 0, -0.3]; pose_babyFreeze.armR.elbow = [0, 0, -1.5]; pose_babyFreeze.legL.hip = [0, 0, 0]; pose_babyFreeze.legL.thigh = [-0.7, 0, 0]; pose_babyFreeze.legL.knee = [0, 0, 0]; pose_babyFreeze.legL.ankle = [0.3, 0, 0]; pose_babyFreeze.legR.hip = [0, 0, 0]; pose_babyFreeze.legR.thigh = [-1.2, 0, 0.3]; pose_babyFreeze.legR.knee = [0, 0, 0]; pose_babyFreeze.legR.ankle = [0.3, 0, 0]; // 4. Air Flare - body in air const pose_airFlare = newPose(); pose_airFlare.hipPos = [0, 1.5, 0]; pose_airFlare.hip = [0, 0, 0]; pose_airFlare.torso = [-0.3, 0, 0]; pose_airFlare.neck = [0.2, 0, 0]; pose_airFlare.head = [0, 0, 0]; pose_airFlare.armL.shoulder = [0, 0, 0.3]; pose_airFlare.armL.upper = [0.5, 0, -1.3]; pose_airFlare.armL.elbow = [0, 0, -0.2]; pose_airFlare.armR.shoulder = [0, 0, -0.3]; pose_airFlare.armR.upper = [0.5, 0, 1.3]; pose_airFlare.armR.elbow = [0, 0, 0.2]; pose_airFlare.legL.hip = [0, 0, 0.1]; pose_airFlare.legL.thigh = [0.5, 0.3, 0]; pose_airFlare.legL.knee = [-0.4, 0, 0]; pose_airFlare.legR.hip = [0, 0, -0.1]; pose_airFlare.legR.thigh = [0.5, -0.3, 0]; pose_airFlare.legR.knee = [-0.4, 0, 0]; // 5. Windmill - body sideways const pose_windmill = newPose(); pose_windmill.hipPos = [0, 0.3, 0]; pose_windmill.hip = [Math.PI/2, 0, 0]; pose_windmill.torso = [0, 0, 0]; pose_windmill.neck = [0, 0, 0]; pose_windmill.head = [0, 0, 0]; pose_windmill.armL.shoulder = [0, 0, 1.4]; pose_windmill.armL.upper = [0, 0, -1.4]; pose_windmill.armL.elbow = [0, 0, 0]; pose_windmill.armR.shoulder = [0, 0, 0.3]; pose_windmill.armR.upper = [0, 0, -0.5]; pose_windmill.armR.elbow = [0, 0, -1.2]; pose_windmill.legL.hip = [0, 0, 0.3]; pose_windmill.legL.thigh = [0.3, 0, 0]; pose_windmill.legL.knee = [-0.4, 0, 0]; pose_windmill.legR.hip = [0, 0, -0.3]; pose_windmill.legR.thigh = [0.5, 0, 0]; pose_windmill.legR.knee = [-0.6, 0, 0]; // 6. Handstand - body upside down const pose_handstand = newPose(); pose_handstand.hipPos = [0, 1.8, 0]; pose_handstand.hip = [-1.4, 0, 0]; pose_handstand.torso = [0, 0, 0]; pose_handstand.neck = [0.3, 0, 0]; pose_handstand.head = [0, 0, 0]; pose_handstand.armL.shoulder = [0, 0, 0.3]; pose_handstand.armL.upper = [0, 0, 1.2]; pose_handstand.armL.elbow = [0, 0, -0.2]; pose_handstand.armR.shoulder = [0, 0, -0.3]; pose_handstand.armR.upper = [0, 0, -1.2]; pose_handstand.armR.elbow = [0, 0, 0.2]; pose_handstand.legL.hip = [0, 0, 0.2]; pose_handstand.legL.thigh = [0.3, 0, 0]; pose_handstand.legL.knee = [-0.3, 0, 0]; pose_handstand.legR.hip = [0, 0, -0.2]; pose_handstand.legR.thigh = [0.5, 0, 0]; pose_handstand.legR.knee = [-0.5, 0, 0]; // 7. Standing Ovation - arms raised const pose_ovation = newPose(); pose_ovation.hip = [0, 0, 0]; pose_ovation.torso = [0, 0, 0]; pose_ovation.neck = [-0.1, 0, 0]; pose_ovation.head = [0, 0, 0]; pose_ovation.armL.shoulder = [0, 0, 0.2]; pose_ovation.armL.upper = [0, 0, -2.8]; pose_ovation.armL.elbow = [0, 0, -0.3]; pose_ovation.armR.shoulder = [0, 0, -0.2]; pose_ovation.armR.upper = [0, 0, 2.8]; pose_ovation.armR.elbow = [0, 0, 0.3]; pose_ovation.legL.hip = [0, 0, 0.05]; pose_ovation.legL.thigh = [0, 0, 0]; pose_ovation.legR.hip = [0, 0, -0.05]; pose_ovation.legR.thigh = [0, 0, 0]; // ==== SEQUENCE ==== const sequence = [ { pose: pose_topRock, duration: 1.2, name: 'TOP ROCK' }, { pose: pose_sixStep, duration: 0.7, name: 'SIX STEP' }, { pose: pose_babyFreeze, duration: 1.0, name: 'BABY FREEZE' }, { pose: pose_airFlare, duration: 0.6, name: 'AIR FLARE' }, { pose: pose_windmill, duration: 0.7, name: 'WINDMILL' }, { pose: pose_handstand, duration: 0.8, name: 'HANDSTAND' }, { pose: pose_ovation, duration: 0.8, name: 'OVATION' } ]; // ==== APPLY POSE ==== function applyLerp(p1, p2, t) { // Hip position hipRoot.position.x = THREE.MathUtils.lerp(p1.hipPos[0], p2.hipPos[0], t); hipRoot.position.y = THREE.MathUtils.lerp(p1.hipPos[1], p2.hipPos[1], t); hipRoot.position.z = THREE.MathUtils.lerp(p1.hipPos[2], p2.hipPos[2], t); // Hip rotation hipRoot.rotation.x = THREE.MathUtils.lerp(p1.hip[0], p2.hip[0], t); hipRoot.rotation.y = THREE.MathUtils.lerp(p1.hip[1], p2.hip[1], t); hipRoot.rotation.z = THREE.MathUtils.lerp(p1.hip[2], p2.hip[2], t); // Torso torso.rotation.x = THREE.MathUtils.lerp(p1.torso[0], p2.torso[0], t); torso.rotation.y = THREE.MathUtils.lerp(p1.torso[1], p2.torso[1], t); torso.rotation.z = THREE.MathUtils.lerp(p1.torso[2], p2.torso[2], t); // Neck neck.rotation.x = THREE.MathUtils.lerp(p1.neck[0], p2.neck[0], t); neck.rotation.y = THREE.MathUtils.lerp(p1.neck[1], p2.neck[1], t); neck.rotation.z = THREE.MathUtils.lerp(p1.neck[2], p2.neck[2], t); // Head head.rotation.x = THREE.MathUtils.lerp(p1.head[0], p2.head[0], t); head.rotation.y = THREE.MathUtils.lerp(p1.head[1], p2.head[1], t); head.rotation.z = THREE.MathUtils.lerp(p1.head[2], p2.head[2], t); // Arm L armL.shoulder.rotation.x = THREE.MathUtils.lerp(p1.armL.shoulder[0], p2.armL.shoulder[0], t); armL.shoulder.rotation.y = THREE.MathUtils.lerp(p1.armL.shoulder[1], p2.armL.shoulder[1], t); armL.shoulder.rotation.z = THREE.MathUtils.lerp(p1.armL.shoulder[2], p2.armL.shoulder[2], t); armL.upperArm.rotation.x = THREE.MathUtils.lerp(p1.armL.upper[0], p2.armL.upper[0], t); armL.upperArm.rotation.y = THREE.MathUtils.lerp(p1.armL.upper[1], p2.armL.upper[1], t); armL.upperArm.rotation.z = THREE.MathUtils.lerp(p1.armL.upper[2], p2.armL.upper[2], t); armL.elbow.rotation.x = THREE.MathUtils.lerp(p1.armL.elbow[0], p2.armL.elbow[0], t); armL.elbow.rotation.y = THREE.MathUtils.lerp(p1.armL.elbow[1], p2.armL.elbow[1], t); armL.elbow.rotation.z = THREE.MathUtils.lerp(p1.armL.elbow[2], p2.armL.elbow[2], t); armL.forearm.rotation.x = THREE.MathUtils.lerp(p1.armL.forearm[0], p2.armL.forearm[0], t); armL.forearm.rotation.y = THREE.MathUtils.lerp(p1.armL.forearm[1], p2.armL.forearm[1], t); armL.forearm.rotation.z = THREE.MathUtils.lerp(p1.armL.forearm[2], p2.armL.forearm[2], t); // Arm R armR.shoulder.rotation.x = THREE.MathUtils.lerp(p1.armR.shoulder[0], p2.armR.shoulder[0], t); armR.shoulder.rotation.y = THREE.MathUtils.lerp(p1.armR.shoulder[1], p2.armR.shoulder[1], t); armR.shoulder.rotation.z = THREE.MathUtils.lerp(p1.armR.shoulder[2], p2.armR.shoulder[2], t); armR.upperArm.rotation.x = THREE.MathUtils.lerp(p1.armR.upper[0], p2.armR.upper[0], t); armR.upperArm.rotation.y = THREE.MathUtils.lerp(p1.armR.upper[1], p2.armR.upper[1], t); armR.upperArm.rotation.z = THREE.MathUtils.lerp(p1.armR.upper[2], p2.armR.upper[2], t); armR.elbow.rotation.x = THREE.MathUtils.lerp(p1.armR.elbow[0], p2.armR.elbow[0], t); armR.elbow.rotation.y = THREE.MathUtils.lerp(p1.armR.elbow[1], p2.armR.elbow[1], t); armR.elbow.rotation.z = THREE.MathUtils.lerp(p1.armR.elbow[2], p2.armR.elbow[2], t); armR.forearm.rotation.x = THREE.MathUtils.lerp(p1.armR.forearm[0], p2.armR.forearm[0], t); armR.forearm.rotation.y = THREE.MathUtils.lerp(p1.armR.forearm[1], p2.armR.forearm[1], t); armR.forearm.rotation.z = THREE.MathUtils.lerp(p1.armR.forearm[2], p2.armR.forearm[2], t); // Leg L legL.hipJoint.rotation.x = THREE.MathUtils.lerp(p1.legL.hip[0], p2.legL.hip[0], t); legL.hipJoint.rotation.y = THREE.MathUtils.lerp(p1.legL.hip[1], p2.legL.hip[1], t); legL.hipJoint.rotation.z = THREE.MathUtils.lerp(p1.legL.hip[2], p2.legL.hip[2], t); legL.thigh.rotation.x = THREE.MathUtils.lerp(p1.legL.thigh[0], p2.legL.thigh[0], t); legL.thigh.rotation.y = THREE.MathUtils.lerp(p1.legL.thigh[1], p2.legL.thigh[1], t); legL.thigh.rotation.z = THREE.MathUtils.lerp(p1.legL.thigh[2], p2.legL.thigh[2], t); legL.knee.rotation.x = THREE.MathUtils.lerp(p1.legL.knee[0], p2.legL.knee[0], t); legL.knee.rotation.y = THREE.MathUtils.lerp(p1.legL.knee[1], p2.legL.knee[1], t); legL.knee.rotation.z = THREE.MathUtils.lerp(p1.legL.knee[2], p2.legL.knee[2], t); legL.ankle.rotation.x = THREE.MathUtils.lerp(p1.legL.ankle[0], p2.legL.ankle[0], t); legL.ankle.rotation.y = THREE.MathUtils.lerp(p1.legL.ankle[1], p2.legL.ankle[1], t); legL.ankle.rotation.z = THREE.MathUtils.lerp(p1.legL.ankle[2], p2.legL.ankle[2], t); // Leg R legR.hipJoint.rotation.x = THREE.MathUtils.lerp(p1.legR.hip[0], p2.legR.hip[0], t); legR.hipJoint.rotation.y = THREE.MathUtils.lerp(p1.legR.hip[1], p2.legR.hip[1], t); legR.hipJoint.rotation.z = THREE.MathUtils.lerp(p1.legR.hip[2], p2.legR.hip[2], t); legR.thigh.rotation.x = THREE.MathUtils.lerp(p1.legR.thigh[0], p2.legR.thigh[0], t); legR.thigh.rotation.y = THREE.MathUtils.lerp(p1.legR.thigh[1], p2.legR.thigh[1], t); legR.thigh.rotation.z = THREE.MathUtils.lerp(p1.legR.thigh[2], p2.legR.thigh[2], t); legR.knee.rotation.x = THREE.MathUtils.lerp(p1.legR.knee[0], p2.legR.knee[0], t); legR.knee.rotation.y = THREE.MathUtils.lerp(p1.legR.knee[1], p2.legR.knee[1], t); legR.knee.rotation.z = THREE.MathUtils.lerp(p1.legR.knee[2], p2.legR.knee[2], t); legR.ankle.rotation.x = THREE.MathUtils.lerp(p1.legR.ankle[0], p2.legR.ankle[0], t); legR.ankle.rotation.y = THREE.MathUtils.lerp(p1.legR.ankle[1], p2.legR.ankle[1], t); legR.ankle.rotation.z = THREE.MathUtils.lerp(p1.legR.ankle[2], p2.legR.ankle[2], t); } // ==== PARTICLES ==== const particleCount = 300; const particleGeo = new THREE.BufferGeometry(); const particlePositions = new Float32Array(particleCount * 3); const particleVelocities = []; for (let i = 0; i < particleCount; i++) { particlePositions[i*3] = (Math.random() - 0.5) * 12; particlePositions[i*3+1] = Math.random() * 6; particlePositions[i*3+2] = (Math.random() - 0.5) * 12; particleVelocities.push({ x: (Math.random() - 0.5) * 0.02, y: -0.01 - Math.random() * 0.02, z: (Math.random() - 0.5) * 0.02 }); } particleGeo.setAttribute('position', new THREE.BufferAttribute(particlePositions, 3)); const particleMat = new THREE.PointsMaterial({ color: 0xffaa44, size: 0.06, transparent: true, opacity: 0.8, blending: THREE.AdditiveBlending, depthWrite: false }); const particles = new THREE.Points(particleGeo, particleMat); scene.add(particles); // ==== ANIMATION ==== const clock = new THREE.Clock(); let seqIdx = 0; let seqTime = 0; let lastPose = sequence[sequence.length - 1].pose; let nextPose = sequence[0].pose; let nextDuration = sequence[0].duration; let nextName = sequence[0].name; const moveNameEl = document.getElementById('move-name'); function showMoveName(name) { if (moveNameEl) { moveNameEl.textContent = name; moveNameEl.classList.remove('show'); void moveNameEl.offsetWidth; // Reflow moveNameEl.classList.add('show'); } } function animate() { requestAnimationFrame(animate); const delta = Math.min(clock.getDelta(), 0.1); const time = clock.getElapsedTime(); // Sequence seqTime += delta; if (seqTime >= nextDuration) { lastPose = nextPose; seqIdx = (seqIdx + 1) % sequence.length; const s = sequence[seqIdx]; nextPose = s.pose; nextDuration = s.duration; seqTime = 0; showMoveName(s.name); } const t = Math.min(seqTime / 0.25, 1); const easedT = t * t * (3 - 2*t); applyLerp(lastPose, nextPose, easedT); // Add subtle idle motion const idleX = Math.sin(time * 1.5) * 0.02; const idleY = Math.cos(time * 1.2) * 0.015; // Animate lights for (let i = 0; i < stageLights.length; i++) { const light = stageLights[i]; const phase = (i / stageLights.length) * Math.PI * 2; const intensity = 1.5 + Math.sin(time * 2 + phase) * 0.8; light.intensity = intensity; // Move lights in a circle const angle = time * 0.4 + phase; const r = 4.5; light.position.x = Math.cos(angle) * r; light.position.z = Math.sin(angle) * r; light.position.y = 1.5 + Math.sin(time * 1.5 + phase) * 0.5; } // Animate particles const positions = particleGeo.attributes.position.array; for (let i = 0; i < particleCount; i++) { positions[i*3] += particleVelocities[i].x; positions[i*3+1] += particleVelocities[i].y; positions[i*3+2] += particleVelocities[i].z; if (positions[i*3+1] < 0) { positions[i*3+1] = 5 + Math.random() * 2; positions[i*3] = (Math.random() - 0.5) * 12; positions[i*3+2] = (Math.random() - 0.5) * 12; } } particleGeo.attributes.position.needsUpdate = true; // Camera orbit const camAngle = time * 0.25; const camR = 6 + Math.sin(time * 0.3) * 1; camera.position.x = Math.cos(camAngle) * camR; camera.position.z = Math.sin(camAngle) * camR; camera.position.y = 2.5 + Math.sin(time * 0.4) * 0.5; camera.lookAt(0, hipRoot.position.y, 0); // Render if (composer) composer.render(); else renderer.render(scene, camera); } // Initialize showMoveName(sequence[0].name); applyLerp(sequence[0].pose, sequence[0].pose, 0); animate(); })(); ``` OK that's the full code. Let me review it for issues: 1. The `createLimb` function returns the mesh, but I should make sure the position is set correctly. Let me check the calls. ```javascript createLimb(new THREE.CylinderGeometry(0.24, 0.20, 0.7, 16), shirtMat, torso).position.y = 0.35; ``` This should work - the function returns the mesh, and we set its position. Good. 2. 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: - shoulder position: (0.28, 0.6, 0) - at the top of torso - upperArm group: child of shoulder, contains the upper arm mesh at y=-0.16 - elbow group: child of upperArm, at y=-0.32 (bottom of upper arm) - forearm group: child of elbow, contains forearm mesh at y=-0.15 - wrist: child of forearm, at y=-0.30 (bottom of forearm) - hand: child of wrist, contains fist The rotations are applied to the groups, so the limbs swing from the joint. Good. 3. For the legs: - hipJoint position: (0.12, 0, 0) - at the hip - thigh group: contains thigh mesh at y=-0.21 - knee group: at y=-0.42 (bottom of thigh) - calf group: contains calf mesh at y=-0.21 - ankle: at y=-0.42 - foot: contains foot mesh OK this looks right. 4. The poses have rotations in radians. Let me make sure they're reasonable. - 0.5 rad = ~28 degrees - 1.0 rad = ~57 degrees - 1.5 rad = ~86 degrees - Math.PI/2 = 90 degrees These should be reasonable for dance poses. 5. 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. 6. The camera orbit and light animation add dynamism. 7. The post-processing should add bloom for a more cinematic look. I think this is solid. Let me finalize and write the complete HTML. One thing I want to double-check: the `THREE.MathUtils.lerp` function. In r128, this should be available. Yes, it is. Also, the `outputEncoding` property - in r128, this is the correct property. Newer versions use `outputColorSpace`. But for r128, outputEncoding is right. Let 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. Actually, in three.js r128, the EffectComposer automatically loads the CopyShader and ShaderPass when needed. The order should be: 1. three.min.js 2. EffectComposer.js 3. RenderPass.js 4. UnrealBloomPass.js 5. LuminosityHighPassShader.js (needed by UnrealBloomPass) 6. CopyShader.js (needed by EffectComposer internally) 7. ShaderPass.js (needed by UnrealBloomPass internally) But 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. OK let me finalize. I'll output the complete HTML now. Actually, let me also add a few more visual touches: - A "BREAK" sign or graffiti - More dynamic lighting - Maybe a turntable that spins Let me add a turntable under the dancer that spins slowly. Also, I want to make the dancer more interesting. Let me add: - Tattoos or markings (just emissive lines) - A watch or bracelet - Maybe a microphone or something Actually, 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. Let me also make the floor have a turntable effect - circular lines that rotate. OK let me finalize and output the code. Wait, 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. Let me also add some "energy" particles that emit from the dancer when they hit a pose. OK let me just finalize. I'll output the complete HTML now. One 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. OK here's the final code. Let me write it out. Hmm, 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. Actually, 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. Let me simplify the windmill pose to be more like a backspin or a low crouch. Actually, 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. Let me change pose_windmill to a "Back Spin" pose - low and on back: ```javascript const pose_backspin = newPose(); pose_backspin.hipPos = [0, 0.2, 0]; pose_backspin.hip = [Math.PI/2, 0, 0]; // Body on back pose_backspin.torso = [0, 0, 0]; pose_backspin.neck = [0, 0, 0]; pose_backspin.head = [0, 0, 0]; pose_backspin.armL.shoulder = [0, 0, 1.4]; pose_backspin.armL.upper = [0, 0, -1.4]; pose_backspin.armL.elbow = [0, 0, 0]; pose_backspin.armR.shoulder = [0, 0, 0.3]; pose_backspin.armR.upper = [0, 0, -0.5]; pose_backspin.armR.elbow = [0, 0, -1.2]; pose_backspin.legL.hip = [0, 0, 0.3]; pose_backspin.legL.thigh = [0.3, 0, 0]; pose_backspin.legL.knee = [-0.4, 0, 0]; pose_backspin.legR.hip = [0, 0, -0.3]; pose_backspin.legR.thigh = [0.5, 0, 0]; pose_backspin.legR.knee = [-0.6, 0, 0]; ``` Hmm, 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. Let 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: ```javascript const pose_airFlare = newPose(); pose_airFlare.hipPos = [0, 1.0, 0]; pose_airFlare.hip = [0, 0, 0]; pose_airFlare.torso = [-0.2, 0, 0]; pose_airFlare.neck = [0.2, 0, 0]; pose_airFlare.head = [0, 0, 0]; pose_airFlare.armL.shoulder = [0, 0, 0.3]; pose_airFlare.armL.upper = [0.3, 0, -1.3]; pose_airFlare.armL.elbow = [0, 0, -0.2]; pose_airFlare.armR.shoulder = [0, 0, -0.3]; pose_airFlare.armR.upper = [0.3, 0, 1.3]; pose_airFlare.armR.elbow = [0, 0, 0.2]; pose_airFlare.legL.hip = [0, 0, 0.1]; pose_airFlare.legL.thigh = [0.3, 0.3, 0]; pose_airFlare.legL.knee = [-0.2, 0, 0]; pose_airFlare.legR.hip = [0, 0, -0.1]; pose_airFlare.legR.thigh = [0.3, -0.3, 0]; pose_airFlare.legR.knee = [-0.2, 0, 0]; ``` OK I think I have a good set of poses. Let me finalize. Actually, 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. Let me set the camera to be at a higher angle so we can see the dancer even when horizontal. camera.position.y = 2.5 + Math.sin(time * 0.4) * 0.5; That'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. OK let me write the final code now. One 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. ```javascript // Trigger effect on pose change let flashTime = -1; function showMoveName(name) { if (moveNameEl) { moveNameEl.textContent = name; moveNameEl.classList.remove('show'); void moveNameEl.offsetWidth; moveNameEl.classList.add('show'); } flashTime = 0; // Trigger flash } // In animate: if (flashTime >= 0) { flashTime += delta; const flashIntensity = Math.max(0, 1 - flashTime * 3) * 3; mainSpot.intensity = 4 + flashIntensity; if (flashTime > 0.5) flashTime = -1; } ``` OK that adds a flash effect when a new move starts. Let 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. Alright, let me finalize and write the code. I realize I've been thinking for a while. Let me just write the final HTML and JavaScript. Actually 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. OK 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: - High shadow map resolution - ACES tone mapping - Bloom for highlights - Multiple light sources - Realistic materials I think my code does this. Let me finalize. Let me also add a subtle camera shake during transitions for impact. ```javascript // Camera shake on pose change if (seqTime < 0.1) { const shake = (0.1 - seqTime) * 0.1; camera.position.x += (Math.random() - 0.5) * shake; camera.position.y += (Math.random() - 0.5) * shake; } ``` OK let me write the final code. I'll keep it as one HTML file. I 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. Let me restructure the limb joint setup to be more concise: ```javascript function setupLimb(parent, side, lengths) { // Creates a chain of joints and returns references } ``` But for clarity, I'll just keep the explicit code. OK, final code: I need to be careful about the order of the CDNs. Let me list them: 1. three.min.js 2. postprocessing/EffectComposer.js 3. postprocessing/RenderPass.js 4. postprocessing/UnrealBloomPass.js 5. shaders/LuminosityHighPassShader.js 6. shaders/CopyShader.js 7. postprocessing/ShaderPass.js All from r128. The UnrealBloomPass depends on LuminosityHighPassShader. ShaderPass is used by EffectComposer for the final pass. OK let me write the final HTML file now. I realize I should also handle the case where the post-processing scripts don't load. The error handling I have should work. Let me write it all out now. I'll make the code as clean and impressive as possible. Final structure: 1. HTML head with styles 2. UI overlay (title, move name) 3. Three.js scripts 4. Main JavaScript with all the scene setup and animation Let me write it now. Wait, 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. I 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. Also, "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. OK let me finalize the code now. I'll write it out. Let me think about the character once more. I want it to look like a B-Boy/B-Girl. Key elements: - Baggy clothes - Cap or beanie - Sneakers - Attitude I 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. OK let me write the final code. Actually, 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. Let 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. ```javascript const rimLight = new THREE.SpotLight(0x00ffff, 1.5, 15, Math.PI/3, 0.5, 1); rimLight.position.set(-3, 4, -5); rimLight.target.position.set(0, 1, 0); scene.add(rimLight, rimLight.target); ``` OK let me finalize. I'll write the complete HTML now. Let 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. OK I've been going back and forth. Let me just write the final code. I'll make decisions as I go. Here's the final HTML: [Writing the complete HTML now...] Let 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. Wait, I need to think about the axis conventions. In Three.js: - X axis: right (red) - Y axis: up (green) - Z axis: forward (blue) For a character facing forward (along -Z), the X axis is left-right, Y is up-down, Z is forward-backward. For the shoulder joint: - rotation.x: rotates the arm forward/backward (pitch) - rotation.y: rotates the arm around the body (rotation) - rotation.z: swings the arm up/down to the side (roll) For 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. Wait, 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. If 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. Actually, 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). So for the "Ovation" pose where both arms are raised up, I want: - shoulder.rotation.x = 0 - shoulder.rotation.z = 0 (no swing) - upperArm.rotation.x = 0 - upperArm.rotation.z = PI (or maybe -PI?) Let 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. But 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. Hmm, but for a natural raised arm pose, the elbow should be bent slightly. So: - upperArm.rotation.z = PI + a bit (so the arm goes up and slightly back) - elbow.rotation.x or z = small angle to bend the elbow Actually, for both arms raised straight up: - shoulder rotation: 0 - upperArm rotation z: PI (so arm points up) - elbow rotation: 0 (straight arm) - forearm rotation: 0 But then the hands would be at the top. If I want the hands to be visible, I need to consider the camera angle. For the ovation pose, let me set: ```javascript pose_ovation.armL.shoulder = [0, 0, 0.1]; pose_ovation.armL.upper = [0, 0, -Math.PI + 0.2]; // Arm goes up and slightly back pose_ovation.armL.elbow = [0, 0, -0.3]; // Slight bend pose_ovation.armR.shoulder = [0, 0, -0.1]; pose_ovation.armR.upper = [0, 0, Math.PI - 0.2]; pose_ovation.armR.elbow = [0, 0, 0.3]; ``` Wait, the upper arm rotation z should be PI to make the arm go up. Let me reconsider. If 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. But 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: - rotation.z = PI/2: arm points to +X - rotation.z = PI: arm points to -Y (up if Y is up) - rotation.z = -PI/2: arm points to -X - rotation.z = -PI: same as PI For the left arm (at x=-0.28), to raise it up: - shoulder.rotation.z = 0 (no swing to the side) - upperArm.rotation.z = PI (arm goes from pointing down to pointing up) But 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. For both arms raised, both upper arms need rotation.z = PI (or -PI, same thing). Let me update the ovation pose: ```javascript pose_ovation.armL.shoulder = [0, 0, 0.1]; pose_ovation.armL.upper = [0, 0, Math.PI - 0.2]; pose_ovation.armL.elbow = [0, 0, -0.3]; pose_ovation.armR.shoulder = [0, 0, -0.1]; pose_ovation.armR.upper = [0, 0, -Math.PI + 0.2]; pose_ovation.armR.elbow = [0, 0, 0.3]; ``` Hmm, but the sign of the rotation for left and right arms should be opposite to make them symmetric. Let me think... Actually, 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). Wait, 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. Left 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. Right 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. OK so both arms use rotation.z = PI to go up. Good. But 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. Let me update: ```javascript pose_ovation.armL.shoulder = [0, 0, -0.2]; // Swing out to left pose_ovation.armL.upper = [0, 0, Math.PI]; // Arm up pose_ovation.armL.elbow = [0, 0, -0.2]; // Slight bend pose_ovation.armR.shoulder = [0, 0, 0.2]; // Swing out to right pose_ovation.armR.upper = [0, 0, -Math.PI]; // Arm up pose_ovation.armR.elbow = [0, 0, 0.2]; ``` OK that makes more sense. For the top rock pose, I want one arm up and one to the side. Let me reconsider. Actually, 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. For pose_topRock: - Left arm: raised up and out, elbow bent - Right arm: out to the side, slightly bent ```javascript pose_topRock.armL.shoulder = [0, 0, -0.3]; // Slight swing out pose_topRock.armL.upper = [0, 0, -Math.PI + 0.5]; // Arm up and out pose_topRock.armL.elbow = [0, 0, -0.5]; // Bent pose_topRock.armR.shoulder = [0, 0, 0.5]; // Swing out to side pose_topRock.armR.upper = [0, 0, -Math.PI/2]; // Arm to the side pose_topRock.armR.elbow = [0, 0, -0.4]; // Bent ``` Hmm, 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. For the right arm to point to the right (+X), I need upperArm.rotation.z = PI/2. For the left arm to point to the left (-X), I need upperArm.rotation.z = -PI/2. For the right arm to point up, upperArm.rotation.z = -PI (or PI). For the left arm to point up, upperArm.rotation.z = PI (or -PI). Wait, 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. If I rotate the upper arm group by angle θ around Z, the direction becomes (sin(θ), -cos(θ), 0). Wait, let me redo this. Original direction: (0, -1, 0) (downward). After rotation by θ around Z: (sin(θ), -cos(θ), 0). For the arm to point to the right (+X): sin(θ)=1, -cos(θ)=0, so θ = PI/2. For the arm to point to the left (-X): sin(θ)=-1, -cos(θ)=0, so θ = -PI/2. For the arm to point up (+Y): sin(θ)=0, -cos(θ)=1, so θ = PI. For the arm to point down (-Y): sin(θ)=0, -cos(θ)=-1, so θ = 0. OK so: - Right arm pointing right: upperArm.rotation.z = PI/2 - Right arm pointing up: upperArm.rotation.z = PI (or -PI) - Left arm pointing left: upperArm.rotation.z = -PI/2 - Left arm pointing up: upperArm.rotation.z = PI (or -PI) Wait, that doesn't seem right. Let me think again. If 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. If 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. For the right arm to point to the right (+X), the vector should be (1, 0, 0). That's rotation by +PI/2 around Z. For the left arm to point to the left (-X), the vector should be (-1, 0, 0). That's rotation by -PI/2 around Z. OK so: - Right arm out to side: upperArm.rotation.z = PI/2 (points right) - Left arm out to side: upperArm.rotation.z = -PI/2 (points left) - Both arms up: both upperArm.rotation.z = PI But wait, I need to think about the shoulder rotation as well. The shoulder rotation can add more pose variety. For the top rock pose, let me have: - Left arm: up and out, elbow bent (like a "raise the roof" gesture) - Right arm: out to the side, hand up ```javascript // Left arm up and out pose_topRock.armL.shoulder = [0, 0, 0]; // No shoulder rotation pose_topRock.armL.upper = [0, 0, -2.5]; // Rotate so arm points up-left (between up and left) pose_topRock.armL.elbow = [0, 0, -0.8]; // Bent elbow // Right arm out to side pose_topRock.armR.shoulder = [0, 0, 0]; pose_topRock.armR.upper = [0, 0, -1.2]; // Rotate so arm points to the right and slightly up pose_topRock.armR.elbow = [0, 0, -0.5]; ``` Wait, I had different signs. Let me re-examine. Actually, 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. For 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. If 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. Original forearm direction in elbow group: (0, -1, 0). After rotation by -PI/2 around Z: (-1, 0, 0) (left). But 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. OK this is getting complex. Let me just use values that look reasonable and adjust if needed. For my poses, I'll use: - shoulder.rotation.z = small values to swing arm left/right - upperArm.rotation.z = main direction of upper arm - elbow.rotation.z = bend angle of elbow For the "both arms up" ovation pose: - shoulder.rotation.z = 0 - upperArm.rotation.z = PI (or -PI, same thing for 180 degrees) - elbow.rotation.z = 0 (straight) or small bend Wait, 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. But 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. Let me just trust the math and set reasonable values. I'll output the code and it should look OK. Let me also add some "depth" to the poses by varying the X rotation (forward/backward). OK, let me just write the final code and stop overthinking. Actually, let me simplify by using a function to compute the rotations. But no, just direct values should work. Let 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. I could also have the dancer rotate slightly to face the camera, or just let the camera orbit and show all sides. For simplicity, let me just have the camera orbit and show the dancer from all angles. OK final code time. Let me write it out. I'll use the following pose values that should look good: Pose 1: Top Rock (standing, arms active) Pose 2: Six Step (low crouch) Pose 3: Baby Freeze (one hand on ground) Pose 4: Air Flare (body in air, legs in V) Pose 5: Back Spin (body on side, legs in air) Pose 6: Handstand (body upside down) Pose 7: Standing Ovation (arms raised) OK let me write the code. I realize this is taking a long time. Let me just output the code and be done with it. I'll make sure it works. Let 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." So the response should be the HTML code. Let me output it. Actually, the user wants the code in an iframe. So I should output the full HTML. Let me do that. I'll make sure the code is complete and self-contained. No external resources except the Three.js CDN scripts. Let me finalize and output now. ```html Hip-Hop B-Boy 3D - Three.js

Hip-Hop Power

★ Break The Limits ★

3D • Three.js

```