import * as THREE from 'three'; import { PointerLockControls } from 'three/addons/controls/PointerLockControls.js'; const ASSETS = [{ "name": "pixil-frame-0", "shortid": "LmiC", "file_type": "png", "url": "https://play.rosebud.ai/assets/pixil-frame-0.png?LmiC" }]; const parentDiv = document.getElementById('renderDiv'); let canvas = document.getElementById('threeRenderCanvas'); if (!canvas) { canvas = document.createElement('canvas'); canvas.id = 'threeRenderCanvas'; parentDiv.appendChild(canvas); } // Create pause overlay const pauseOverlay = document.createElement('div'); pauseOverlay.id = 'pauseOverlay'; parentDiv.appendChild(pauseOverlay); // Create pause menu const pauseMenu = document.createElement('div'); pauseMenu.id = 'pauseMenu'; pauseMenu.innerHTML = `

Paused

`; parentDiv.appendChild(pauseMenu); // Add click handler for unpause button document.getElementById('unpauseButton').addEventListener('click', () => { isPaused = false; pauseMenu.style.display = 'none'; pauseOverlay.style.display = 'none'; canvas.style.filter = 'none'; controls.lock(); }); // Create damage overlay const damageOverlay = document.createElement('div'); damageOverlay.id = 'damageOverlay'; parentDiv.appendChild(damageOverlay); // Create crosshair element // Create UI container const uiContainer = document.createElement('div'); uiContainer.id = 'uiContainer'; parentDiv.appendChild(uiContainer); // Create crosshair const crosshair = document.createElement('div'); crosshair.id = 'crosshair'; crosshair.textContent = '+'; uiContainer.appendChild(crosshair); // Create hotbar const hotbar = document.createElement('div'); hotbar.id = 'hotbar'; uiContainer.appendChild(hotbar); // Create health bar container const healthContainer = document.createElement('div'); healthContainer.id = 'health-container'; uiContainer.appendChild(healthContainer); // Create health icons for (let i = 0; i < 10; i++) { const heartIcon = document.createElement('div'); heartIcon.className = 'heart-icon'; healthContainer.appendChild(heartIcon); } // Create hotbar slots const slots = ['dirt', 'rock', 'grass']; let selectedSlot = 0; slots.forEach((blockType, index) => { const slot = document.createElement('div'); slot.className = 'hotbar-slot' + (index === selectedSlot ? ' selected' : ''); const blockIcon = document.createElement('div'); blockIcon.className = `block-icon ${blockType}-block`; slot.appendChild(blockIcon); const slotNumber = document.createElement('div'); slotNumber.className = 'slot-number'; slotNumber.textContent = index + 1; slot.appendChild(slotNumber); hotbar.appendChild(slot); }); // Style the UI elements const style = document.createElement('style'); style.textContent = ` #pauseOverlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); display: none; z-index: 1000; } #pauseMenu { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: rgba(0, 0, 0, 0.8); color: white; padding: 20px; border-radius: 10px; text-align: center; display: none; font-family: 'Minecraft', Arial, sans-serif; z-index: 1001; } #unpauseButton { background-color: #4CAF50; border: none; color: white; padding: 10px 20px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 4px 2px; cursor: pointer; border-radius: 5px; font-family: 'Minecraft', Arial, sans-serif; } #unpauseButton:hover { background-color: #45a049; } #damageOverlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(255, 0, 0, 0); pointer-events: none; transition: background-color 0.1s ease-out; z-index: 1000; } #health-container { position: absolute; bottom: 80px; left: 50%; transform: translateX(-50%); display: flex; gap: 4px; padding: 4px; } .heart-icon { width: 16px; height: 16px; background: #ff0000; position: relative; transform: rotate(45deg); } .heart-icon::before, .heart-icon::after { content: ''; width: 16px; height: 16px; background: #ff0000; border-radius: 50%; position: absolute; } .heart-icon::before { left: -8px; } .heart-icon::after { top: -8px; } #uiContainer { position: absolute; width: 100%; height: 100%; pointer-events: none; font-family: 'Minecraft', Arial, sans-serif; } #crosshair { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 24px; color: white; } #hotbar { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); display: flex; padding: 3px; background: rgba(0, 0, 0, 0.75); border: 3px solid #404040; border-radius: 8px; } .hotbar-slot { width: 40px; height: 40px; background: #8B8B8B; border: 2px solid #373737; margin: 2px; position: relative; image-rendering: pixelated; } .hotbar-slot.selected { border: 2px solid #ffffff; background: #666666; } .block-icon { width: 100%; height: 100%; background-size: contain; background-repeat: no-repeat; background-position: center; image-rendering: pixelated; } .dirt-block { background-image: url('${ASSETS[0].url}'); } .rock-block { background: #808080; border: 2px inset #666666; } .grass-block { background: linear-gradient( to bottom, #355E3B 0%, #355E3B 20%, #8B4513 20%, #8B4513 100% ); } .slot-number { position: absolute; bottom: 1px; right: 2px; color: white; font-size: 14px; text-shadow: 2px 2px 0 #000; } #uiContainer { position: absolute; width: 100%; height: 100%; pointer-events: none; } #crosshair { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 24px; color: white; } #hotbar { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); display: flex; gap: 4px; background: rgba(0, 0, 0, 0.5); padding: 4px; border-radius: 4px; } .hotbar-slot { width: 48px; height: 48px; background: #8b8b8b; border: 2px solid #373737; position: relative; } .hotbar-slot.selected { border-color: #fff; } .block-icon { width: 100%; height: 100%; background-size: cover; } .dirt-block { background-image: url('https://play.rosebud.ai/assets/pixil-frame-0.png?LmiC'); image-rendering: pixelated; } .rock-block { background-color: #808080; } .grass-block { background: linear-gradient(to bottom, #355E3B 0%, #355E3B 20%, #8B4513 20%, #8B4513 100%); } .slot-number { position: absolute; bottom: 2px; right: 2px; color: white; font-size: 12px; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5); } `; document.head.appendChild(style); // Initialize the scene const scene = new THREE.Scene(); scene.background = new THREE.Color(0x87CEEB); // Set up physics world first const world = new CANNON.World(); world.gravity.set(0, -4.9, 0); // Reduced gravity (about half of the original) world.broadphase = new CANNON.NaiveBroadphase(); world.solver.iterations = 10; // Create skeleton const skeletonGeometry = new THREE.BoxGeometry(0.6, 1.8, 0.6); const skeletonMaterial = new THREE.MeshLambertMaterial({ color: 0xf0f0f0 }); // Light gray color const skeletonMesh = new THREE.Mesh(skeletonGeometry, skeletonMaterial); scene.add(skeletonMesh); // Create skeleton physics body const skeletonShape = new CANNON.Box(new CANNON.Vec3(0.3, 0.9, 0.3)); const skeletonBody = new CANNON.Body({ mass: 5, shape: skeletonShape, position: new CANNON.Vec3(5, 5, 5), // Initial spawn position material: new CANNON.Material(), fixedRotation: true, linearDamping: 0.4 }); world.addBody(skeletonBody); // Create arrow geometry and material const arrowGeometry = new THREE.CylinderGeometry(0.02, 0.02, 0.5); const arrowMaterial = new THREE.MeshLambertMaterial({ color: 0x8b4513 }); // Brown color // Array to store active arrows const arrows = []; // Function to create and shoot an arrow function shootArrow(startPos, direction) { const arrowMesh = new THREE.Mesh(arrowGeometry, arrowMaterial); scene.add(arrowMesh); // Create a proper arrow shape aligned with its direction const arrowShape = new CANNON.Cylinder(0.02, 0.02, 0.5, 8); const arrowBody = new CANNON.Body({ mass: 0.1, shape: arrowShape, position: new CANNON.Vec3(startPos.x, startPos.y, startPos.z), material: new CANNON.Material() }); // Set initial quaternion to align with direction const quatX = new CANNON.Quaternion(); const quatY = new CANNON.Quaternion(); const upVector = new CANNON.Vec3(0, 1, 0); // Rotate to align with direction quatX.setFromAxisAngle(new CANNON.Vec3(1, 0, 0), -Math.PI / 2); const angle = Math.acos(direction.dot(upVector)); const axis = new CANNON.Vec3(); axis.cross(upVector, direction); axis.normalize(); quatY.setFromAxisAngle(axis, angle); // Combine rotations const finalQuaternion = quatY.mult(quatX); arrowBody.quaternion = finalQuaternion; // Set arrow velocity const speed = 15; arrowBody.velocity.set( direction.x * speed, direction.y * speed, direction.z * speed ); world.addBody(arrowBody); // Store arrow data arrows.push({ mesh: arrowMesh, body: arrowBody, createdAt: Date.now() }); } // Create striped border material const stripeCanvas = document.createElement('canvas'); stripeCanvas.width = 32; stripeCanvas.height = 32; const ctx = stripeCanvas.getContext('2d'); // Create zombie const zombieGeometry = new THREE.BoxGeometry(0.6, 1.8, 0.6); const zombieMaterial = new THREE.MeshLambertMaterial({ color: 0x00ff00 }); const zombieMesh = new THREE.Mesh(zombieGeometry, zombieMaterial); scene.add(zombieMesh); // Create zombie physics body const zombieShape = new CANNON.Box(new CANNON.Vec3(0.3, 0.9, 0.3)); const zombieBody = new CANNON.Body({ mass: 5, shape: zombieShape, position: new CANNON.Vec3(2, 5, 2), // Spawn position material: new CANNON.Material(), fixedRotation: true, linearDamping: 0.4, collisionResponse: true // Enable collision detection }); world.addBody(zombieBody); // Define world parameters const worldSize = 16; const blockSize = 1; // Create border material // Using the previously created stripeCanvas and ctx // Draw stripes // Draw diagonal stripes const stripeWidth = 8; // Width of each stripe ctx.translate(-stripeCanvas.width, 0); // Start drawing from outside the canvas for (let x = 0; x < stripeCanvas.width * 3; x += stripeWidth * 2) { // Blue diagonal stripe ctx.beginPath(); ctx.fillStyle = '#0066FF'; ctx.moveTo(x, 0); ctx.lineTo(x + stripeWidth * 2, 0); ctx.lineTo(x + stripeWidth * 2 - stripeCanvas.height, stripeCanvas.height); ctx.lineTo(x - stripeCanvas.height, stripeCanvas.height); ctx.fill(); // White diagonal stripe ctx.beginPath(); ctx.fillStyle = '#FFFFFF'; ctx.moveTo(x + stripeWidth, 0); ctx.lineTo(x + stripeWidth * 3, 0); ctx.lineTo(x + stripeWidth * 3 - stripeCanvas.height, stripeCanvas.height); ctx.lineTo(x + stripeWidth - stripeCanvas.height, stripeCanvas.height); ctx.fill(); } const stripeTexture = new THREE.CanvasTexture(stripeCanvas); stripeTexture.wrapS = THREE.RepeatWrapping; stripeTexture.wrapT = THREE.RepeatWrapping; stripeTexture.repeat.set(1, 1); // Reset repeat as the diagonal pattern handles tiling // Create the border material with the stripe texture const borderMaterial = new THREE.MeshBasicMaterial({ map: stripeTexture, transparent: true, opacity: 0.5, side: THREE.DoubleSide }); // Create world borders function createWorldBorder(pos, size) { // Physics border const borderShape = new CANNON.Box(size); const borderBody = new CANNON.Body({ mass: 0, // Static body position: pos, shape: borderShape, material: new CANNON.Material({ friction: 0.3, restitution: 0.3 }) }); world.addBody(borderBody); // Visual border const borderGeometry = new THREE.BoxGeometry(size.x * 2, size.y * 2, size.z * 2); const borderMesh = new THREE.Mesh(borderGeometry, borderMaterial); borderMesh.position.copy(pos); scene.add(borderMesh); } // Create invisible walls at world boundaries // North wall createWorldBorder( new CANNON.Vec3(worldSize / 2, worldSize / 2, -0.5), new CANNON.Vec3(worldSize / 2, worldSize / 2, 0.5) ); // South wall createWorldBorder( new CANNON.Vec3(worldSize / 2, worldSize / 2, worldSize + 0.5), new CANNON.Vec3(worldSize / 2, worldSize / 2, 0.5) ); // East wall createWorldBorder( new CANNON.Vec3(worldSize + 0.5, worldSize / 2, worldSize / 2), new CANNON.Vec3(0.5, worldSize / 2, worldSize / 2) ); // West wall createWorldBorder( new CANNON.Vec3(-0.5, worldSize / 2, worldSize / 2), new CANNON.Vec3(0.5, worldSize / 2, worldSize / 2) ); // Create voxel world const blocks = new Map(); // Function to find the highest block at a given x,z coordinate function getHighestBlockAt(x, z) { let highestY = -1; blocks.forEach((block) => { if (block.x === x && block.z === z && block.y > highestY) { highestY = block.y; } }); return highestY + 2; // Return two blocks above the highest block } // Create a physics body for the player const playerShape = new CANNON.Sphere(0.5); const spawnX = Math.floor(worldSize / 2); const spawnZ = Math.floor(worldSize / 2); const spawnY = getHighestBlockAt(spawnX, spawnZ); const playerBody = new CANNON.Body({ mass: 5, shape: playerShape, position: new CANNON.Vec3(spawnX, spawnY + 0.5, spawnZ), // +0.5 to spawn half a block above the spawn point material: new CANNON.Material(), linearDamping: 0.9, fixedRotation: true }); world.addBody(playerBody); // Create a plane for the player to collide with const groundShape = new CANNON.Plane(); const groundBody = new CANNON.Body({ mass: 0, shape: groundShape, material: new CANNON.Material() }); groundBody.quaternion.setFromAxisAngle(new CANNON.Vec3(1, 0, 0), -Math.PI / 2); world.addBody(groundBody); // Create contact material to adjust friction between player and ground const playerGroundContact = new CANNON.ContactMaterial( playerBody.material, groundBody.material, { friction: 0.5, restitution: 0.3 } ); world.addContactMaterial(playerGroundContact); // Initialize materials first const bedrockMaterial = new THREE.MeshLambertMaterial({ color: 0x1a1a1a }); // Dark gray color for bedrock const dirtMaterial = new THREE.MeshLambertMaterial({ color: 0x8B4513 }); // Temporary brown color const rockMaterial = new THREE.MeshLambertMaterial({ color: 0x808080 }); // Temporary gray color const grassBlockMaterial = [ new THREE.MeshLambertMaterial({ color: 0x8B4513 }), // Right new THREE.MeshLambertMaterial({ color: 0x8B4513 }), // Left new THREE.MeshLambertMaterial({ color: 0x355E3B }), // Top (grass color) new THREE.MeshLambertMaterial({ color: 0x8B4513 }), // Bottom new THREE.MeshLambertMaterial({ color: 0x8B4513 }), // Front new THREE.MeshLambertMaterial({ color: 0x8B4513 }) // Back ]; // Load textures const textureLoader = new THREE.TextureLoader(); const dirtTexture = textureLoader.load('https://play.rosebud.ai/assets/pixil-frame-0.png?LmiC?D7hZ', function(texture) { console.log('Dirt texture loaded successfully'); dirtMaterial.needsUpdate = true; }, undefined, function(err) { console.error('An error occurred while loading the dirt texture:', err); } ); dirtTexture.magFilter = THREE.NearestFilter; dirtTexture.minFilter = THREE.NearestFilter; const rockTexture = textureLoader.load('https://develop.play.rosebud.ai/assets/rock block square texture, minecraft, one block only.png?G6uV', function(texture) { console.log('Rock texture loaded successfully'); rockMaterial.needsUpdate = true; }, undefined, function(err) { console.error('An error occurred while loading the rock texture:', err); } ); rockTexture.magFilter = THREE.NearestFilter; rockTexture.minFilter = THREE.NearestFilter; const grassTexture = textureLoader.load('https://develop.play.rosebud.ai/assets/grass texture square, minecraft.png?6D7X', function(texture) { console.log('Grass texture loaded successfully'); grassBlockMaterial[2].needsUpdate = true; }, undefined, function(err) { console.error('An error occurred while loading the grass texture:', err); } ); grassTexture.magFilter = THREE.NearestFilter; grassTexture.minFilter = THREE.NearestFilter; // Remove this duplicate declaration // const worldSize = 16; // const blockSize = 1; // Initialize the camera const camera = new THREE.PerspectiveCamera( 75, canvas.offsetWidth / canvas.offsetHeight, 0.1, 1000 ); camera.position.set(spawnX, spawnY + 0.5, spawnZ); camera.lookAt(spawnX, spawnY - 0.5, spawnZ); // Simple world generation for (let x = 0; x < worldSize; x++) { for (let z = 0; z < worldSize; z++) { const totalHeight = Math.floor(Math.random() * 4) + 1; // Ensure at least one block high const rockHeight = Math.max(1, totalHeight - 2); // Ensure at least one rock layer for (let j = 0; j < totalHeight; j++) { const key = `${x},${j},${z}`; blocks.set(key, { x, y: j, z, type: j === 0 ? 'bedrock' : (j < rockHeight ? 'rock' : (j === totalHeight - 1 ? 'grass' : 'dirt')) // Bedrock at bottom, then rock, grass on top, dirt in between }); } } } // Helper function to check if blocks are being created console.log(`Number of blocks created: ${blocks.size}`); // Create block mesh const blockGeometry = new THREE.BoxGeometry(blockSize, blockSize, blockSize); // Update materials with textures when they load dirtTexture.onLoad = function() { dirtMaterial.map = dirtTexture; dirtMaterial.color.setHex(0xffffff); dirtMaterial.needsUpdate = true; // Update grass block sides with dirt texture grassBlockMaterial.forEach((material, index) => { if (index !== 2) { // Skip the top face (grass) material.map = dirtTexture; material.color.setHex(0xffffff); material.needsUpdate = true; } }); }; rockTexture.onLoad = function() { rockMaterial.map = rockTexture; rockMaterial.color.setHex(0xffffff); rockMaterial.needsUpdate = true; }; grassTexture.onLoad = function() { grassBlockMaterial[2].map = grassTexture; grassBlockMaterial[2].color.setHex(0xffffff); grassBlockMaterial[2].needsUpdate = true; }; // Custom geometry for dirt with grass const grassBlockGeometry = new THREE.BoxGeometry(blockSize, blockSize, blockSize); // Adjust UV mapping for top face (grass) const uvAttribute = grassBlockGeometry.attributes.uv; for (let i = 0; i < uvAttribute.count; i++) { let u = uvAttribute.getX(i); let v = uvAttribute.getY(i); if (i >= 4 && i < 8) { // Top face vertices u = (u - 0.5) * 1.05 + 0.5; // Expand UVs slightly v = (v - 0.5) * 1.05 + 0.5; } uvAttribute.setXY(i, u, v); } const maxInstances = worldSize * worldSize * worldSize; // Maximum possible number of blocks const bedrockMesh = new THREE.InstancedMesh(blockGeometry, bedrockMaterial, maxInstances); const dirtMesh = new THREE.InstancedMesh(blockGeometry, dirtMaterial, maxInstances); const rockMesh = new THREE.InstancedMesh(blockGeometry, rockMaterial, maxInstances); const grassBlockMesh = new THREE.InstancedMesh(grassBlockGeometry, grassBlockMaterial, maxInstances); bedrockMesh.instanceMatrix.setUsage(THREE.DynamicDrawUsage); dirtMesh.instanceMatrix.setUsage(THREE.DynamicDrawUsage); rockMesh.instanceMatrix.setUsage(THREE.DynamicDrawUsage); grassBlockMesh.instanceMatrix.setUsage(THREE.DynamicDrawUsage); scene.add(bedrockMesh); scene.add(dirtMesh); scene.add(rockMesh); scene.add(grassBlockMesh); // Update block instances function updateBlockMesh() { const matrix = new THREE.Matrix4(); let bedrockIndex = 0; let dirtIndex = 0; let rockIndex = 0; let grassBlockIndex = 0; blocks.forEach((block) => { matrix.setPosition(block.x * blockSize, block.y * blockSize, block.z * blockSize); if (block.type === 'bedrock') { bedrockMesh.setMatrixAt(bedrockIndex, matrix); bedrockIndex++; } else if (block.type === 'dirt') { dirtMesh.setMatrixAt(dirtIndex, matrix); dirtIndex++; } else if (block.type === 'rock') { rockMesh.setMatrixAt(rockIndex, matrix); rockIndex++; } else if (block.type === 'grass') { grassBlockMesh.setMatrixAt(grassBlockIndex, matrix); grassBlockIndex++; } // Create a physics body for each block if it doesn't exist const key = `${block.x},${block.y},${block.z}`; if (!block.body) { const blockShape = new CANNON.Box(new CANNON.Vec3(blockSize / 2, blockSize / 2, blockSize / 2)); const blockBody = new CANNON.Body({ mass: 0, // Static body shape: blockShape, position: new CANNON.Vec3(block.x * blockSize, block.y * blockSize, block.z * blockSize) }); world.addBody(blockBody); block.body = blockBody; } }); bedrockMesh.count = bedrockIndex; dirtMesh.count = dirtIndex; rockMesh.count = rockIndex; grassBlockMesh.count = grassBlockIndex; bedrockMesh.instanceMatrix.needsUpdate = true; dirtMesh.instanceMatrix.needsUpdate = true; rockMesh.instanceMatrix.needsUpdate = true; grassBlockMesh.instanceMatrix.needsUpdate = true; } // Initial update of block mesh updateBlockMesh(); // Update material when texture loads dirtTexture.onLoad = function() { blockMaterial.needsUpdate = true; console.log('Material updated with loaded texture'); }; // Initialize the renderer const renderer = new THREE.WebGLRenderer({ antialias: true, canvas: canvas, }); renderer.setClearColor(0x87CEEB); renderer.setPixelRatio(window.devicePixelRatio); renderer.setSize(canvas.offsetWidth, canvas.offsetHeight); // Create first-person controls const controls = new PointerLockControls(camera, renderer.domElement); scene.add(controls.getObject()); // Day/night cycle variables let timeOfDay = 0; // 0 to 2π (full day cycle) const dayDuration = 120; // Duration of a full day/night cycle in seconds (2 minutes total) const dayColor = new THREE.Color(0x87CEEB); // Sky blue for day const nightColor = new THREE.Color(0x1a1a3a); // Dark blue for night // Add ambient light const ambientLight = new THREE.AmbientLight(0xffffff, 0.8); scene.add(ambientLight); // Add directional light (sun) const directionalLight = new THREE.DirectionalLight(0xffffff, 1); directionalLight.position.set(1, 1, 1).normalize(); scene.add(directionalLight); // Create sun mesh const sunGeometry = new THREE.BoxGeometry(8, 8, 1); // More square-like dimensions const sunMaterial = new THREE.MeshBasicMaterial({ color: 0xffff00, flatShading: true }); // Bright yellow with flat shading const sunMesh = new THREE.Mesh(sunGeometry, sunMaterial); scene.add(sunMesh); // Create moon mesh const moonGeometry = new THREE.BoxGeometry(6, 6, 1); // Slightly smaller than sun const moonMaterial = new THREE.MeshBasicMaterial({ color: 0xffffff, flatShading: true }); // White with flat shading const moonMesh = new THREE.Mesh(moonGeometry, moonMaterial); scene.add(moonMesh); // Set initial positions sunMesh.position.set(100, 0, 0); moonMesh.position.set(-100, 0, 0); // Add axes helper to visualize world coordinates const axesHelper = new THREE.AxesHelper(10); scene.add(axesHelper); // Raycaster for block interaction const raycaster = new THREE.Raycaster(); const centerPoint = new THREE.Vector2(0, 0); // Center of the screen // Define maximum reach distance const MAX_REACH_DISTANCE = 5; // 5 blocks reach distance // Block placement and removal function placeBlock(blockType = 'dirt') { raycaster.setFromCamera(centerPoint, camera); const intersects = raycaster.intersectObjects([dirtMesh, rockMesh, grassBlockMesh, bedrockMesh]); if (intersects.length > 0) { const intersect = intersects[0]; // Check if block is within reach if (intersect.distance > MAX_REACH_DISTANCE) { return; // Block is too far away } // Calculate the position of the new block const normal = intersect.face.normal; const position = new THREE.Vector3().copy(intersect.point).add(normal.multiplyScalar(blockSize * 0.5)); // Round the position to the nearest block coordinates const newBlock = { x: Math.round(position.x), y: Math.round(position.y), z: Math.round(position.z), type: blockType }; const key = `${newBlock.x},${newBlock.y},${newBlock.z}`; if (!blocks.has(key)) { // Create a physics body for the new block const blockShape = new CANNON.Box(new CANNON.Vec3(blockSize / 2, blockSize / 2, blockSize / 2)); const blockBody = new CANNON.Body({ mass: 0, // Static body shape: blockShape, position: new CANNON.Vec3(newBlock.x, newBlock.y, newBlock.z) }); world.addBody(blockBody); newBlock.body = blockBody; blocks.set(key, newBlock); updateBlockMesh(); console.log('New block placed at:', newBlock); // Check if the new block is directly below the player const playerPos = playerBody.position; if (Math.floor(playerPos.x) === newBlock.x && Math.floor(playerPos.z) === newBlock.z && Math.floor(playerPos.y) === newBlock.y + 1) { // Move the player up playerBody.position.y = newBlock.y + 1.5; // +1.5 to account for player height camera.position.y = playerBody.position.y; } // Animate the arm animateArm(); } } } function animateSword() { const initialRotation = swordGroup.rotation.clone(); const swingRotation = initialRotation.clone(); swingRotation.z -= Math.PI / 4; // Swing 45 degrees const duration = 150; // milliseconds const startTime = performance.now(); function updateSwordPosition(time) { const elapsedTime = time - startTime; if (elapsedTime < duration) { const progress = elapsedTime / duration; // Swing out if (progress < 0.5) { swordGroup.rotation.z = initialRotation.z - (Math.PI / 4) * (progress * 2); } // Swing back else { swordGroup.rotation.z = swingRotation.z + (Math.PI / 4) * ((progress - 0.5) * 2); } requestAnimationFrame(updateSwordPosition); } else { swordGroup.rotation.copy(initialRotation); } } requestAnimationFrame(updateSwordPosition); } function removeBlock() { raycaster.setFromCamera(centerPoint, camera); // First check if we hit the skeleton const skeletonIntersects = raycaster.intersectObject(skeletonMesh); if (skeletonIntersects.length > 0 && skeletonIntersects[0].distance <= MAX_REACH_DISTANCE) { // Hide skeleton and its physics body skeletonMesh.visible = false; const prevPosition = skeletonBody.position.clone(); skeletonBody.position.set(0, -100, 0); // Move physics body far away // Set timeout to respawn skeleton setTimeout(() => { // Random position within world bounds const newX = Math.random() * (worldSize - 2) + 1; const newZ = Math.random() * (worldSize - 2) + 1; const newY = 5; // Spawn above ground // Update positions skeletonBody.position.set(newX, newY, newZ); skeletonBody.velocity.set(0, 0, 0); // Reset velocity skeletonMesh.visible = true; }, 5000); // 5 seconds return; // Don't process further if we hit the skeleton } // Then check if we hit the zombie const zombieIntersects = raycaster.intersectObject(zombieMesh); if (zombieIntersects.length > 0 && zombieIntersects[0].distance <= MAX_REACH_DISTANCE) { // Hide zombie and its physics body zombieMesh.visible = false; zombieBody.position.y = -100; // Move physics body far away // Set timeout to respawn zombie setTimeout(() => { // Random position within world bounds const newX = Math.random() * (worldSize - 2) + 1; const newZ = Math.random() * (worldSize - 2) + 1; const newY = 5; // Spawn above ground // Update positions zombieBody.position.set(newX, newY, newZ); zombieBody.velocity.set(0, 0, 0); // Reset velocity zombieMesh.position.copy(zombieBody.position); zombieMesh.visible = true; }, 5000); // 5 seconds return; // Don't process block removal if we hit the zombie } // If we didn't hit the zombie, check for block removal const intersects = raycaster.intersectObjects([dirtMesh, rockMesh, grassBlockMesh, bedrockMesh]); if (intersects.length > 0) { const intersect = intersects[0]; // Check bedrock first const point = intersect.point.clone().sub(intersect.face.normal.multiplyScalar(blockSize * 0.5)); const blockKey = `${Math.round(point.x)},${Math.round(point.y)},${Math.round(point.z)}`; const block = blocks.get(blockKey); if (block && block.type === 'bedrock') { console.log('Cannot break bedrock!'); return; // Don't allow breaking bedrock } // Check if block is within reach if (intersect.distance > MAX_REACH_DISTANCE) { return; // Block is too far away } // Calculate the position of the block to remove const position = new THREE.Vector3().copy(intersect.point).sub(intersect.face.normal.multiplyScalar(blockSize * 0.5)); // Round the position to the nearest block coordinates const removedBlock = { x: Math.round(position.x), y: Math.round(position.y), z: Math.round(position.z) }; const removedBlockKey = `${removedBlock.x},${removedBlock.y},${removedBlock.z}`; if (blocks.has(removedBlockKey)) { const block = blocks.get(removedBlockKey); blocks.delete(removedBlockKey); updateBlockMesh(); console.log('Block removed at:', removedBlock, 'Type:', block.type); // Remove the physics body associated with this block if (block.body) { world.removeBody(block.body); } } } } // Add this after the removeBlock function const debugSphere = new THREE.Mesh( new THREE.SphereGeometry(0.1, 32, 32), new THREE.MeshBasicMaterial({ color: 0xff0000 }) ); scene.add(debugSphere); debugSphere.visible = false; // Create the arm // Create sword parts const swordGroup = new THREE.Group(); // Blade const bladeGeometry = new THREE.BoxGeometry(0.1, 0.6, 0.1); const bladeMaterial = new THREE.MeshLambertMaterial({ color: 0xCCCCCC }); // Silver color const blade = new THREE.Mesh(bladeGeometry, bladeMaterial); blade.position.y = 0.3; // Position blade above guard // Guard (cross-guard) const guardGeometry = new THREE.BoxGeometry(0.3, 0.1, 0.05); const guardMaterial = new THREE.MeshLambertMaterial({ color: 0xFFD700 }); // Gold color const guard = new THREE.Mesh(guardGeometry, guardMaterial); // Handle const handleGeometry = new THREE.BoxGeometry(0.08, 0.2, 0.08); const handleMaterial = new THREE.MeshLambertMaterial({ color: 0x8B4513 }); // Brown color const handle = new THREE.Mesh(handleGeometry, handleMaterial); handle.position.y = -0.15; // Position handle below guard // Add all parts to the sword group swordGroup.add(blade); swordGroup.add(guard); swordGroup.add(handle); // Add sword to camera camera.add(swordGroup); // Position the sword in the bottom right corner of the view swordGroup.position.set(0.4, -0.3, -0.5); swordGroup.rotation.set(0.3, -Math.PI / 4, 0); // Remove these lines as they are now handled within placeBlock and removeBlock functions // Removed duplicate updateBlockMesh function // Event listeners window.addEventListener('click', () => { if (!controls.isLocked) { controls.lock(); } else { animateSword(); // Swing sword when clicking while locked } }); window.addEventListener('mousedown', (event) => { if (controls.isLocked) { if (event.button === 0) { removeBlock(); } else if (event.button === 2) { placeBlock('dirt'); } else if (event.button === 1) { // Middle mouse button placeBlock('rock'); } } }); // Add hotbar selection listeners document.addEventListener('keydown', (e) => { // Number keys 1-3 for slot selection if (e.key >= '1' && e.key <= '3') { const newSlot = parseInt(e.key) - 1; if (newSlot < slots.length) { // Remove selection from current slot hotbar.children[selectedSlot].classList.remove('selected'); // Update selected slot selectedSlot = newSlot; // Add selection to new slot hotbar.children[selectedSlot].classList.add('selected'); } } }); // Add scroll wheel support for hotbar selection document.addEventListener('wheel', (event) => { if (controls.isLocked) { // Remove selection from current slot hotbar.children[selectedSlot].classList.remove('selected'); // Update selected slot based on scroll direction if (event.deltaY > 0) { // Scroll down selectedSlot = (selectedSlot + 1) % slots.length; } else { // Scroll up selectedSlot = (selectedSlot - 1 + slots.length) % slots.length; } // Add selection to new slot hotbar.children[selectedSlot].classList.add('selected'); } }); // Update right-click block placement to use selected block window.addEventListener('mousedown', (event) => { if (controls.isLocked) { if (event.button === 0) { removeBlock(); } else if (event.button === 2) { placeBlock(slots[selectedSlot]); } } }); // Animation loop function animate() { requestAnimationFrame(animate); // Skip physics updates if game is paused if (isPaused) { renderer.render(scene, camera); return; } // Animate border stripes if (stripeTexture) { stripeTexture.offset.x += 0.001; // Move diagonally stripeTexture.offset.y += 0.001; if (stripeTexture.offset.x >= 1) { stripeTexture.offset.x = 0; } if (stripeTexture.offset.y >= 1) { stripeTexture.offset.y = 0; } } // Update day/night cycle timeOfDay += (Math.PI * 2) / (dayDuration * 60); // Convert seconds to frames if (timeOfDay >= Math.PI * 2) timeOfDay = 0; // Calculate celestial positions const distance = 100; // Distance from center // Sun position sunMesh.position.x = Math.cos(timeOfDay) * distance; sunMesh.position.y = Math.sin(timeOfDay) * distance; sunMesh.position.z = 0; // Make sun always face the camera sunMesh.lookAt(camera.position); // Moon position (opposite to sun) moonMesh.position.x = Math.cos(timeOfDay + Math.PI) * distance; moonMesh.position.y = Math.sin(timeOfDay + Math.PI) * distance; moonMesh.position.z = 0; // Make moon always face the camera moonMesh.lookAt(camera.position); // Update directional light to match sun position directionalLight.position.copy(sunMesh.position).normalize(); // Calculate light intensities const daylight = Math.sin(timeOfDay); const lightIntensity = Math.max(0.2, daylight); // Minimum light level of 0.2 const isNight = daylight < 0; // Handle mob visibility based on time of day if (isNight) { // Night time - show mobs if (!zombieMesh.visible) { zombieMesh.visible = true; zombieBody.position.copy(zombieBody.previousPosition || new CANNON.Vec3(2, 5, 2)); zombieBody.velocity.set(0, 0, 0); } if (!skeletonMesh.visible) { skeletonMesh.visible = true; skeletonBody.position.copy(skeletonBody.previousPosition || new CANNON.Vec3(5, 5, 5)); skeletonBody.velocity.set(0, 0, 0); } } else { // Day time - hide mobs if (zombieMesh.visible) { zombieBody.previousPosition = zombieBody.position.clone(); zombieBody.position.set(0, -100, 0); // Move far below ground zombieMesh.visible = false; } if (skeletonMesh.visible) { skeletonBody.previousPosition = skeletonBody.position.clone(); skeletonBody.position.set(0, -100, 0); // Move far below ground skeletonMesh.visible = false; } } // Update lights directionalLight.intensity = Math.max(0, daylight); ambientLight.intensity = lightIntensity * 0.8; // Update sky color const currentSkyColor = new THREE.Color(); currentSkyColor.lerpColors(nightColor, dayColor, lightIntensity); scene.background = currentSkyColor; // Step the physics world world.step(1 / 60); // Update skeleton position and behavior if (skeletonBody && skeletonMesh.visible) { // Update skeleton mesh position skeletonMesh.position.copy(skeletonBody.position); // Calculate direction to player const toPlayer = new CANNON.Vec3(); toPlayer.copy(playerBody.position); toPlayer.vsub(skeletonBody.position, toPlayer); // Calculate distance to player const distanceToPlayer = toPlayer.length(); // Normalize direction toPlayer.normalize(); // Move away from player if too close if (distanceToPlayer < 5) { skeletonBody.velocity.x = -toPlayer.x * 3; skeletonBody.velocity.z = -toPlayer.z * 3; } else if (distanceToPlayer > 10) { // Move towards player if too far skeletonBody.velocity.x = toPlayer.x * 2; skeletonBody.velocity.z = toPlayer.z * 2; } else { // Stay still and shoot skeletonBody.velocity.x *= 0.95; skeletonBody.velocity.z *= 0.95; } // Shoot arrows at intervals if (Date.now() - (skeletonBody.lastShot || 0) > 2000) { // Shoot every 2 seconds // Calculate direction vector from skeleton to player const shootDirection = new CANNON.Vec3(); shootDirection.copy(playerBody.position); shootDirection.vsub(skeletonBody.position, shootDirection); shootDirection.normalize(); // Add slight upward angle shootDirection.y += 0.2; shootDirection.normalize(); // Normalize again after adding upward component shootArrow( skeletonBody.position, shootDirection ); skeletonBody.lastShot = Date.now(); } // Keep skeleton within world bounds skeletonBody.position.x = Math.max(0.5, Math.min(worldSize - 0.5, skeletonBody.position.x)); skeletonBody.position.z = Math.max(0.5, Math.min(worldSize - 0.5, skeletonBody.position.z)); } // Update arrows for (let i = arrows.length - 1; i >= 0; i--) { const arrow = arrows[i]; // Update arrow mesh position and rotation arrow.mesh.position.copy(arrow.body.position); arrow.mesh.quaternion.copy(arrow.body.quaternion); // Remove arrows after 5 seconds if (Date.now() - arrow.createdAt > 5000) { scene.remove(arrow.mesh); world.removeBody(arrow.body); arrows.splice(i, 1); } // Check for collision with player const arrowToPlayer = new CANNON.Vec3(); arrowToPlayer.copy(playerBody.position); arrowToPlayer.vsub(arrow.body.position, arrowToPlayer); if (arrowToPlayer.length() < 1) { // Arrow hit player scene.remove(arrow.mesh); world.removeBody(arrow.body); arrows.splice(i, 1); console.log("Player hit by arrow!"); // You can add damage handling here } } // Function to create red flash effect function createRedFlash() { damageOverlay.style.backgroundColor = 'rgba(255, 0, 0, 0.3)'; setTimeout(() => { damageOverlay.style.backgroundColor = 'rgba(255, 0, 0, 0)'; }, 100); } // Update zombie position and behavior if (zombieBody && zombieMesh.visible) { // Check for collision with player const zombieToPlayer = new CANNON.Vec3(); zombieToPlayer.copy(playerBody.position); zombieToPlayer.vsub(zombieBody.position, zombieToPlayer); if (zombieToPlayer.length() < 1.5) { // Collision distance threshold createRedFlash(); } // Update zombie mesh position to match physics body zombieMesh.position.copy(zombieBody.position); // Calculate direction to player const toPlayer = new CANNON.Vec3(); toPlayer.copy(playerBody.position); toPlayer.vsub(zombieBody.position, toPlayer); toPlayer.y = 0; // Keep zombie movement on horizontal plane // Normalize direction and set movement speed const zombieSpeed = 5; // Increased from 2 to 5 toPlayer.normalize(); toPlayer.scale(zombieSpeed, toPlayer); // Set zombie velocity zombieBody.velocity.x = toPlayer.x; zombieBody.velocity.z = toPlayer.z; zombieBody.velocity.y = zombieBody.velocity.y; // Check if zombie can jump const zombieRay = new CANNON.Ray(zombieBody.position, new CANNON.Vec3(0, -1, 0)); const zombieRaycastResult = new CANNON.RaycastResult(); zombieRay.intersectWorld(world, { mode: CANNON.Ray.CLOSEST, result: zombieRaycastResult }); // If zombie is on ground AND player is higher, make zombie jump const zombieIsGrounded = zombieRaycastResult.hasHit && zombieRaycastResult.distance <= 0.55; if (zombieIsGrounded) { if (playerBody.position.y > zombieBody.position.y + 1) { zombieBody.velocity.y = 5; // Initial jump velocity zombieBody.applyImpulse(new CANNON.Vec3(0, 80, 0), zombieBody.position); } } // Apply gravity to zombie zombieBody.force.set(0, -4.9 * zombieBody.mass, 0); // Keep zombie within world bounds zombieBody.position.x = Math.max(0.5, Math.min(worldSize - 0.5, zombieBody.position.x)); zombieBody.position.z = Math.max(0.5, Math.min(worldSize - 0.5, zombieBody.position.z)); } if (controls.isLocked) { const speed = 7; const velocity = new THREE.Vector3(); // Clamp player position within world bounds playerBody.position.x = Math.max(0.5, Math.min(worldSize - 0.5, playerBody.position.x)); playerBody.position.z = Math.max(0.5, Math.min(worldSize - 0.5, playerBody.position.z)); const cameraDirection = new THREE.Vector3(); camera.getWorldDirection(cameraDirection); // Calculate forward and right vectors const forward = cameraDirection.normalize(); const right = new THREE.Vector3().crossVectors(forward, camera.up).normalize(); // Apply movement based on key presses if (keys.w) velocity.add(forward.multiplyScalar(speed)); if (keys.s) velocity.sub(forward.multiplyScalar(speed)); if (keys.a) velocity.sub(right.multiplyScalar(speed)); if (keys.d) velocity.add(right.multiplyScalar(speed)); // Convert THREE.Vector3 to CANNON.Vec3 const worldVelocity = new CANNON.Vec3(velocity.x, playerBody.velocity.y, velocity.z); // Set the velocity playerBody.velocity.set(worldVelocity.x, worldVelocity.y, worldVelocity.z); // Apply gravity playerBody.force.set(0, -4.9 * playerBody.mass, 0); // Reduced gravity force to match world gravity // Sync camera position with physics body camera.position.copy(playerBody.position); // Arm maintains fixed rotation regardless of camera } else { debugSphere.visible = false; } renderer.render(scene, camera); } // Keyboard input const keys = { w: false, a: false, s: false, d: false, z: false, x: false, ' ': false, // Space key for jumping e: false // Add 'e' key for pause menu }; // Add pause state let isPaused = false; document.addEventListener('keydown', (e) => { keys[e.key.toLowerCase()] = true; if (e.key === ' ' && controls.isLocked) { jump(); } // Handle pause menu if (e.key.toLowerCase() === 'e' && controls.isLocked) { isPaused = !isPaused; pauseMenu.style.display = isPaused ? 'block' : 'none'; pauseOverlay.style.display = isPaused ? 'block' : 'none'; if (isPaused) { controls.unlock(); canvas.style.filter = 'grayscale(100%)'; } else { canvas.style.filter = 'none'; } } }); document.addEventListener('keyup', (e) => keys[e.key.toLowerCase()] = false); function jump() { // Only allow jumping if the player is on the ground const playerIsGrounded = isOnGround(); if (playerIsGrounded) { playerBody.velocity.y = 2; // Reduced initial jump velocity playerBody.applyImpulse(new CANNON.Vec3(0, 60, 0), playerBody.position); // Reduced jump impulse } } function isOnGround() { const ray = new CANNON.Ray(playerBody.position, new CANNON.Vec3(0, -1, 0)); const raycastResult = new CANNON.RaycastResult(); ray.intersectWorld(world, { mode: CANNON.Ray.CLOSEST, result: raycastResult }); return raycastResult.hasHit && raycastResult.distance <= 0.55; } // Start the animation loop animate(); // Handle window resize // Function to handle resize function onWindowResize() { const width = parentDiv.clientWidth; const height = parentDiv.clientHeight; camera.aspect = width / height; camera.updateProjectionMatrix(); renderer.setSize(width, height); // Update crosshair position crosshair.style.top = `${height / 2}px`; crosshair.style.left = `${width / 2}px`; } // Handle window resize window.addEventListener('resize', onWindowResize); // Create a ResizeObserver to watch for parent div size changes const resizeObserver = new ResizeObserver(onWindowResize); resizeObserver.observe(parentDiv);