import * as THREE from 'three'; import { PointerLockControls } from 'three/addons/controls/PointerLockControls.js'; const parentDiv = document.getElementById('renderDiv'); let canvas = document.getElementById('threeRenderCanvas'); if (!canvas) { canvas = document.createElement('canvas'); canvas.id = 'threeRenderCanvas'; parentDiv.appendChild(canvas); } // Add crosshair element const crosshair = document.createElement('div'); crosshair.id = 'crosshair'; crosshair.style.position = 'absolute'; crosshair.style.top = '50%'; crosshair.style.left = '50%'; crosshair.style.width = '20px'; crosshair.style.height = '20px'; crosshair.style.border = '2px solid white'; crosshair.style.borderRadius = '50%'; crosshair.style.transform = 'translate(-50%, -50%)'; crosshair.style.pointerEvents = 'none'; crosshair.style.display = 'none'; parentDiv.appendChild(crosshair); // Add notebook counter display const notebookCounter = document.createElement('div'); notebookCounter.id = 'notebookCounter'; notebookCounter.style.position = 'absolute'; notebookCounter.style.top = '20px'; notebookCounter.style.left = '20px'; notebookCounter.style.color = 'white'; notebookCounter.style.fontSize = '20px'; notebookCounter.style.fontFamily = 'Arial, sans-serif'; notebookCounter.textContent = 'Notebooks: 0'; parentDiv.appendChild(notebookCounter); // Initialize the scene const scene = new THREE.Scene(); // Initialize the camera const camera = new THREE.PerspectiveCamera( 75, canvas.offsetWidth / canvas.offsetHeight, 0.1, 1000 ); camera.position.set(0, 1.6, 0); // Set initial player position in the center of the hallway // 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); // Set up player controls const controls = new PointerLockControls(camera, renderer.domElement); scene.add(controls.getObject()); // Player movement variables const playerVelocity = new THREE.Vector3(); const playerDirection = new THREE.Vector3(); let moveForward = false; let moveBackward = false; // Raycaster for notebook interaction const raycaster = new THREE.Raycaster(); const mouse = new THREE.Vector2(); let moveLeft = false; let moveRight = false; // Stamina system variables let stamina = 200; // Maximum stamina let isRunning = false; const maxStamina = 200; const staminaDrainRate = 20; // Stamina drained per second while running const staminaRegenRate = 15; // Stamina regenerated per second while not running const walkSpeed = 5; // Normal walking speed const runSpeed = 9; // Running speed let collectedNotebooks = 0; // Counter for collected notebooks // Baldi AI variables let baldi; const baldiSpeed = 0.05; const baldiUpdateInterval = 1000; // Update Baldi's direction every 1 second // Set up keyboard controls const onKeyDown = function(event) { switch (event.code) { case 'ArrowUp': case 'KeyW': moveForward = true; break; case 'ArrowLeft': case 'KeyA': moveLeft = true; break; case 'ArrowDown': case 'KeyS': moveBackward = true; break; case 'ArrowRight': case 'KeyD': moveRight = true; break; case 'ShiftLeft': isRunning = true; break; } }; const onKeyUp = function(event) { switch (event.code) { case 'ArrowUp': case 'KeyW': moveForward = false; break; case 'ArrowLeft': case 'KeyA': moveLeft = false; break; case 'ArrowDown': case 'KeyS': moveBackward = false; break; case 'ArrowRight': case 'KeyD': moveRight = false; break; case 'ShiftLeft': isRunning = false; break; } }; document.addEventListener('keydown', onKeyDown); document.addEventListener('keyup', onKeyUp); // Lock controls on click renderer.domElement.addEventListener('click', function() { controls.lock(); }); // Event listener for notebook interaction window.addEventListener('click', onMouseClick, false); // Create a school function createSchool() { // Floor const floorGeometry = new THREE.PlaneGeometry(200, 100); const floorMaterial = new THREE.MeshPhongMaterial({ color: 0x8B4513 }); const floor = new THREE.Mesh(floorGeometry, floorMaterial); floor.rotation.x = -Math.PI / 2; scene.add(floor); // Walls const wallMaterial = new THREE.MeshPhongMaterial({ color: 0xADD8E6 }); // Main corridor createWall(-100, 2.5, 0, 0.1, 5, 50, wallMaterial); // Left wall createWall(100, 2.5, 0, 0.1, 5, 50, wallMaterial); // Right wall // Classrooms for (let i = -80; i <= 80; i += 40) { createClassroom(i, 0, -40); createClassroom(i, 0, 40); } // Hallways createHallway(0, 0, 0, 200, 5, 10); // Main hallway // Doors and openings for (let i = -80; i <= 80; i += 40) { createDoorAndOpening(i, 0, -25); createDoorAndOpening(i, 0, 25); } // Add roof const roofGeometry = new THREE.PlaneGeometry(200, 100); const roofMaterial = new THREE.MeshPhongMaterial({ color: 0x8B4513, side: THREE.DoubleSide }); const roof = new THREE.Mesh(roofGeometry, roofMaterial); roof.rotation.x = Math.PI / 2; roof.position.y = 5; // Adjust this value based on your wall height scene.add(roof); } function createDoorAndOpening(x, y, z) { // Create door frame const frameGeometry = new THREE.BoxGeometry(6, 4, 0.5); const frameMaterial = new THREE.MeshPhongMaterial({ color: 0x8B4513 }); const frame = new THREE.Mesh(frameGeometry, frameMaterial); frame.position.set(x, y + 2, z); scene.add(frame); // Create door const doorGeometry = new THREE.BoxGeometry(5.5, 3.8, 0.3); const doorMaterial = new THREE.MeshPhongMaterial({ color: 0xA0522D }); const door = new THREE.Mesh(doorGeometry, doorMaterial); door.position.set(x - 2.5, y + 1.9, z); scene.add(door); } function createHallway(x, y, z, width, height, depth) { const hallwayGeometry = new THREE.BoxGeometry(width, height, depth); const hallwayMaterial = new THREE.MeshPhongMaterial({ color: 0xD3D3D3 }); const hallway = new THREE.Mesh(hallwayGeometry, hallwayMaterial); hallway.position.set(x, y + height / 2, z); scene.add(hallway); } function createDoor(x, y, z) { const doorGeometry = new THREE.BoxGeometry(4, 4, 0.1); const doorMaterial = new THREE.MeshPhongMaterial({ color: 0x8B4513 }); const door = new THREE.Mesh(doorGeometry, doorMaterial); door.position.set(x, y + 2, z); scene.add(door); } function createWall(x, y, z, width, height, depth, material) { const wallGeometry = new THREE.BoxGeometry(width, height, depth); const wall = new THREE.Mesh(wallGeometry, material); wall.position.set(x, y, z); scene.add(wall); } function createClassroom(x, y, z) { const roomSize = 39; const wallMaterial = new THREE.MeshPhongMaterial({ color: 0xADD8E6 }); // Classroom walls createWall(x, 2.5, z, roomSize, 5, 0.1, wallMaterial); // Back wall // Front wall with opening createWall(x - roomSize / 2 + 3, 2.5, z + roomSize, roomSize / 2 - 3, 5, 0.1, wallMaterial); // Left part createWall(x + roomSize / 2 - 3, 2.5, z + roomSize, roomSize / 2 - 3, 5, 0.1, wallMaterial); // Right part createWall(x, 4.5, z + roomSize, 6, 1, 0.1, wallMaterial); // Top part createWall(x - roomSize / 2, 2.5, z + roomSize / 2, 0.1, 5, roomSize, wallMaterial); // Left wall createWall(x + roomSize / 2, 2.5, z + roomSize / 2, 0.1, 5, roomSize, wallMaterial); // Right wall // Desks const deskMaterial = new THREE.MeshPhongMaterial({ color: 0x8B4513 }); for (let i = 0; i < 5; i++) { for (let j = 0; j < 4; j++) { const deskGeometry = new THREE.BoxGeometry(2, 1, 1); const desk = new THREE.Mesh(deskGeometry, deskMaterial); desk.position.set(x - 15 + i * 7, 0.5, z + 10 + j * 7); scene.add(desk); // Add a notebook to some desks (e.g., every other desk) if ((i + j) % 2 === 0) { createNotebook(x - 15 + i * 7, 1.05, z + 10 + j * 7); } } } // Chalkboard const chalkboardGeometry = new THREE.BoxGeometry(20, 3, 0.1); const chalkboardMaterial = new THREE.MeshPhongMaterial({ color: 0x2F4F4F }); const chalkboard = new THREE.Mesh(chalkboardGeometry, chalkboardMaterial); chalkboard.position.set(x, 3, z + 0.1); scene.add(chalkboard); // Teacher's desk const teacherDeskGeometry = new THREE.BoxGeometry(4, 1.2, 2); const teacherDesk = new THREE.Mesh(teacherDeskGeometry, deskMaterial); teacherDesk.position.set(x - 16, 0.6, z + 4); scene.add(teacherDesk); } function createNotebook(x, y, z) { const notebookGeometry = new THREE.BoxGeometry(0.3, 0.05, 0.4); const notebookMaterial = new THREE.MeshPhongMaterial({ color: 0x1E90FF }); const notebook = new THREE.Mesh(notebookGeometry, notebookMaterial); notebook.position.set(x, y, z); scene.add(notebook); // Add interactivity to the notebook notebook.userData = { type: 'notebook', content: '', collected: false }; return notebook; // Return the notebook object } // Create the school createSchool(); // Create stamina bar createStaminaBar(); // Create Baldi createBaldi(); // Add ambient light for better visibility const ambientLight = new THREE.AmbientLight(0xffffff, 0.5); scene.add(ambientLight); // Add a point light to simulate a ceiling light const light = new THREE.PointLight(0xffffff, 0.8, 100); light.position.set(0, 10, 0); scene.add(light); // Animation loop function animate() { requestAnimationFrame(animate); if (controls.isLocked === true) { const time = performance.now(); const delta = (time - prevTime) / 1000; // Update Baldi's position if (baldi) { updateBaldi(); } // Raycasting for notebook detection raycaster.setFromCamera(new THREE.Vector2(), camera); const intersects = raycaster.intersectObjects(scene.children, true); let pointingAtNotebook = false; for (let i = 0; i < intersects.length; i++) { if (intersects[i].object.userData && intersects[i].object.userData.type === 'notebook') { pointingAtNotebook = true; break; } } document.getElementById('crosshair').style.display = pointingAtNotebook ? 'block' : 'none'; // Stamina system if (isRunning && stamina > 0) { stamina = Math.max(0, stamina - staminaDrainRate * delta); } else if (!isRunning && stamina < maxStamina) { stamina = Math.min(maxStamina, stamina + staminaRegenRate * delta); } const currentSpeed = (isRunning && stamina > 0) ? 14 : walkSpeed; playerVelocity.x -= playerVelocity.x * 5.0 * delta; playerVelocity.z -= playerVelocity.z * 5.0 * delta; playerDirection.z = Number(moveForward) - Number(moveBackward); playerDirection.x = Number(moveRight) - Number(moveLeft); playerDirection.normalize(); if (moveForward || moveBackward) playerVelocity.z -= playerDirection.z * currentSpeed * delta; if (moveLeft || moveRight) playerVelocity.x -= playerDirection.x * currentSpeed * delta; controls.moveRight(-playerVelocity.x * delta); controls.moveForward(-playerVelocity.z * delta); prevTime = time; // Update stamina bar const staminaPercentage = (stamina / maxStamina) * 100; updateStaminaBar(staminaPercentage); } // Render the scene renderer.render(scene, camera); } let prevTime = performance.now(); // 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); } // 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); // Create stamina bar function createStaminaBar() { const staminaBar = document.createElement('div'); staminaBar.id = 'staminaBar'; staminaBar.style.position = 'absolute'; staminaBar.style.bottom = '20px'; staminaBar.style.left = '20px'; staminaBar.style.width = '200px'; staminaBar.style.height = '20px'; staminaBar.style.backgroundColor = '#333'; staminaBar.style.border = '2px solid #fff'; const staminaFill = document.createElement('div'); staminaFill.id = 'staminaFill'; staminaFill.style.width = '100%'; staminaFill.style.height = '100%'; staminaFill.style.backgroundColor = '#00ff00'; staminaFill.style.transition = 'width 0.3s'; staminaBar.appendChild(staminaFill); parentDiv.appendChild(staminaBar); } // Update stamina bar function updateStaminaBar(staminaPercentage) { const staminaFill = document.getElementById('staminaFill'); if (staminaFill) { staminaFill.style.width = `${staminaPercentage}%`; if (staminaPercentage > 0) { staminaFill.style.backgroundColor = '#00ff00'; // Green } else { staminaFill.style.backgroundColor = '#ff0000'; // Red } } } function onMouseClick(event) { if (controls.isLocked) { raycaster.setFromCamera(new THREE.Vector2(), camera); const intersects = raycaster.intersectObjects(scene.children, true); for (let i = 0; i < intersects.length; i++) { if (intersects[i].object.userData && intersects[i].object.userData.type === 'notebook' && !intersects[i].object.userData.collected) { collectNotebook(intersects[i].object); break; } } } } function collectNotebook(notebook) { notebook.userData.collected = true; collectedNotebooks++; updateNotebookCounter(); scene.remove(notebook); displayNotebookContent(notebook.userData.content); } function updateNotebookCounter() { const counter = document.getElementById('notebookCounter'); counter.textContent = `Notebooks: ${collectedNotebooks}`; } function displayNotebookContent(content) { const notebookDisplay = document.createElement('div'); notebookDisplay.style.position = 'absolute'; notebookDisplay.style.top = '50%'; notebookDisplay.style.left = '50%'; notebookDisplay.style.transform = 'translate(-50%, -50%)'; notebookDisplay.style.backgroundColor = 'rgba(255, 255, 255, 0.8)'; notebookDisplay.style.padding = '20px'; notebookDisplay.style.borderRadius = '10px'; notebookDisplay.style.maxWidth = '80%'; notebookDisplay.style.maxHeight = '80%'; notebookDisplay.style.overflow = 'auto'; notebookDisplay.style.zIndex = '1000'; notebookDisplay.innerHTML = `

${content}

`; document.body.appendChild(notebookDisplay); } // Baldi AI function createBaldi() { const baldiGeometry = new THREE.BoxGeometry(1, 2, 1); const baldiMaterial = new THREE.MeshPhongMaterial({ color: 0x00FF00 }); baldi = new THREE.Mesh(baldiGeometry, baldiMaterial); baldi.position.set(0, 1, 20); // Start Baldi at the end of the hallway scene.add(baldi); } function updateBaldi() { if (!baldi) return; const playerPosition = controls.getObject().position; const direction = new THREE.Vector3().subVectors(playerPosition, baldi.position).normalize(); // Move Baldi towards the player baldi.position.add(direction.multiplyScalar(baldiSpeed)); // Ensure Baldi stays on the ground baldi.position.y = 1; // Check if Baldi caught the player if (baldi.position.distanceTo(playerPosition) < 1) { alert("Game Over! Baldi caught you!"); resetGame(); } } function resetGame() { // Reset player position controls.getObject().position.set(0, 1.6, 0); // Reset Baldi position baldi.position.set(0, 1, 20); // Reset collected notebooks collectedNotebooks = 0; updateNotebookCounter(); // Respawn notebooks respawnNotebooks(); } function respawnNotebooks() { // Remove all existing notebooks scene.children.forEach(child => { if (child.userData && child.userData.type === 'notebook') { scene.remove(child); } }); // Recreate notebooks in classrooms for (let i = -80; i <= 80; i += 40) { createClassroom(i, 0, -40); createClassroom(i, 0, 40); } }