3D Doll Land VR

Here's the enhanced version with multiple dolls and VR support: 3D Doll Land VR

3D Doll Land VR

// Scene setup const scene = new THREE.Scene(); scene.background = new THREE.Color(0x87CEEB); // Camera const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); camera.position.set(0, 1.6, 5); // Renderer const renderer = new THREE.WebGLRenderer({ antialias: true }); renderer.setSize(window.innerWidth, window.innerHeight); renderer.shadowMap.enabled = true; renderer.xr.enabled = true; document.body.appendChild(renderer.domElement); // VR Button document.body.appendChild(THREE.VRButton.createButton(renderer)); // Lighting const ambientLight = new THREE.AmbientLight(0x404040); scene.add(ambientLight); const directionalLight = new THREE.DirectionalLight(0xffffff, 1); directionalLight.position.set(10, 20, 10); directionalLight.castShadow = true; scene.add(directionalLight); // Ground const groundGeometry = new THREE.PlaneGeometry(100, 100); const groundMaterial = new THREE.MeshStandardMaterial({ color: 0x3a5f0b, roughness: 0.8 }); const ground = new THREE.Mesh(groundGeometry, groundMaterial); ground.rotation.x = -Math.PI / 2; ground.receiveShadow = true; scene.add(ground); // Improved Doll House function createHouse() { const houseGroup = new THREE.Group(); // Main structure const wallsGeometry = new THREE.BoxGeometry(6, 4, 6); const wallsMaterial = new THREE.MeshStandardMaterial({ color: 0xffcccc, roughness: 0.7 }); const walls = new THREE.Mesh(wallsGeometry, wallsMaterial); walls.position.y = 2; walls.castShadow = true; walls.receiveShadow = true; houseGroup.add(walls); // Roof const roofGeometry = new THREE.ConeGeometry(4.5, 2, 4); const roofMaterial = new THREE.MeshStandardMaterial({ color: 0xcc3333, roughness: 0.8 }); const roof = new THREE.Mesh(roofGeometry, roofMaterial); roof.position.y = 5; roof.rotation.y = Math.PI / 4; roof.castShadow = true; houseGroup.add(roof); // Door const doorGeometry = new THREE.BoxGeometry(1.5, 2.5, 0.2); const doorMaterial = new THREE.MeshStandardMaterial({ color: 0x8B4513, roughness: 0.5 }); const door = new THREE.Mesh(doorGeometry, doorMaterial); door.position.set(0, 1, 3); houseGroup.add(door); // Windows const windowGeometry = new THREE.BoxGeometry(1.5, 1.5, 0.1); const windowMaterial = new THREE.MeshStandardMaterial({ color: 0x87CEEB, transparent: true, opacity: 0.7 }); const window1 = new THREE.Mesh(windowGeometry, windowMaterial); window1.position.set(-2, 2.5, 3); houseGroup.add(window1); const window2 = new THREE.Mesh(windowGeometry, windowMaterial); window2.position.set(2, 2.5, 3); houseGroup.add(window2); // Chimney const chimneyGeometry = new THREE.BoxGeometry(0.8, 1.5, 0.8); const chimneyMaterial = new THREE.MeshStandardMaterial({ color: 0x555555, roughness: 0.9 }); const chimney = new THREE.Mesh(chimneyGeometry, chimneyMaterial); chimney.position.set(1.5, 5.5, -1.5); houseGroup.add(chimney); return houseGroup; } const house = createHouse(); scene.add(house); // Create multiple dolls with different colors const dollColors = [ 0xff0000, 0x00ff00, 0x0000ff, 0xffff00, 0xff00ff, 0x00ffff ]; const dolls = []; const dollPositions = [ { x: 3, z: 0 }, { x: -3, z: 0 }, { x: 0, z: 3 }, { x: 0, z: -3 }, { x: 2, z: 2 }, { x: -2, z: -2 } ]; function createDoll(color, x, z) { const dollGroup = new THREE.Group(); // Head const headGeometry = new THREE.SphereGeometry(0.3, 32, 32); const headMaterial = new THREE.MeshStandardMaterial({ color: color, roughness: 0.3 }); const head = new THREE.Mesh(headGeometry, headMaterial); head.position.y = 1.5; head.castShadow = true; dollGroup.add(head); // Body const bodyGeometry = new THREE.CylinderGeometry(0.2, 0.2, 0.8); const bodyMaterial = new THREE.MeshStandardMaterial({ color: color, roughness: 0.4 }); const body = new THREE.Mesh(bodyGeometry, bodyMaterial); body.position.y = 0.8; body.castShadow = true; dollGroup.add(body); // Arms const armGeometry = new THREE.CylinderGeometry(0.1, 0.1, 0.6); const armMaterial = new THREE.MeshStandardMaterial({ color: color, roughness: 0.4 }); const leftArm = new THREE.Mesh(armGeometry, armMaterial); leftArm.position.set(-0.4, 1.1, 0); leftArm.rotation.z = Math.PI / 3; leftArm.castShadow = true; dollGroup.add(leftArm); const rightArm = new THREE.Mesh(armGeometry, armMaterial); rightArm.position.set(0.4, 1.1, 0); rightArm.rotation.z = -Math.PI / 3; rightArm.castShadow = true; dollGroup.add(rightArm); // Legs const legGeometry = new THREE.CylinderGeometry(0.1, 0.1, 0.6); const legMaterial = new THREE.MeshStandardMaterial({ color: 0x0000ff, roughness: 0.4 }); const leftLeg = new THREE.Mesh(legGeometry, legMaterial); leftLeg.position.set(-0.15, 0.2, 0); leftLeg.castShadow = true; dollGroup.add(leftLeg); const rightLeg = new THREE.Mesh(legGeometry, legMaterial); rightLeg.position.set(0.15, 0.2, 0); rightLeg.castShadow = true; dollGroup.add(rightLeg); dollGroup.position.set(x, 0, z); dollGroup.userData.originalY = 0; dollGroup.userData.bounceSpeed = 0.01 + Math.random() * 0.03; dollGroup.userData.bounceHeight = 0.5 + Math.random(); return dollGroup; } // Create all dolls dollColors.forEach((color, index) => { const pos = dollPositions[index]; const doll = createDoll(color, pos.x, pos.z); scene.add(doll); dolls.push(doll); }); // Trees function createTree(x, z) { const treeGroup = new THREE.Group(); const trunkGeometry = new THREE.CylinderGeometry(0.2, 0.2, 1); const trunkMaterial = new THREE.MeshStandardMaterial({ color: 0x8B4513 }); const trunk = new THREE.Mesh(trunkGeometry, trunkMaterial); trunk.position.set(0, 0.5, 0); trunk.castShadow = true; const leavesGeometry = new THREE.ConeGeometry(1, 2, 8); const leavesMaterial = new THREE.MeshStandardMaterial({ color: 0x228B22 }); const leaves = new THREE.Mesh(leavesGeometry, leavesMaterial); leaves.position.set(0, 2, 0); leaves.castShadow = true; treeGroup.add(trunk); treeGroup.add(leaves); treeGroup.position.set(x, 0, z); return treeGroup; } scene.add(createTree(8, 8)); scene.add(createTree(-8, 8)); scene.add(createTree(8, -8)); scene.add(createTree(-8, -8)); // Animation loop function animate() { requestAnimationFrame(animate); // Bounce dolls dolls.forEach(doll => { doll.position.y = doll.userData.originalY + Math.abs(Math.sin(Date.now() * doll.userData.bounceSpeed)) * doll.userData.bounceHeight; }); renderer.render(scene, camera); } // Handle window resize window.addEventListener('resize', () => { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize(window.innerWidth, window.innerHeight); }); // Start VR session when button clicked document.getElementById('vr-button').addEventListener('click', () => { renderer.xr.isPresenting ? renderer.xr.getSession().end() : renderer.xr.getSession(); }); renderer.setAnimationLoop(animate); To play in VR: 1. Click the "ENTER VR" button 2. Use your VR headset controls to move around 3. The dolls will bounce up and down with different rhythms 4. Look around by moving your head in VR