import React, { useRef, useEffect } from 'react'; import ReactDOM from 'react-dom/client'; import * as THREE from 'three'; const PastelMinecraft = () => { const mountRef = useRef(null); useEffect(() => { // Scene setup const scene = new THREE.Scene(); // Create gradient sky background const vertexShader = ` varying vec3 vWorldPosition; void main() { vec4 worldPosition = modelMatrix * vec4(position, 1.0); vWorldPosition = worldPosition.xyz; gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); } `; const fragmentShader = ` uniform vec3 topColor; uniform vec3 bottomColor; uniform float offset; uniform float exponent; varying vec3 vWorldPosition; void main() { float h = normalize(vWorldPosition + offset).y; gl_FragColor = vec4(mix(bottomColor, topColor, max(pow(max(h, 0.0), exponent), 0.0)), 1.0); } `; const uniforms = { topColor: { value: new THREE.Color(0x7EC0EE) }, // Light blue sky bottomColor: { value: new THREE.Color(0xFFFFFF) }, // White horizon offset: { value: 50 }, exponent: { value: 0.7 } }; const skyGeo = new THREE.SphereGeometry(1000, 32, 15); const skyMat = new THREE.ShaderMaterial({ vertexShader: vertexShader, fragmentShader: fragmentShader, uniforms: uniforms, side: THREE.BackSide }); const sky = new THREE.Mesh(skyGeo, skyMat); scene.add(sky); // Adjust fog for better depth perception scene.fog = new THREE.FogExp2(0xFFFFFF, 0.005); const camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 2000); // Game state const npcs = []; // NPC creation function const createNPC = (startX, startZ) => { const npcGroup = new THREE.Group(); // Create body parts with different pastel colors const npcBodyMaterial = new THREE.MeshStandardMaterial({ color: 0xFF69B4 }); // Hot pink const npcHeadMaterial = new THREE.MeshStandardMaterial({ color: 0xFFDAB9 }); // Peach const npcLimbMaterial = new THREE.MeshStandardMaterial({ color: 0xFF69B4 }); // Hot pink // Head const head = new THREE.Mesh(new THREE.BoxGeometry(0.4, 0.4, 0.4), npcHeadMaterial); head.position.y = 1.6; // Body const body = new THREE.Mesh(new THREE.BoxGeometry(0.4, 0.6, 0.2), npcBodyMaterial); body.position.y = 1.1; // Arms const leftArm = new THREE.Mesh(new THREE.BoxGeometry(0.2, 0.6, 0.2), npcLimbMaterial); leftArm.position.set(-0.3, 1.1, 0); const rightArm = new THREE.Mesh(new THREE.BoxGeometry(0.2, 0.6, 0.2), npcLimbMaterial); rightArm.position.set(0.3, 1.1, 0); // Legs const leftLeg = new THREE.Mesh(new THREE.BoxGeometry(0.2, 0.6, 0.2), npcLimbMaterial); leftLeg.position.set(-0.1, 0.5, 0); const rightLeg = new THREE.Mesh(new THREE.BoxGeometry(0.2, 0.6, 0.2), npcLimbMaterial); rightLeg.position.set(0.1, 0.5, 0); npcGroup.add(head, body, leftArm, rightArm, leftLeg, rightLeg); const npc = { group: npcGroup, position: new THREE.Vector3(startX, 0, startZ), rotation: Math.random() * Math.PI * 2, speed: 0.03, nextDirectionChange: Date.now() + Math.random() * 5000, state: 'walking', isGrounded: false }; npcGroup.position.copy(npc.position); scene.add(npcGroup); npcs.push(npc); }; // Create several NPCs at random positions for (let i = 0; i < 5; i++) { const x = (Math.random() - 0.5) * 20; const z = (Math.random() - 0.5) * 20; createNPC(x, z); } // Player state const player = { position: new THREE.Vector3(0, 5, 0), rotation: 0, speed: 0.15, // Reduced speed jumpForce: 0, velocity: new THREE.Vector3(), // Add velocity for smoother movement isGrounded: false }; // Create player mesh group const playerGroup = new THREE.Group(); // Create body parts with pastel colors const bodyMaterial = new THREE.MeshStandardMaterial({ color: 0x4169E1 }); // Royal blue const headMaterial = new THREE.MeshStandardMaterial({ color: 0xFFDAB9 }); // Peach const limbMaterial = new THREE.MeshStandardMaterial({ color: 0x4169E1 }); // Royal blue // Head (slightly larger cube) const headGeometry = new THREE.BoxGeometry(0.4, 0.4, 0.4); const head = new THREE.Mesh(headGeometry, headMaterial); head.position.y = 1.6; // Place on top of body // Body (tall cuboid) const bodyGeometry = new THREE.BoxGeometry(0.4, 0.6, 0.2); const body = new THREE.Mesh(bodyGeometry, bodyMaterial); body.position.y = 1.1; // Arms const armGeometry = new THREE.BoxGeometry(0.2, 0.6, 0.2); const leftArm = new THREE.Mesh(armGeometry, limbMaterial); leftArm.position.set(-0.3, 1.1, 0); const rightArm = new THREE.Mesh(armGeometry, limbMaterial); rightArm.position.set(0.3, 1.1, 0); // Legs const legGeometry = new THREE.BoxGeometry(0.2, 0.6, 0.2); const leftLeg = new THREE.Mesh(legGeometry, limbMaterial); leftLeg.position.set(-0.1, 0.5, 0); const rightLeg = new THREE.Mesh(legGeometry, limbMaterial); rightLeg.position.set(0.1, 0.5, 0); // Add all parts to the player group playerGroup.add(head); playerGroup.add(body); playerGroup.add(leftArm); playerGroup.add(rightArm); playerGroup.add(leftLeg); playerGroup.add(rightLeg); playerGroup.position.copy(player.position); scene.add(playerGroup); // Third-person camera setup camera.position.set(0, 2, 5); camera.lookAt(player.position); const renderer = new THREE.WebGLRenderer(); renderer.setSize(window.innerWidth, window.innerHeight); mountRef.current.appendChild(renderer.domElement); // Pastel colors const colors = { grass: 0x66FF66, // Vibrant green dirt: 0xC68C53, // Rich brown stone: 0xAAAAAA, // Clean grey wood: 0x8B4513, // Rich wood brown leaves: 0x90EE90, // Light green flowerRed: 0xFF4444, // Bright red flowerYellow: 0xFFFF44, // Bright yellow flowerPink: 0xFF69B4, // Hot pink flowerPurple: 0x9370DB // Medium purple }; const blockTypes = { grass: { color: colors.grass, name: 'Grass Block' }, dirt: { color: colors.dirt, name: 'Dirt Block' }, stone: { color: colors.stone, name: 'Stone Block' }, wood: { color: colors.wood, name: 'Wood Block' }, leaves: { color: colors.leaves, name: 'Leaves Block' }, }; // Current selected block type let selectedBlockType = 'grass'; // Create preview block const previewGeometry = new THREE.BoxGeometry(1.001, 1.001, 1.001); // Slightly larger const previewMaterial = new THREE.MeshStandardMaterial({ transparent: true, opacity: 0.5, color: 0xFFFFFF, depthTest: true, depthWrite: false }); const previewBlock = new THREE.Mesh(previewGeometry, previewMaterial); previewBlock.visible = true; scene.add(previewBlock); // Throwing state const throwingState = { isThrowingBlock: false, throwStartTime: 0, throwPower: 0, maxThrowPower: 20, throwSpeed: 0.5 }; // Create ground // Create shared geometries and materials const sharedGeometry = new THREE.BoxGeometry(1, 1, 1); const materials = { grass: new THREE.MeshStandardMaterial({ color: colors.grass, roughness: 0.8, metalness: 0.1 }), grassTop: new THREE.MeshStandardMaterial({ color: new THREE.Color(colors.grass).multiplyScalar(1.2), roughness: 0.8, metalness: 0.1 }), dirt: new THREE.MeshStandardMaterial({ color: colors.dirt, roughness: 0.8, metalness: 0.1 }), stone: new THREE.MeshStandardMaterial({ color: colors.stone, roughness: 0.8, metalness: 0.1 }), wood: new THREE.MeshStandardMaterial({ color: colors.wood, roughness: 0.8, metalness: 0.1 }), leaves: new THREE.MeshStandardMaterial({ color: colors.leaves, roughness: 0.8, metalness: 0.1, flatShading: true }) }; const createCube = (color, position, type = 'default') => { if (type === 'grass') { const grassMaterials = Array(6).fill(materials.grass); grassMaterials[2] = materials.grassTop; // Top face const cube = new THREE.Mesh(sharedGeometry, grassMaterials); cube.position.set(...position); scene.add(cube); return cube; } const material = materials[type] || materials.dirt; const cube = new THREE.Mesh(sharedGeometry, material); cube.position.set(...position); // Add subtle random rotation for leaves if (type === 'leaves') { cube.rotation.y = Math.random() * 0.2 - 0.1; cube.rotation.x = Math.random() * 0.2 - 0.1; } scene.add(cube); return cube; }; // Create flower function const createFlower = (x, y, z, type) => { const stemGeometry = new THREE.CylinderGeometry(0.02, 0.02, 0.3, 8); const stemMaterial = new THREE.MeshStandardMaterial({ color: 0x228B22 }); const stem = new THREE.Mesh(stemGeometry, stemMaterial); stem.position.set(x, y + 0.15, z); const petalGeometry = new THREE.CircleGeometry(0.15, 5); const petalMaterial = new THREE.MeshStandardMaterial({ color: colors[type], side: THREE.DoubleSide, roughness: 0.8, metalness: 0.1 }); const flower = new THREE.Group(); flower.add(stem); // Create petals for (let i = 0; i < 5; i++) { const petal = new THREE.Mesh(petalGeometry, petalMaterial); petal.position.set(x, y + 0.3, z); petal.rotation.y = (i * Math.PI * 2) / 5; petal.rotation.x = Math.PI / 4; flower.add(petal); } const centerGeometry = new THREE.SphereGeometry(0.05, 8, 8); const centerMaterial = new THREE.MeshStandardMaterial({ color: type === 'flowerYellow' ? 0xFFFF00 : 0xFFD700, roughness: 0.8, metalness: 0.1 }); const center = new THREE.Mesh(centerGeometry, centerMaterial); center.position.set(x, y + 0.3, z); flower.add(center); scene.add(flower); }; // Generate terrain // Improved terrain generation with Perlin-like noise const CHUNK_SIZE = 32; // Increase world size to 64x64 const chunks = new Set(); // Keep track of generated chunks for (let x = -CHUNK_SIZE; x < CHUNK_SIZE; x++) { for (let z = -CHUNK_SIZE; z < CHUNK_SIZE; z++) { // Base terrain height using simple noise const height = Math.sin(x * 0.3) * Math.cos(z * 0.3) + Math.sin(x * 0.7) * Math.cos(z * 0.7); const terrainHeight = Math.floor(height * 1.5); // Create terrain layers createCube(blockTypes.grass.color, [x, terrainHeight, z], 'grass'); // Add dirt underneath for (let y = terrainHeight - 1; y >= -1; y--) { createCube(blockTypes.dirt.color, [x, y, z], 'dirt'); } // Randomly add stone patches if (Math.random() < 0.1) { createCube(blockTypes.stone.color, [x, terrainHeight + 1, z], 'stone'); } } // Add random flowers near the tree // Add flowers in the world const addFlowers = () => { const flowerTypes = ['flowerRed', 'flowerYellow', 'flowerPink', 'flowerPurple']; for (let x = -CHUNK_SIZE; x < CHUNK_SIZE; x += 4) { for (let z = -CHUNK_SIZE; z < CHUNK_SIZE; z += 4) { if (Math.random() < 0.1) { // 10% chance to place flowers const height = Math.sin(x * 0.3) * Math.cos(z * 0.3) + Math.sin(x * 0.7) * Math.cos(z * 0.7); const flowerY = Math.floor(height * 1.5); const randomType = flowerTypes[Math.floor(Math.random() * flowerTypes.length)]; createFlower(x, flowerY, z, randomType); } } } }; // Call the flower generation function addFlowers(); } // Create a simple tree const createTree = (x, z) => { const height = 5 + Math.floor(Math.random() * 2); // Create trunk with slight variations for (let y = 0; y < height; y++) { createCube(blockTypes.wood.color, [x, y, z], 'wood'); } // Create leaf layers const leafLayers = [ { size: 3, yOffset: height - 1 }, { size: 2, yOffset: height }, { size: 1, yOffset: height + 1 } ]; leafLayers.forEach(({ size, yOffset }) => { for (let dx = -size; dx <= size; dx++) { for (let dz = -size; dz <= size; dz++) { if (Math.abs(dx) + Math.abs(dz) <= size + 1) { createCube(blockTypes.leaves.color, [x + dx, yOffset, z + dz], 'leaves'); } } } }); }; // Add trees throughout the world const placedTrees = new Set(); // Keep track of tree positions for (let i = 0; i < 20; i++) { // Reduce number of trees const spread = CHUNK_SIZE * 3; // Triple the spread area for better distribution let x, z; let attempts = 0; do { x = Math.floor(Math.random() * spread) - (spread/2); z = Math.floor(Math.random() * spread) - (spread/2); attempts++; } while (attempts < 10 && // Prevent infinite loops Array.from(placedTrees).some(pos => { const [tx, tz] = pos.split(','); return Math.abs(x - tx) < 8 && Math.abs(z - tz) < 8; // Increase minimum distance between trees })); if (attempts < 10) { // Only place tree if suitable position found const height = Math.sin(x * 0.3) * Math.cos(z * 0.3) + Math.sin(x * 0.7) * Math.cos(z * 0.7); const terrainHeight = Math.floor(height * 1.5); createTree(x, z); placedTrees.add(`${x},${z}`); } } // Lighting // Improved lighting setup // Enhanced lighting setup const ambientLight = new THREE.AmbientLight(0xffffff, 0.4); scene.add(ambientLight); const directionalLight = new THREE.DirectionalLight(0xffffff, 1.2); directionalLight.position.set(10, 20, 10); directionalLight.castShadow = true; scene.add(directionalLight); // Add enhanced hemisphere light for better atmosphere const hemisphereLight = new THREE.HemisphereLight( 0x7EC0EE, // Sky color matching the gradient 0x90EE90, // Ground color 0.6 ); scene.add(hemisphereLight); // Movement controls const keys = { w: false, a: false, s: false, d: false, space: false }; const handleKeyDown = (event) => { // Prevent default behavior for game controls const gameKeys = ['w', 'a', 's', 'd', ' ', 'p', '1', '2', '3', '4', '5', 'arrowup', 'arrowdown', 'arrowleft', 'arrowright']; if (gameKeys.includes(event.key.toLowerCase())) { event.preventDefault(); } switch(event.key.toLowerCase()) { case 'w': case 'arrowup': keys.w = true; break; case 'a': case 'arrowleft': keys.a = true; break; case 's': case 'arrowdown': keys.s = true; break; case 'd': case 'arrowright': keys.d = true; break; case ' ': if (player.isGrounded) { player.jumpForce = 0.3; player.isGrounded = false; } break; case 'p': placeBlock(); break; case '1': selectedBlockType = 'grass'; previewMaterial.color.setHex(blockTypes[selectedBlockType].color); break; case '2': selectedBlockType = 'dirt'; previewMaterial.color.setHex(blockTypes[selectedBlockType].color); break; case '3': selectedBlockType = 'stone'; previewMaterial.color.setHex(blockTypes[selectedBlockType].color); break; case '4': selectedBlockType = 'wood'; previewMaterial.color.setHex(blockTypes[selectedBlockType].color); break; case '5': selectedBlockType = 'leaves'; previewMaterial.color.setHex(blockTypes[selectedBlockType].color); break; } }; const handleKeyUp = (event) => { // Prevent default behavior for game controls const gameKeys = ['w', 'a', 's', 'd', ' ', 'arrowup', 'arrowdown', 'arrowleft', 'arrowright']; if (gameKeys.includes(event.key.toLowerCase())) { event.preventDefault(); } switch(event.key.toLowerCase()) { case 'w': case 'arrowup': keys.w = false; break; case 'a': case 'arrowleft': keys.a = false; break; case 's': case 'arrowdown': keys.s = false; break; case 'd': case 'arrowright': keys.d = false; break; case ' ': keys.space = false; break; } }; // Mouse look controls let mouseX = 0; const handleMouseMove = (event) => { const movementX = event.movementX || 0; mouseX = movementX * -0.002; // Inverted mouse sensitivity player.rotation += mouseX; // Keep addition since we inverted the value }; // Function to get block placement position const getBlockPlacementPosition = () => { const direction = new THREE.Vector3( -Math.sin(player.rotation), 0, -Math.cos(player.rotation) ); const blockPosition = player.position.clone() .add(direction.multiplyScalar(2)) .add(new THREE.Vector3(0, -0.5, 0)); return new THREE.Vector3( Math.round(blockPosition.x), Math.round(blockPosition.y), Math.round(blockPosition.z) ); }; // Function to update preview block const updatePreviewBlock = () => { const position = getBlockPlacementPosition(); previewBlock.position.copy(position); // Update preview block color based on selected block type previewMaterial.color.setHex(blockTypes[selectedBlockType].color); }; // Function to place a block const placeBlock = () => { const position = getBlockPlacementPosition(); createCube( blockTypes[selectedBlockType].color, [position.x, position.y, position.z], selectedBlockType ); }; // Mouse controls for block placement const handleMouseDown = (event) => { event.preventDefault(); // Prevent context menu if (event.button === 2) { // Right click placeBlock(); } }; // Prevent context menu from appearing on right click const handleContextMenu = (event) => { event.preventDefault(); }; document.addEventListener('keydown', handleKeyDown); document.addEventListener('keyup', handleKeyUp); document.addEventListener('mousedown', handleMouseDown); document.addEventListener('contextmenu', handleContextMenu); window.addEventListener('mousemove', handleMouseMove); // Request pointer lock and set up focus handling const handleCanvasClick = () => { mountRef.current.requestPointerLock(); mountRef.current.focus(); }; // Prevent losing focus const handleBlur = (event) => { if (document.pointerLockElement === mountRef.current) { mountRef.current.focus(); } }; mountRef.current.addEventListener('click', handleCanvasClick); mountRef.current.addEventListener('blur', handleBlur); // Set tabIndex to make the canvas focusable mountRef.current.tabIndex = 1; mountRef.current.style.outline = 'none'; // Remove focus outline // Animation const animate = () => { requestAnimationFrame(animate); // Update preview block position updatePreviewBlock(); // Update player position based on input const moveSpeed = player.speed; player.velocity.x = 0; player.velocity.z = 0; const forward = new THREE.Vector3(-Math.sin(player.rotation), 0, -Math.cos(player.rotation)); const right = new THREE.Vector3(Math.cos(player.rotation), 0, -Math.sin(player.rotation)); if (keys.w) player.velocity.add(forward.clone().multiplyScalar(moveSpeed)); if (keys.s) player.velocity.add(forward.clone().multiplyScalar(-moveSpeed)); if (keys.a) player.velocity.add(right.clone().multiplyScalar(-moveSpeed)); if (keys.d) player.velocity.add(right.clone().multiplyScalar(moveSpeed)); // Check for collisions before applying movement const playerRadius = 0.4; // Slightly larger collision radius const playerHeight = 1.8; // Full height of player const futurePosition = player.position.clone().add(player.velocity); // Check surrounding blocks for collisions let canMove = true; const checkRadius = 2; // Increased check radius const heightCheckRange = 2; // Check blocks above and below for (let x = -checkRadius; x <= checkRadius; x++) { for (let z = -checkRadius; z <= checkRadius; z++) { const blockX = Math.floor(futurePosition.x + x); const blockZ = Math.floor(futurePosition.z + z); // Get block height at this position const height = Math.sin(blockX * 0.3) * Math.cos(blockZ * 0.3) + Math.sin(blockX * 0.7) * Math.cos(blockZ * 0.7); const baseHeight = Math.floor(height * 1.5); // Check for collisions at different heights for (let y = -1; y <= heightCheckRange; y++) { const blockHeight = baseHeight + y; const blockPos = new THREE.Vector3(blockX, blockHeight, blockZ); // Check if any part of the player would collide with this block const horizontalDist = Math.sqrt( Math.pow(futurePosition.x - blockX, 2) + Math.pow(futurePosition.z - blockZ, 2) ); const verticalDist = Math.abs(futurePosition.y - blockHeight); if (horizontalDist < playerRadius + 0.5 && verticalDist < playerHeight / 2) { canMove = false; break; } } } if (!canMove) break; } // Apply movement if no collision detected if (canMove) { player.position.add(player.velocity); } // Apply gravity and jumping if (!player.isGrounded) { player.jumpForce -= 0.015; // gravity } else { player.jumpForce = 0; // Reset jump force when grounded player.velocity.y = 0; // Reset vertical velocity when grounded } // Check for vertical collisions before applying jump/gravity const futureY = player.position.y + player.jumpForce; const playerFeet = new THREE.Vector3( player.position.x, futureY, player.position.z ); // Get exact ground height at player position const groundNoise = Math.sin(playerFeet.x * 0.3) * Math.cos(playerFeet.z * 0.3) + Math.sin(playerFeet.x * 0.7) * Math.cos(playerFeet.z * 0.7); const groundHeight = Math.floor(groundNoise * 1.5) + 0.1; // Check if player is near ground level const distanceToGround = futureY - groundHeight; if (Math.abs(distanceToGround) < 0.2 || distanceToGround < 0) { // If very close to or below ground player.position.y = groundHeight; player.jumpForce = 0; player.isGrounded = true; } else { player.position.y = futureY; player.isGrounded = false; } // Update player position based on velocity and collisions player.position.x += player.velocity.x; player.position.z += player.velocity.z; // Apply jump force if (player.jumpForce > 0 || !player.isGrounded) { player.position.y += player.jumpForce; player.jumpForce -= 0.015; // gravity } // Update player group playerGroup.position.copy(player.position); playerGroup.rotation.y = player.rotation; // Animate legs while walking if (keys.w || keys.s || keys.a || keys.d) { const walkSpeed = Date.now() * 0.01; playerGroup.children[4].rotation.x = Math.sin(walkSpeed) * 0.4; // Left leg playerGroup.children[5].rotation.x = Math.sin(walkSpeed + Math.PI) * 0.4; // Right leg playerGroup.children[2].rotation.x = Math.sin(walkSpeed + Math.PI) * 0.2; // Left arm playerGroup.children[3].rotation.x = Math.sin(walkSpeed) * 0.2; // Right arm } else { // Reset animations when standing still playerGroup.children[4].rotation.x = 0; playerGroup.children[5].rotation.x = 0; playerGroup.children[2].rotation.x = 0; playerGroup.children[3].rotation.x = 0; } // Update camera position const cameraOffset = new THREE.Vector3( Math.sin(player.rotation) * 5, 3, Math.cos(player.rotation) * 5 ); camera.position.copy(player.position).add(cameraOffset); camera.lookAt(player.position); // Optimize leaf animation by updating less frequently if (Date.now() % 2 === 0) { // Only update every other frame scene.children.forEach(child => { if (child.isMesh && child.material === materials.leaves) { child.rotation.y += Math.sin(Date.now() * 0.001) * 0.001; child.rotation.x += Math.cos(Date.now() * 0.001) * 0.001; } }); } // Update thrown blocks scene.children.forEach(child => { if (child.isThrown) { // Apply gravity child.velocity.y -= 0.015; // Update position child.position.add(child.velocity); // Check for ground collision const groundNoise = Math.sin(child.position.x * 0.3) * Math.cos(child.position.z * 0.3) + Math.sin(child.position.x * 0.7) * Math.cos(child.position.z * 0.7); const groundHeight = Math.floor(groundNoise * 1.5) + 0.5; if (child.position.y <= groundHeight) { child.position.y = groundHeight; child.velocity.set(0, 0, 0); child.isThrown = false; } } }); // Update NPCs npcs.forEach(npc => { // Check if it's time to change direction if (Date.now() > npc.nextDirectionChange) { npc.rotation += (Math.random() - 0.5) * Math.PI; npc.nextDirectionChange = Date.now() + 3000 + Math.random() * 4000; } // Calculate next position const forward = new THREE.Vector3( Math.sin(npc.rotation), 0, Math.cos(npc.rotation) ); const nextPosition = npc.position.clone().add( forward.multiplyScalar(npc.speed) ); // Get ground height at next position const npcGroundNoise = Math.sin(nextPosition.x * 0.3) * Math.cos(nextPosition.z * 0.3) + Math.sin(nextPosition.x * 0.7) * Math.cos(nextPosition.z * 0.7); const npcGroundHeight = Math.floor(npcGroundNoise * 1.5) + 0.1; // Update NPC position if not colliding const canMove = !npcs.some(otherNpc => { if (otherNpc === npc) return false; return nextPosition.distanceTo(otherNpc.position) < 1; }); if (canMove) { npc.position.copy(nextPosition); npc.position.y = npcGroundHeight; npc.group.position.copy(npc.position); npc.group.rotation.y = npc.rotation; // Animate NPC walking const walkSpeed = Date.now() * 0.01; npc.group.children[4].rotation.x = Math.sin(walkSpeed) * 0.4; // Left leg npc.group.children[5].rotation.x = Math.sin(walkSpeed + Math.PI) * 0.4; // Right leg npc.group.children[2].rotation.x = Math.sin(walkSpeed + Math.PI) * 0.2; // Left arm npc.group.children[3].rotation.x = Math.sin(walkSpeed) * 0.2; // Right arm } else { // If collision detected, change direction npc.rotation += Math.PI / 2; } }); // Update sky colors based on camera position const skyExponent = (Math.sin(Date.now() * 0.0001) * 0.1) + 0.7; uniforms.exponent.value = skyExponent; renderer.render(scene, camera); }; animate(); // Handle window resize const handleResize = () => { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize(window.innerWidth, window.innerHeight); }; window.addEventListener('resize', handleResize); // Cleanup return () => { document.removeEventListener('keydown', handleKeyDown); document.removeEventListener('keyup', handleKeyUp); document.removeEventListener('mousedown', handleMouseDown); document.removeEventListener('contextmenu', handleContextMenu); window.removeEventListener('mousemove', handleMouseMove); window.removeEventListener('resize', handleResize); mountRef.current.removeEventListener('click', handleCanvasClick); mountRef.current.removeEventListener('blur', handleBlur); document.exitPointerLock(); scene.remove(previewBlock); previewGeometry.dispose(); previewMaterial.dispose(); mountRef.current.removeChild(renderer.domElement); renderer.dispose(); }; }, []); return (

Click to start! Use WASD to move and SPACE to jump
RIGHT CLICK or press P to place blocks
Use number keys (1-5) to select blocks:

1: Grass Block
2: Dirt Block
3: Stone Block
4: Wood Block
5: Leaves Block

); }; const App = () => { return ; }; const container = document.getElementById('renderDiv'); const root = ReactDOM.createRoot(container); root.render();