import * as THREE from 'three'; import { OrbitControls } from 'three/addons/controls/OrbitControls.js'; import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js'; import { RenderPass } from 'three/addons/postprocessing/RenderPass.js'; import { UnrealBloomPass } from 'three/addons/postprocessing/UnrealBloomPass.js'; import { SMAAPass } from 'three/addons/postprocessing/SMAAPass.js'; // Initialize loading manager const loadingManager = new THREE.LoadingManager(); const textureLoader = new THREE.TextureLoader(loadingManager); let assetsLoaded = false; const parentDiv = document.getElementById('renderDiv'); let canvas = document.getElementById('threeRenderCanvas'); if (!canvas) { canvas = document.createElement('canvas'); canvas.id = 'threeRenderCanvas'; parentDiv.appendChild(canvas); } // Create loading screen const loadingScreen = document.createElement('div'); loadingScreen.style.position = 'absolute'; loadingScreen.style.top = '0'; loadingScreen.style.left = '0'; loadingScreen.style.width = '100%'; loadingScreen.style.height = '100%'; loadingScreen.style.backgroundColor = 'rgba(0, 0, 0, 0.8)'; loadingScreen.style.color = 'white'; loadingScreen.style.display = 'flex'; loadingScreen.style.justifyContent = 'center'; loadingScreen.style.alignItems = 'center'; loadingScreen.style.fontSize = '24px'; loadingScreen.innerHTML = 'Loading... 0%'; parentDiv.appendChild(loadingScreen); // Create coordinate display div const coordDisplay = document.createElement('div'); coordDisplay.id = 'coordDisplay'; coordDisplay.style.position = 'absolute'; coordDisplay.style.top = '10px'; coordDisplay.style.left = '10px'; coordDisplay.style.padding = '5px 10px'; coordDisplay.style.backgroundColor = 'rgba(0,0,0,0.7)'; coordDisplay.style.color = 'white'; coordDisplay.style.fontFamily = 'Arial, sans-serif'; coordDisplay.style.fontSize = '14px'; coordDisplay.style.borderRadius = '5px'; coordDisplay.style.display = 'none'; // Initially hidden parentDiv.appendChild(coordDisplay); // Create aim assist dot const aimDot = document.createElement('div'); aimDot.id = 'aimDot'; aimDot.style.position = 'absolute'; aimDot.style.top = '50%'; aimDot.style.left = '50%'; aimDot.style.width = '4px'; aimDot.style.height = '4px'; aimDot.style.backgroundColor = 'white'; aimDot.style.borderRadius = '50%'; aimDot.style.transform = 'translate(-50%, -50%)'; aimDot.style.pointerEvents = 'none'; // So it doesn't interfere with pointer lock aimDot.style.display = 'none'; // Initially hidden, show when pointer is locked parentDiv.appendChild(aimDot); // Initialize background music variable let backgroundMusic; // Loading manager events loadingManager.onProgress = function(url, itemsLoaded, itemsTotal) { const progress = (itemsLoaded / itemsTotal * 100).toFixed(0); loadingScreen.innerHTML = `Loading... ${progress}%`; }; loadingManager.onLoad = function() { assetsLoaded = true; loadingScreen.style.display = 'none'; // Initialize and play background music backgroundMusic = new Audio('https://play.rosebud.ai/assets/rosebud_official_theme_02.mp3?a1V7'); backgroundMusic.loop = true; backgroundMusic.volume = 0.04; // Adjust volume as needed (0.0 to 1.0) // Attempt to play the music. Note: Some browsers may require user interaction to play audio. backgroundMusic.play().catch((error) => { console.warn('Autoplay was prevented. User interaction is required to play the background music.'); }); }; loadingManager.onError = function(url) { console.error('Error loading:', url); }; // Initialize the scene const scene = new THREE.Scene(); const world = new CANNON.World(); world.gravity.set(0, -9.81, 0); // Standard gravity world.defaultContactMaterial.friction = 0.01; world.defaultContactMaterial.restitution = 0; world.solver.iterations = 10; world.solver.tolerance = 0.001; // Define physics materials const groundPhysMaterial = new CANNON.Material('ground'); const playerPhysMaterial = new CANNON.Material('player'); const buildingPhysMaterial = new CANNON.Material('building'); // Collision groups const GROUP_PLAYER = 1; const GROUP_GROUND = 2; const GROUP_BUILDING = 4; const clock = new THREE.Clock(); let gameTime = 0; let pathfindingGrid = []; const cubeSize = 5; // Increased cube size for better visibility const TILE_SIZE = cubeSize; // Initialize the camera const camera = new THREE.PerspectiveCamera( 75, canvas.offsetWidth / canvas.offsetHeight, 0.1, 1000 ); // Adjusted camera position based on new snippet camera.position.set(7, 3, 15); camera.lookAt(7, 0, 4); // Player variables let playerMesh, playerBody; const playerHeight = 2.0; // Player height const playerSize = 0.5; // Player width and depth const playerMoveSpeed = 5; const playerLookSpeed = 0.002; // For mouse look, if we add it later let moveForward = false; let moveBackward = false; let moveLeft = false; let moveRight = false; let isNoclipActive = false; // Variable to track noclip state let gridHelper; // For visualizing placement grid let flashlight; let compassCanvas, compassTexture, compassMesh, compassCamera, compassScene; // Building-related constants (moved up for early access) let legsEnemy; // To hold the enemy object let armsEnemy; let eyeEnemy; const legsStillTexture = textureLoader.load('https://play.rosebud.ai/assets/legs still.png?XFcs'); const legsWalkTexture = textureLoader.load('https://play.rosebud.ai/assets/legs walk.png?YyjI'); const armsStillTexture = textureLoader.load('https://play.rosebud.ai/assets/arms still.png?2xqx'); const armsWalkTexture = textureLoader.load('https://play.rosebud.ai/assets/arms walk.png?6cpN'); const eyeTexture = textureLoader.load('https://play.rosebud.ai/assets/the eye.png?sfgc'); let legsState = 'idle'; // 'idle', 'walking', 'retreating' let legsWaitTimer = 13 + Math.random() * 7; // Initial wait time 13-20s let legsWalkTimer = 0; let legsStepCount = 20; let armsState = 'idle'; let armsWaitTimer = 6 + Math.random() * 4; let armsWalkTimer = 0; let armsStepCount = 5; let eyeState = 'idle'; let eyeWaitTimer = 15; // Door and Button variables const doors = []; // To store door meshes and bodies const buttons = []; // To store door button meshes const tvButtons = []; // To store TV camera control button meshes const DOOR_OPEN_Y_OFFSET = cubeSize; // How much higher the door is when open const DOOR_CLOSED_Y_OFFSET = 0; // Y offset when closed (on the ground) const INTERACTION_DISTANCE = 2.5; // Max distance to interact with buttons // TV Screen variables let tvScreenMesh, tvScreenMaterial; // tvScreenMaterial will be updatable const TV_SCREEN_WIDTH = 2.5; const TV_SCREEN_HEIGHT = 1.5; const TV_SCREEN_THICKNESS = 0.2; const TV_SCREEN_POSITION = new THREE.Vector3(2.8, 2.5, 57); // New TV position const GROUP_ENEMY = 8; // Initialize the renderer with HDR const renderer = new THREE.WebGLRenderer({ antialias: true, canvas: canvas, powerPreference: "high-performance" }); renderer.setPixelRatio(window.devicePixelRatio); renderer.setSize(canvas.offsetWidth, canvas.offsetHeight); renderer.shadowMap.enabled = true; renderer.shadowMap.type = THREE.PCFSoftShadowMap; renderer.outputEncoding = THREE.sRGBEncoding; renderer.toneMapping = THREE.ACESFilmicToneMapping; renderer.toneMappingExposure = 1.2; // Initialize post-processing const composer = new EffectComposer(renderer); // Regular scene render pass const renderPass = new RenderPass(scene, camera); composer.addPass(renderPass); // Add subtle bloom effect const bloomPass = new UnrealBloomPass( new THREE.Vector2(window.innerWidth, window.innerHeight), 0.2, // bloom strength 0.4, // radius 0.9 // threshold ); composer.addPass(bloomPass); // Add anti-aliasing const smaaPass = new SMAAPass( window.innerWidth * renderer.getPixelRatio(), window.innerHeight * renderer.getPixelRatio() ); composer.addPass(smaaPass); // Initialize composer size composer.setSize(parentDiv.clientWidth, parentDiv.clientHeight); // Define sky colors for environmental lighting const skyColor = new THREE.Color(0x87CEEB); // Bright sky blue const groundColor = new THREE.Color(0xFFFFFF); // White ground reflection // Create sky dome with improved colors 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: skyColor }, bottomColor: { value: groundColor }, offset: { value: 33 }, exponent: { value: 0.6 } }; const skyGeo = new THREE.SphereGeometry(500, 32, 15); const skyMat = new THREE.ShaderMaterial({ uniforms: uniforms, vertexShader: vertexShader, fragmentShader: fragmentShader, side: THREE.BackSide }); const sky = new THREE.Mesh(skyGeo, skyMat); scene.add(sky); // Modify OrbitControls setup // const controls = new OrbitControls(camera, renderer.domElement); // controls.enableDamping = true; // controls.dampingFactor = 0.25; // Adjusted damping factor // controls.screenSpacePanning = false; // controls.maxPolarAngle = Math.PI / 2; // Pointer Lock for FPS controls canvas.addEventListener('click', () => { canvas.requestPointerLock(); if (aimDot) aimDot.style.display = 'block'; // Show aim dot when pointer is locked }); document.addEventListener('pointerlockchange', () => { if (document.pointerLockElement !== canvas && aimDot) { aimDot.style.display = 'none'; // Hide aim dot when pointer is unlocked } }, false); let euler = new THREE.Euler(0, 0, 0, 'YXZ'); let vec = new THREE.Vector3(); function onMouseMove(event) { if (document.pointerLockElement === canvas) { euler.y -= event.movementX * playerLookSpeed; euler.x -= event.movementY * playerLookSpeed; euler.x = Math.max(-Math.PI / 2, Math.min(Math.PI / 2, euler.x)); // Clamp vertical rotation camera.quaternion.setFromEuler(euler); } } document.addEventListener('mousemove', onMouseMove, false); // Create flat terrain function createTerrain() { const size = 200; // Create simple flat plane for visuals const geometry = new THREE.PlaneGeometry(size, size); const floorTexture = textureLoader.load('https://play.rosebud.ai/assets/floor.webp?ZHtT'); floorTexture.wrapS = floorTexture.wrapT = THREE.RepeatWrapping; floorTexture.repeat.set(20, 20); // Adjust repeat for terrain size floorTexture.encoding = THREE.sRGBEncoding; const terrainMaterial = new THREE.MeshStandardMaterial({ map: floorTexture, roughness: 0.9, metalness: 0.1, envMapIntensity: 0.5 }); const terrain = new THREE.Mesh(geometry, terrainMaterial); terrain.rotation.x = -Math.PI / 2; terrain.receiveShadow = true; scene.add(terrain); const groundShape = new CANNON.Box(new CANNON.Vec3(size / 2, 0.1, size / 2)); const groundBody = new CANNON.Body({ mass: 0, material: groundPhysMaterial, collisionFilterGroup: GROUP_GROUND, collisionFilterMask: GROUP_PLAYER | GROUP_ENEMY }); groundBody.addShape(groundShape); groundBody.position.set(0, -0.1, 0); world.addBody(groundBody); return terrain; } // Setup improved lighting system const sunLight = new THREE.DirectionalLight(skyColor, 2.0); sunLight.position.set(-50, 100, -50); sunLight.castShadow = true; sunLight.shadow.mapSize.width = 2048; sunLight.shadow.mapSize.height = 2048; sunLight.shadow.camera.near = 10; sunLight.shadow.camera.far = 400; sunLight.shadow.camera.left = -100; sunLight.shadow.camera.right = 100; sunLight.shadow.camera.top = 100; sunLight.shadow.camera.bottom = -100; sunLight.shadow.bias = -0.001; scene.add(sunLight); scene.add(sunLight.target); // Ensure target is added if not parented // Add hemisphere light to simulate sky and ground bounce light const hemiLight = new THREE.HemisphereLight(skyColor, groundColor, 0.2); scene.add(hemiLight); // Light to help illuminate the scene softly (from provided snippet) const ambient = new THREE.AmbientLight(0x101010); // Reduced general ambient light scene.add(ambient); // Create initial scene const terrain = createTerrain(); // Building-related materials (cubeSize moved up) const roomMaterial = new THREE.MeshStandardMaterial({ color: 0x303030, roughness: 0.8, metalness: 0.2 }); const sharedTexture = textureLoader.load('https://play.rosebud.ai/assets/floor.webp?ZHtT'); sharedTexture.encoding = THREE.sRGBEncoding; const wallTextureRepeatU = 1; // How many times texture repeats along width of a wall segment const wallTextureRepeatV = 1; // How many times texture repeats along height of a wall segment const wallMaterial = new THREE.MeshStandardMaterial({ map: sharedTexture.clone(), // Clone texture for independent repeat/offset roughness: 0.9, metalness: 0.1, envMapIntensity: 0.5 }); wallMaterial.map.wrapS = wallMaterial.map.wrapT = THREE.RepeatWrapping; wallMaterial.map.repeat.set(wallTextureRepeatU, wallTextureRepeatV); // Create Player function createPlayer() { // Player Mesh const playerGeometry = new THREE.BoxGeometry(playerSize, playerHeight, playerSize); const playerMaterial = new THREE.MeshStandardMaterial({ color: 0x00ff00, visible: false }); // Make player invisible for FPS playerMesh = new THREE.Mesh(playerGeometry, playerMaterial); playerMesh.castShadow = true; // scene.add(playerMesh); // Player mesh is not added to scene for first person // Player Physics Body const playerShape = new CANNON.Box(new CANNON.Vec3(playerSize / 2, playerHeight / 2, playerSize / 2)); playerBody = new CANNON.Body({ mass: 70, // Approximate human mass in kg position: new CANNON.Vec3(2, playerHeight / 2 + 0.1, 67), // New player spawn position shape: playerShape, material: playerPhysMaterial, collisionFilterGroup: GROUP_PLAYER, collisionFilterMask: GROUP_GROUND | GROUP_BUILDING | GROUP_ENEMY // Collides with ground, building, and enemy }); playerBody.linearDamping = 0.9; // To prevent sliding forever playerBody.angularDamping = 1.0; // To prevent spinning playerBody.fixedRotation = true; // Prevent player from tipping over world.addBody(playerBody); // Player-Ground contact material const playerGroundContactMaterial = new CANNON.ContactMaterial( groundPhysMaterial, playerPhysMaterial, { friction: 0.4, // Normal friction restitution: 0.0 // No bounce } ); world.addContactMaterial(playerGroundContactMaterial); // Player-Building contact material const playerBuildingContactMaterial = new CANNON.ContactMaterial( buildingPhysMaterial, playerPhysMaterial, { friction: 0.1, // Low friction against walls restitution: 0.0 // No bounce } ); world.addContactMaterial(playerBuildingContactMaterial); // Adjust camera to be at player's head camera.position.set(0, playerHeight * 0.85, 0.0254); // Position camera near top, slightly forward (1 inch) playerMesh.add(camera); // Attach camera to player mesh (which will follow playerBody) scene.add(playerMesh); // Add player mesh (with camera) to scene // Add flashlight, attached to the camera flashlight = new THREE.SpotLight(0xffffff, 2.5, 35, Math.PI / 6, 0.2, 1.5); // Increased intensity, distance, angle slightly flashlight.position.set(0, 0, 0.1); // Position slightly in front of camera's near plane, relative to camera flashlight.castShadow = true; // Optional: flashlight can cast shadows flashlight.shadow.mapSize.width = 256; // Lower res for performance flashlight.shadow.mapSize.height = 256; flashlight.shadow.camera.near = 0.1; flashlight.shadow.camera.far = 25; flashlight.shadow.bias = -0.01; const flashlightTarget = new THREE.Object3D(); camera.add(flashlightTarget); // Add target as child of camera flashlightTarget.position.set(0, 0, -1); // Position target in front of camera flashlight.target = flashlightTarget; camera.add(flashlight); // Add flashlight as child of camera } createPlayer(); function createLegsEnemy() { legsEnemy = {}; // Initialize the object first const legsMaterial = new THREE.SpriteMaterial({ map: legsStillTexture, transparent: true, }); const legsSprite = new THREE.Sprite(legsMaterial); const aspect = 1280 / 720; const height = 2.5; legsSprite.scale.set(height * aspect, height, 1); const startX = 5; const startZ = -61; const startY = 1; legsSprite.position.set(startX, 1, startZ); legsEnemy.debugHelper = new THREE.BoxHelper(legsSprite, 0xff0000); legsEnemy.debugHelper.visible = false; scene.add(legsEnemy.debugHelper); scene.add(legsSprite); const enemyShape = new CANNON.Box(new CANNON.Vec3((height * aspect) / 4, height / 2, 0.1)); const enemyBody = new CANNON.Body({ mass: 50, position: new CANNON.Vec3(startX, startY + 0.1, startZ), shape: enemyShape, material: playerPhysMaterial, // Same material properties as player for now collisionFilterGroup: GROUP_ENEMY, collisionFilterMask: GROUP_PLAYER | GROUP_GROUND | GROUP_BUILDING }); enemyBody.linearDamping = 0.95; enemyBody.fixedRotation = true; world.addBody(enemyBody); legsEnemy.sprite = legsSprite; legsEnemy.body = enemyBody; legsEnemy.material = legsMaterial; legsEnemy.startPosition = new CANNON.Vec3(startX, startY + 0.1, startZ); enemyBody.addEventListener('collide', (event) => { const contact = event.contact; const otherBody = contact.bi.id === enemyBody.id ? contact.bj : contact.bi; const door = doors.find(d => d.body.id === otherBody.id); if (door && !door.isOpen) { legsState = 'retreating'; legsEnemy.material.map = legsWalkTexture; console.log("Enemy hit a closed door, retreating!"); } }); } createLegsEnemy(); function createArmsEnemy() { armsEnemy = {}; // Initialize the object first const armsMaterial = new THREE.SpriteMaterial({ map: armsStillTexture, transparent: true, }); const armsSprite = new THREE.Sprite(armsMaterial); const aspect = 1280 / 720; const height = 2.5; armsSprite.scale.set(height * aspect, height, 1); const startX = 15; const startZ = -59; const startY = 1; armsSprite.position.set(startX, 1, startZ); armsEnemy.debugHelper = new THREE.BoxHelper(armsSprite, 0xff0000); armsEnemy.debugHelper.visible = false; scene.add(armsEnemy.debugHelper); scene.add(armsSprite); const enemyShape = new CANNON.Box(new CANNON.Vec3((height * aspect) / 4, height / 2, 0.1)); const enemyBody = new CANNON.Body({ mass: 50, position: new CANNON.Vec3(startX, startY + 0.1, startZ), shape: enemyShape, material: playerPhysMaterial, // Same material properties as player for now collisionFilterGroup: GROUP_ENEMY, collisionFilterMask: GROUP_PLAYER | GROUP_GROUND | GROUP_BUILDING }); enemyBody.linearDamping = 0.95; enemyBody.fixedRotation = true; world.addBody(enemyBody); armsEnemy.sprite = armsSprite; armsEnemy.body = enemyBody; armsEnemy.material = armsMaterial; armsEnemy.startPosition = new CANNON.Vec3(startX, startY + 0.1, startZ); enemyBody.addEventListener('collide', (event) => { const contact = event.contact; const otherBody = contact.bi.id === enemyBody.id ? contact.bj : contact.bi; const door = doors.find(d => d.body.id === otherBody.id); if (door && !door.isOpen) { armsState = 'retreating'; armsEnemy.material.map = armsWalkTexture; console.log("Enemy hit a closed door, retreating!"); } }); } createArmsEnemy(); function createEyeEnemy() { eyeEnemy = {}; const eyeMaterial = new THREE.SpriteMaterial({ map: eyeTexture, transparent: true, }); const eyeSprite = new THREE.Sprite(eyeMaterial); const aspect = 1280 / 720; const height = 2.0; eyeSprite.scale.set(height * aspect, height, 1); const spawnPoints = [{ x: 25, z: 64 }, { x: -20, z: 64 }]; const spawnPoint = spawnPoints[Math.floor(Math.random() * spawnPoints.length)]; const startX = spawnPoint.x; const startZ = spawnPoint.z; const startY = 1; eyeSprite.position.set(startX, startY, startZ); scene.add(eyeSprite); const enemyShape = new CANNON.Box(new CANNON.Vec3((height * aspect) / 4, height / 2, 0.1)); const enemyBody = new CANNON.Body({ mass: 50, position: new CANNON.Vec3(startX, startY, startZ), shape: enemyShape, material: playerPhysMaterial, collisionFilterGroup: GROUP_ENEMY, collisionFilterMask: GROUP_PLAYER | GROUP_GROUND | GROUP_BUILDING }); enemyBody.linearDamping = 0.95; enemyBody.fixedRotation = true; world.addBody(enemyBody); eyeEnemy.sprite = eyeSprite; eyeEnemy.body = enemyBody; eyeEnemy.material = eyeMaterial; eyeEnemy.startPosition = new CANNON.Vec3(startX, startY, startZ); enemyBody.addEventListener('collide', (event) => { const contact = event.contact; const otherBody = contact.bi.id === enemyBody.id ? contact.bj : contact.bi; const door = doors.find(d => d.body.id === otherBody.id); if (door && !door.isOpen) { scene.remove(eyeEnemy.sprite); world.removeBody(eyeEnemy.body); eyeEnemy = null; console.log("The Eye was despawned by a closed door."); } }); } createEyeEnemy(); // Building generation const grid = [ "000000000011111111111100000000", "000000000010000000000100000000", "000000000010000000000100000000", "000000001110000000000100000000", "000011111000000000000111110000", "000010000000000000000000010000", "000010000000000000000000010000", "000010001110000000000000010000", "000010001010000000000100010000", "000010001010000000000100010000", "000011111010000000000100010000", "000000000010000000000100010000", "000001111110000000000100010000", "000001000000000000000100010000", "000001000000000000000111110000", "000001000000000000000100000000", "000001000000000000000100000000", "000001111100000000000111110000", "000000000100000000000000010000", "000000000100000100000000010000", "000000000100000100000111110000", "000000000100001110000100000000", "000000000100011111000100000000", "000000000100111111100100000000", "000000000100111111100100000000", "000000000100111111100100000000", "000000000100100000100100000000", "000000000100100000100100000000", "000000000100000000000100000000", "000000000111111111111100000000" ]; const buildingContainer = new THREE.Group(); // Group to hold all building parts for (let z = 0; z < grid.length; z++) { for (let x = 0; x < grid[z].length; x++) { let val = grid[z][x]; const geometry = new THREE.BoxGeometry(cubeSize, cubeSize, cubeSize); let cube; if (val === '1') { // Room cube = new THREE.Mesh(geometry, roomMaterial); cube.castShadow = true; cube.receiveShadow = true; // Add physics body for the room cube const cubeShape = new CANNON.Box(new CANNON.Vec3(cubeSize / 2, cubeSize / 2, cubeSize / 2)); const cubeBody = new CANNON.Body({ mass: 0, // Static body shape: cubeShape, material: buildingPhysMaterial, collisionFilterGroup: GROUP_BUILDING, collisionFilterMask: GROUP_PLAYER | GROUP_ENEMY // Building parts collide with player and enemy }); const buildingWidth = grid[0].length * cubeSize; const buildingDepth = grid.length * cubeSize; cubeBody.position.set( x * cubeSize - buildingWidth / 2 + cubeSize / 2, cubeSize / 2, z * cubeSize - buildingDepth / 2 + cubeSize / 2 ); world.addBody(cubeBody); cube.userData.physicsBody = cubeBody; // Link mesh to body if needed later } // '0' now means empty space, so no cube is created for it. if (cube) { // Center the building around the origin const buildingWidth = grid[0].length * cubeSize; const buildingDepth = grid.length * cubeSize; cube.position.set( x * cubeSize - buildingWidth / 2 + cubeSize / 2, cubeSize / 2, // Position cubes on top of the terrain z * cubeSize - buildingDepth / 2 + cubeSize / 2 ); buildingContainer.add(cube); } } } // Calculate building dimensions const buildingWidth = grid[0].length * cubeSize; const buildingDepth = grid.length * cubeSize; // Add Roof const roofThickness = 0.5; // Thickness of the roof const roofYPosition = cubeSize * 1.2; // Lowered roof position const roofGeometry = new THREE.BoxGeometry(buildingWidth, roofThickness, buildingDepth); const roofTexture = textureLoader.load('https://play.rosebud.ai/assets/floor.webp?ZHtT'); roofTexture.encoding = THREE.sRGBEncoding; roofTexture.wrapS = roofTexture.wrapT = THREE.RepeatWrapping; // Calculate repeat based on building dimensions and texture aspect ratio if needed // For simplicity, let's tile it a few times. buildingWidth/cubeSize gives number of cubes. const roofRepeatX = buildingWidth / (cubeSize * 2); // Adjust divisor for desired tiling density const roofRepeatZ = buildingDepth / (cubeSize * 2); // Adjust divisor for desired tiling density roofTexture.repeat.set(roofRepeatX, roofRepeatZ); const roofMaterial = new THREE.MeshStandardMaterial({ map: roofTexture, roughness: 0.8, metalness: 0.2, envMapIntensity: 0.5 }); const roofMesh = new THREE.Mesh(roofGeometry, roofMaterial); roofMesh.position.set(0, roofYPosition + roofThickness / 2, 0); // Centered over the building roofMesh.castShadow = true; roofMesh.receiveShadow = true; buildingContainer.add(roofMesh); // Add physics body for the roof const roofShape = new CANNON.Box(new CANNON.Vec3(buildingWidth / 2, roofThickness / 2, buildingDepth / 2)); const roofBody = new CANNON.Body({ mass: 0, // Static body shape: roofShape, material: buildingPhysMaterial, position: new CANNON.Vec3(0, roofYPosition + roofThickness / 2, 0), collisionFilterGroup: GROUP_BUILDING, collisionFilterMask: GROUP_PLAYER }); world.addBody(roofBody); roofMesh.userData.physicsBody = roofBody; // Add exterior walls (adjust height to reach under the new roof) const wallHeight = roofYPosition; // Walls go up to the underside of the roof const wallThickness = cubeSize; for (let i = 0; i < grid.length; i++) { // Iterate along depth (z-axis) // Front and Back Walls if (grid[i][0] === '0' || grid[i][grid[0].length - 1] === '0') { // Check for openings // Simplified: Add full walls for now } } // Add walls along X axis (sides) for (let x = 0; x < grid[0].length; x++) { // Wall at z = -buildingDepth / 2 (front assuming standard orientation) const wallFrontMesh = new THREE.Mesh(new THREE.BoxGeometry(cubeSize, wallHeight, wallThickness), wallMaterial); wallFrontMesh.position.set(x * cubeSize - buildingWidth / 2 + cubeSize / 2, wallHeight / 2, -buildingDepth / 2 - wallThickness / 2); wallFrontMesh.castShadow = true; wallFrontMesh.receiveShadow = true; buildingContainer.add(wallFrontMesh); const wallFrontBody = new CANNON.Body({ mass: 0, shape: new CANNON.Box(new CANNON.Vec3(cubeSize / 2, wallHeight / 2, wallThickness / 2)), material: buildingPhysMaterial, collisionFilterGroup: GROUP_BUILDING, collisionFilterMask: GROUP_PLAYER | GROUP_ENEMY }); wallFrontBody.position.copy(wallFrontMesh.position); world.addBody(wallFrontBody); // Wall at z = buildingDepth / 2 (back) const wallBackMesh = new THREE.Mesh(new THREE.BoxGeometry(cubeSize, wallHeight, wallThickness), wallMaterial); wallBackMesh.position.set(x * cubeSize - buildingWidth / 2 + cubeSize / 2, wallHeight / 2, buildingDepth / 2 + wallThickness / 2); wallBackMesh.castShadow = true; wallBackMesh.receiveShadow = true; buildingContainer.add(wallBackMesh); const wallBackBody = new CANNON.Body({ mass: 0, shape: new CANNON.Box(new CANNON.Vec3(cubeSize / 2, wallHeight / 2, wallThickness / 2)), material: buildingPhysMaterial, collisionFilterGroup: GROUP_BUILDING, collisionFilterMask: GROUP_PLAYER | GROUP_ENEMY }); wallBackBody.position.copy(wallBackMesh.position); world.addBody(wallBackBody); } // Add walls along Z axis (sides) for (let z = 0; z < grid.length; z++) { // Wall at x = -buildingWidth / 2 (left) const wallLeftMesh = new THREE.Mesh(new THREE.BoxGeometry(wallThickness, wallHeight, cubeSize), wallMaterial); wallLeftMesh.position.set(-buildingWidth / 2 - wallThickness / 2, wallHeight / 2, z * cubeSize - buildingDepth / 2 + cubeSize / 2); wallLeftMesh.castShadow = true; wallLeftMesh.receiveShadow = true; buildingContainer.add(wallLeftMesh); const wallLeftBody = new CANNON.Body({ mass: 0, shape: new CANNON.Box(new CANNON.Vec3(wallThickness / 2, wallHeight / 2, cubeSize / 2)), material: buildingPhysMaterial, collisionFilterGroup: GROUP_BUILDING, collisionFilterMask: GROUP_PLAYER | GROUP_ENEMY }); wallLeftBody.position.copy(wallLeftMesh.position); world.addBody(wallLeftBody); // Wall at x = buildingWidth / 2 (right) const wallRightMesh = new THREE.Mesh(new THREE.BoxGeometry(wallThickness, wallHeight, cubeSize), wallMaterial); wallRightMesh.position.set(buildingWidth / 2 + wallThickness / 2, wallHeight / 2, z * cubeSize - buildingDepth / 2 + cubeSize / 2); wallRightMesh.castShadow = true; wallRightMesh.receiveShadow = true; buildingContainer.add(wallRightMesh); const wallRightBody = new CANNON.Body({ mass: 0, shape: new CANNON.Box(new CANNON.Vec3(wallThickness / 2, wallHeight / 2, cubeSize / 2)), material: buildingPhysMaterial, collisionFilterGroup: GROUP_BUILDING, collisionFilterMask: GROUP_PLAYER | GROUP_ENEMY }); wallRightBody.position.copy(wallRightMesh.position); world.addBody(wallRightBody); } function initializePathfindingGrid() { const gridWidth = grid[0].length; const gridHeight = grid.length; pathfindingGrid = Array(gridHeight).fill(null).map(() => Array(gridWidth).fill(0)); for (let z = 0; z < gridHeight; z++) { for (let x = 0; x < gridWidth; x++) { if (grid[z][x] === '1') { pathfindingGrid[z][x] = 1; // Mark walls as obstacles } } } } function worldToGrid(worldPos) { const buildingWidth = grid[0].length * TILE_SIZE; const buildingDepth = grid.length * TILE_SIZE; const gridX = Math.floor((worldPos.x + buildingWidth / 2) / TILE_SIZE); const gridZ = Math.floor((worldPos.z + buildingDepth / 2) / TILE_SIZE); return { x: gridX, z: gridZ }; } function findPath(startPos, endPos) { const startNode = worldToGrid(startPos); const endNode = worldToGrid(endPos); if (!pathfindingGrid[startNode.z] || !pathfindingGrid[endNode.z] || pathfindingGrid[startNode.z][startNode.x] === 1 || pathfindingGrid[endNode.z][endNode.x] === 1) { return null; // Invalid start or end position } let openSet = [{ ...startNode, g: 0, h: 0, f: 0, parent: null }]; let closedSet = []; while (openSet.length > 0) { openSet.sort((a, b) => a.f - b.f); let currentNode = openSet.shift(); if (currentNode.x === endNode.x && currentNode.z === endNode.z) { let path = []; let temp = currentNode; while (temp) { path.push({ x: temp.x, z: temp.z }); temp = temp.parent; } return path.reverse(); } closedSet.push(currentNode); let neighbors = [{ x: currentNode.x, z: currentNode.z - 1 }, // North { x: currentNode.x, z: currentNode.z + 1 }, // South { x: currentNode.x - 1, z: currentNode.z }, // West { x: currentNode.x + 1, z: currentNode.z } // East ]; for (let neighbor of neighbors) { if (neighbor.z < 0 || neighbor.z >= pathfindingGrid.length || neighbor.x < 0 || neighbor.x >= pathfindingGrid[0].length || pathfindingGrid[neighbor.z][neighbor.x] === 1) { continue; } if (closedSet.find(node => node.x === neighbor.x && node.z === neighbor.z)) { continue; } let gScore = currentNode.g + 1; let existingNeighbor = openSet.find(node => node.x === neighbor.x && node.z === neighbor.z); if (!existingNeighbor || gScore < existingNeighbor.g) { const hScore = Math.abs(neighbor.x - endNode.x) + Math.abs(neighbor.z - endNode.z); const fScore = gScore + hScore; if (existingNeighbor) { existingNeighbor.g = gScore; existingNeighbor.f = fScore; existingNeighbor.parent = currentNode; } else { openSet.push({ ...neighbor, g: gScore, h: hScore, f: fScore, parent: currentNode }); } } } } return null; // No path found } // Door constants // New door dimensions based on cubeSize (tile size) const newDoorLength = cubeSize; // This will be the dimension aligned with the wall after rotation const newDoorHeight = cubeSize; // Height of the door, same as cube const doorThickness = 0.2; // Kept for the "skinny" dimension const doorYPosition = newDoorHeight / 2; // Base Y position when closed function createDoor(id, x, z, rotationY = 0, isOpenInitially = true) { const initialY = doorYPosition + (isOpenInitially ? DOOR_OPEN_Y_OFFSET : DOOR_CLOSED_Y_OFFSET); const doorGeometry = new THREE.BoxGeometry(newDoorLength, newDoorHeight, doorThickness); const doorMaterial = wallMaterial.clone(); doorMaterial.map = sharedTexture.clone(); // Ensure each door has its own texture instance for potential modification doorMaterial.map.wrapS = doorMaterial.map.wrapT = THREE.RepeatWrapping; doorMaterial.map.repeat.set(newDoorLength / cubeSize, newDoorHeight / cubeSize); // Adjust texture repeat to door size doorMaterial.color = new THREE.Color(0x553311); // Dark wood color const doorMesh = new THREE.Mesh(doorGeometry, doorMaterial); doorMesh.position.set(x, initialY, z); doorMesh.rotation.y = rotationY; doorMesh.castShadow = true; doorMesh.receiveShadow = true; buildingContainer.add(doorMesh); const doorShape = new CANNON.Box(new CANNON.Vec3(newDoorLength / 2, newDoorHeight / 2, doorThickness / 2)); const doorBody = new CANNON.Body({ mass: 0, // Static position: new CANNON.Vec3(x, initialY, z), shape: doorShape, material: buildingPhysMaterial, collisionFilterGroup: GROUP_BUILDING, collisionFilterMask: GROUP_PLAYER | GROUP_ENEMY }); doorBody.quaternion.setFromEuler(0, rotationY, 0); world.addBody(doorBody); doorMesh.userData.physicsBody = doorBody; doors.push({ id: id, mesh: doorMesh, body: doorBody, isOpen: isOpenInitially, targetY: initialY }); return doorMesh; } initializePathfindingGrid(); function createButton(targetDoorId, x, y, z, rotationY = 0) { const buttonSize = 0.3; const buttonDepth = 0.1; const buttonGeometry = new THREE.BoxGeometry(buttonSize, buttonSize, buttonDepth); const buttonMaterial = new THREE.MeshStandardMaterial({ color: 0xff0000, roughness: 0.5 }); const buttonMesh = new THREE.Mesh(buttonGeometry, buttonMaterial); // Position button to be on a wall, facing outwards. // If wall is at Z=64, and button is at X=15, Z=64, it's on a wall parallel to X axis. // We want it to stick out from this wall. // If rotationY is 0, it sticks out along Z. If PI/2, along X. buttonMesh.position.set(x, y, z); buttonMesh.rotation.y = rotationY; scene.add(buttonMesh); // Add to scene, not building container, if it's separate // No physics for buttons for now, just visual cues and distance check. buttons.push({ mesh: buttonMesh, targetDoorId: targetDoorId }); return buttonMesh; } // Office cube center, based on player's new starting position const officeX_playerStart = -2.5; const officeZ_playerStart = 37.5; // Remove previous door creation calls // const leftOfficeCubeX = (13 * cubeSize - buildingWidth / 2 + cubeSize / 2); // createDoor(leftOfficeCubeX - cubeSize / 2 + doorThickness / 2, doorYPosition, officeZ, Math.PI / 2); // const rightOfficeCubeX = (15 * cubeSize - buildingWidth / 2 + cubeSize / 2); // createDoor(rightOfficeCubeX + cubeSize / 2 - doorThickness / 2, doorYPosition, officeZ, Math.PI / 2); // createDoor(officeX, doorYPosition, officeZ + cubeSize / 2 - doorThickness / 2, 0); // Add new doors at specified world coordinates // Assuming doors are in walls parallel to the X-axis (rotation 0), or need specific rotation. // If the wall at Z=67 runs along X, door rotation is 0 for original orientation. // Now, we want all doors rotated 90 degrees (Math.PI / 2). // The y-position for closed doors is doorYPosition (which is cubeSize / 2). Open is higher. // Create doors - they start OPEN. // Door IDs can be simple strings or numbers. createDoor("door1", 17, 67, Math.PI / 2, true); // Door at X=17, Z=67, rotated 90 deg, initially open createDoor("door2", -12, 67, Math.PI / 2, true); // Door at X=-12, Z=67, rotated 90 deg, initially open // Create buttons. Buttons are on a wall at Z=64. // Button 1 controls door1, Button 2 controls door2. // The buttons are at (15, cubeSize/2, 64) and (-15, cubeSize/2, 64). // If the wall is at Z=64, and we want the button to face "outwards", // assuming "outwards" means towards the player area (likely smaller Z values), // the button face (its local Z+) should point towards -Z world. So, no rotation. // If "outwards" means away from the center of the building, it depends on the wall's orientation. // Let's assume the wall at Z=64 is the "front" of this section, so outwards is -Z. const buttonY = cubeSize / 2; // Place button at a reachable height const buttonWallZ = 64; const buttonDepthOffset = 0.15; // How much button sticks out from wall // Button for door1 (at X=17, Z=67) // Wall is at Z=64, button at X=15. So it's on a wall segment near X=15, at Z=64. // For button to be on this wall and face outwards (towards -Z), position it slightly in front of Z=64. createButton("door1", 15, buttonY, buttonWallZ - buttonDepthOffset, Math.PI / 2); // Rotated 90 degrees // Button for door2 (at X=-12, Z=67), now moved to X=-10 // Wall at Z=64, button at X=-10. createButton("door2", -10, buttonY, buttonWallZ - buttonDepthOffset, Math.PI / 2); // Rotated 90 degrees scene.add(buildingContainer); // Add interior light source - reduced intensity const interiorLight = new THREE.PointLight(0xffddaa, 15, 40, 1.2); // Significantly reduced intensity, slightly reduced range // Position the light near the player's starting point but inside the 'room' // Player now starts at (-2.5, playerHeight/2 + 0.1, 37.5) which are officeX_playerStart, officeZ_playerStart interiorLight.position.set(officeX_playerStart, cubeSize * 0.8, officeZ_playerStart); // Position inside the office cube interiorLight.castShadow = true; interiorLight.shadow.mapSize.width = 1024; interiorLight.shadow.mapSize.height = 1024; interiorLight.shadow.bias = -0.005; // Adjust to prevent shadow acne scene.add(interiorLight); // Create GridHelper for noclip mode const gridHelperSize = 200; // Match terrain size or relevant area const gridHelperDivisions = gridHelperSize / cubeSize; // Align with building cube size gridHelper = new THREE.GridHelper(gridHelperSize, gridHelperDivisions, 0x888888, 0x444444); gridHelper.position.y = 0.01; // Slightly above the ground plane to avoid z-fighting gridHelper.visible = false; // Initially hidden scene.add(gridHelper); // Add lights on the new roof const roofLightIntensity = 30; // Further reduced roof light intensity const roofLightDistance = 75; const roofLightDecay = 1.5; const roofLightColor = 0xffffff; const lightPositions = [ new THREE.Vector3(-buildingWidth / 4, roofYPosition + roofThickness + 1, -buildingDepth / 4), new THREE.Vector3(buildingWidth / 4, roofYPosition + roofThickness + 1, -buildingDepth / 4), new THREE.Vector3(-buildingWidth / 4, roofYPosition + roofThickness + 1, buildingDepth / 4), new THREE.Vector3(buildingWidth / 4, roofYPosition + roofThickness + 1, buildingDepth / 4) ]; lightPositions.forEach(pos => { const pointLight = new THREE.PointLight(roofLightColor, roofLightIntensity, roofLightDistance, roofLightDecay); pointLight.position.copy(pos); pointLight.castShadow = true; pointLight.shadow.mapSize.width = 512; // Smaller shadow map for performance pointLight.shadow.mapSize.height = 512; pointLight.shadow.bias = -0.005; scene.add(pointLight); }); // Add more lights around the building exterior const exteriorLightIntensity = 40; // Reduced exterior light intensity const exteriorLightDistance = 50; const exteriorLightDecay = 1.8; const exteriorLightColor = 0xffeedd; const exteriorLightYOffset = cubeSize * 0.8; // Position them lower than roof lights const exteriorLightPositions = [ // Front side new THREE.Vector3(-buildingWidth / 3, exteriorLightYOffset, -buildingDepth / 2 - 5), new THREE.Vector3(buildingWidth / 3, exteriorLightYOffset, -buildingDepth / 2 - 5), // Back side new THREE.Vector3(-buildingWidth / 3, exteriorLightYOffset, buildingDepth / 2 + 5), new THREE.Vector3(buildingWidth / 3, exteriorLightYOffset, buildingDepth / 2 + 5), // Left side new THREE.Vector3(-buildingWidth / 2 - 5, exteriorLightYOffset, -buildingDepth / 3), new THREE.Vector3(-buildingWidth / 2 - 5, exteriorLightYOffset, buildingDepth / 3), // Right side new THREE.Vector3(buildingWidth / 2 + 5, exteriorLightYOffset, -buildingDepth / 3), new THREE.Vector3(buildingWidth / 2 + 5, exteriorLightYOffset, buildingDepth / 3), ]; exteriorLightPositions.forEach(pos => { const extLight = new THREE.PointLight(exteriorLightColor, exteriorLightIntensity, exteriorLightDistance, exteriorLightDecay); extLight.position.copy(pos); extLight.castShadow = true; extLight.shadow.mapSize.width = 256; // Smaller shadow maps for performance extLight.shadow.mapSize.height = 256; extLight.shadow.bias = -0.01; // Further adjust bias if needed scene.add(extLight); }); function createMotionStatusTextures() { // Texture for "MOTION DETECTED" const detectedCanvas = document.createElement('canvas'); detectedCanvas.width = 512; detectedCanvas.height = 256; const detectedCtx = detectedCanvas.getContext('2d'); detectedCtx.fillStyle = 'darkred'; detectedCtx.fillRect(0, 0, 512, 256); detectedCtx.font = 'bold 48px Arial'; detectedCtx.fillStyle = 'white'; detectedCtx.textAlign = 'center'; detectedCtx.textBaseline = 'middle'; detectedCtx.fillText('MOTION DETECTED', 256, 128); motionStatusTextures.detected = new THREE.CanvasTexture(detectedCanvas); // Texture for "ALL CLEAR" const clearCanvas = document.createElement('canvas'); clearCanvas.width = 512; clearCanvas.height = 256; const clearCtx = clearCanvas.getContext('2d'); clearCtx.fillStyle = 'darkgreen'; clearCtx.fillRect(0, 0, 512, 256); clearCtx.font = 'bold 48px Arial'; clearCtx.fillStyle = 'white'; clearCtx.textAlign = 'center'; clearCtx.textBaseline = 'middle'; clearCtx.fillText('ALL CLEAR', 256, 128); motionStatusTextures.clear = new THREE.CanvasTexture(clearCanvas); } function createTVScreen() { createMotionStatusTextures(); // Create textures before creating the screen const tvScreenGeometry = new THREE.BoxGeometry(TV_SCREEN_WIDTH, TV_SCREEN_HEIGHT, TV_SCREEN_THICKNESS); tvScreenMaterial = new THREE.MeshStandardMaterial({ color: 0x101010, // Dark grey, placeholder color for base emissive: 0xffffff, // Set emissive to white, texture will control color emissiveIntensity: 1, // Full intensity from texture roughness: 0.8, // Less reflective for a screen metalness: 0.1, map: motionStatusTextures.clear, // Start with "ALL CLEAR" transparent: false, // Ensure screen is opaque depthWrite: true // Ensure screen writes to depth buffer }); tvScreenMesh = new THREE.Mesh(tvScreenGeometry, tvScreenMaterial); tvScreenMesh.position.copy(TV_SCREEN_POSITION); // Orient the TV screen to face towards positive Z (e.g., player approaching from Z > 10) // Default BoxGeometry face is +Z. If TV is at Z=10, we want it to point towards Z values greater than 10. // If camera is typically at Z=15 looking towards Z=0, TV screen should be rotated. // Let's make it face towards where the player starts (approx. Z=67) // So if TV is at Z=10, it needs to rotate 180 degrees (PI radians) around Y. tvScreenMesh.rotation.y = Math.PI; // Face towards Z = 67 (player spawn area) // tvScreenMesh.rotation.x = -Math.PI / 12; tvScreenMesh.castShadow = true; tvScreenMesh.receiveShadow = true; scene.add(tvScreenMesh); // Create a simple stand or mount for the TV const standHeight = TV_SCREEN_POSITION.y - TV_SCREEN_HEIGHT / 2; if (standHeight > 0.05) { // Only add stand if there's space below the TV const standPoleRadius = 0.05; const standPoleGeometry = new THREE.CylinderGeometry(standPoleRadius, standPoleRadius, standHeight, 16); const standMaterial = new THREE.MeshStandardMaterial({ color: 0x404040, roughness: 0.6, metalness: 0.4 }); const standPoleMesh = new THREE.Mesh(standPoleGeometry, standMaterial); standPoleMesh.position.set(TV_SCREEN_POSITION.x, standHeight / 2, TV_SCREEN_POSITION.z); standPoleMesh.castShadow = true; scene.add(standPoleMesh); const standBaseRadius = 0.3; const standBaseHeight = 0.05; const standBaseGeometry = new THREE.CylinderGeometry(standBaseRadius, standBaseRadius, standBaseHeight, 24); const standBaseMesh = new THREE.Mesh(standBaseGeometry, standMaterial); standBaseMesh.position.set(TV_SCREEN_POSITION.x, standBaseHeight / 2, TV_SCREEN_POSITION.z); standBaseMesh.castShadow = true; standBaseMesh.receiveShadow = true; scene.add(standBaseMesh); } // Create a black wall behind the TV const wallWidth = TV_SCREEN_WIDTH * 1.5; // Make it wider than the TV const wallHeight = TV_SCREEN_HEIGHT * 1.5; // Make it taller const wallThickness = 0.1; const wallGeometry = new THREE.BoxGeometry(wallWidth, wallHeight, wallThickness); const wallMaterial = new THREE.MeshBasicMaterial({ color: 0x000000 }); // Black color const tvBackWallMesh = new THREE.Mesh(wallGeometry, wallMaterial); // Position it behind the TV, aligned with TV's rotation and position // If TV faces +Z (rotation PI), back wall is slightly further in +Z const wallOffset = TV_SCREEN_THICKNESS / 2 + wallThickness / 2 + 0.05; // Small gap tvBackWallMesh.position.set( 2.6, // New X position TV_SCREEN_POSITION.y, // Vertically centered with TV 56 // New Z position ); tvBackWallMesh.rotation.y = Math.PI; // Match TV's rotation scene.add(tvBackWallMesh); // Create TV control buttons const numDetectors = motionDetectors.length; const tvButtonSize = 0.2; const tvButtonSpacing = 0.05; const totalButtonWidth = numDetectors * tvButtonSize + Math.max(0, numDetectors - 1) * tvButtonSpacing; const startX = TV_SCREEN_POSITION.x - totalButtonWidth / 2 + tvButtonSize / 2; for (let i = 0; i < numDetectors; i++) { const buttonCanvas = document.createElement('canvas'); const buttonCtx = buttonCanvas.getContext('2d'); buttonCanvas.width = 128; // Texture size buttonCanvas.height = 128; // Initial button color (will be updated on interaction) const isActiveButton = (i === currentDetectorIndex && assetsLoaded); // Check if this button corresponds to the initially active camera buttonCtx.fillStyle = isActiveButton ? 'rgba(0, 255, 0, 0.8)' : 'rgba(136, 136, 136, 0.8)'; // Green if active, else grey buttonCtx.fillRect(0, 0, buttonCanvas.width, buttonCanvas.height); buttonCtx.font = 'bold 48px Arial'; buttonCtx.fillStyle = 'white'; buttonCtx.textAlign = 'center'; buttonCtx.textBaseline = 'middle'; buttonCtx.fillText((i + 1).toString(), buttonCanvas.width / 2, buttonCanvas.height / 2); const buttonTexture = new THREE.CanvasTexture(buttonCanvas); const buttonMaterial = new THREE.MeshStandardMaterial({ map: buttonTexture, transparent: true // If using rgba for background }); const buttonGeometry = new THREE.BoxGeometry(tvButtonSize, tvButtonSize, 0.05); const tvButtonMesh = new THREE.Mesh(buttonGeometry, buttonMaterial); // Position buttons below the TV screen, aligned with its rotation const buttonXOffset = (i * (tvButtonSize + tvButtonSpacing)) - totalButtonWidth / 2 + tvButtonSize / 2; // Buttons need to be placed relative to the TV and rotated with it. // For simplicity, we'll position them in world space assuming TV's rotation. // If TV is rotated Math.PI around Y: // X position relative to TV center becomes -X offset. // Z position relative to TV center needs to be in front of TV face. tvButtonMesh.position.set( TV_SCREEN_POSITION.x - buttonXOffset, // Mirrored X due to TV rotation TV_SCREEN_POSITION.y - TV_SCREEN_HEIGHT / 2 - tvButtonSize / 2 - 0.1, // Below TV TV_SCREEN_POSITION.z + TV_SCREEN_THICKNESS / 2 + 0.05 // In front of TV face ); tvButtonMesh.rotation.y = Math.PI; // Match TV's rotation scene.add(tvButtonMesh); tvButtons.push({ mesh: tvButtonMesh, cameraIndex: i, originalMaterial: buttonMaterial.clone() // Store for reverting highlight }); } } // createTVScreen(); // Problematic call: cameraBlocks not yet initialized. Will be called later. function createMotionDetector(x, y, z, rotationY) { const blockGeometry = new THREE.BoxGeometry(0.5, 0.5, 0.5); // Small cube const blockMaterial = new THREE.MeshStandardMaterial({ color: 0xCCCCCC, // Light grey color roughness: 0.6, metalness: 0.3 }); const cameraBlock = new THREE.Mesh(blockGeometry, blockMaterial); cameraBlock.position.set(x, y, z); cameraBlock.rotation.y = rotationY; cameraBlock.castShadow = true; cameraBlock.receiveShadow = true; cameraBlock.visible = false; // Keep the detector block itself invisible scene.add(cameraBlock); // Add it to the scene so we can still get its world position // Optional: Add a visual indicator for the "lens" or front const lensGeometry = new THREE.CylinderGeometry(0.1, 0.1, 0.3, 16); const lensMaterial = new THREE.MeshBasicMaterial({ color: 0x000000 }); const lensMesh = new THREE.Mesh(lensGeometry, lensMaterial); lensMesh.position.set(0, 0, 0.25); // Position it on the "front" face lensMesh.rotation.x = Math.PI / 2; // Orient cylinder to point forward cameraBlock.add(lensMesh); // Create a text label for the camera block const labelCanvas = document.createElement('canvas'); const labelContext = labelCanvas.getContext('2d'); labelCanvas.width = 64; // Power of 2 for texture size labelCanvas.height = 32; labelContext.fillStyle = 'rgba(0, 0, 0, 0.7)'; labelContext.fillRect(0, 0, labelCanvas.width, labelCanvas.height); labelContext.font = 'bold 20px Arial'; labelContext.fillStyle = 'white'; labelContext.textAlign = 'center'; labelContext.textBaseline = 'middle'; labelContext.fillText((motionDetectors.length + 1).toString(), labelCanvas.width / 2, labelCanvas.height / 2); const labelTexture = new THREE.CanvasTexture(labelCanvas); const labelMaterial = new THREE.SpriteMaterial({ map: labelTexture, depthTest: false, depthWrite: false }); const labelSprite = new THREE.Sprite(labelMaterial); labelSprite.scale.set(0.5, 0.25, 1.0); // Adjust scale as needed labelSprite.position.set(0, 0.4, 0); // Position above the camera block // cameraBlock.add(labelSprite); // Don't add label if block is invisible // No longer creating a security camera, just a zone. const detectionRadius = 15; // Define the detection radius for this zone const helperGeometry = new THREE.SphereGeometry(detectionRadius, 16, 8); const helperMaterial = new THREE.MeshBasicMaterial({ color: 0xffff00, wireframe: true, transparent: true, opacity: 0.5 }); const detectionSphereHelper = new THREE.Mesh(helperGeometry, helperMaterial); detectionSphereHelper.visible = isNoclipActive; // Only show spheres in noclip/debug mode detectionSphereHelper.position.copy(cameraBlock.position); // Set sphere's position manually scene.add(detectionSphereHelper); // Add helper directly to the scene, not the invisible block motionDetectors.push({ mesh: cameraBlock, position: cameraBlock.position, radius: detectionRadius, helper: detectionSphereHelper // Store the helper }); return cameraBlock; } const motionDetectors = []; let currentDetectorIndex = 0; let motionDetected = false; // Global state for motion detection let motionStatusTextures = {}; // Will hold textures for "DETECTED" and "CLEAR" // Create motion detector blocks at specified locations const detectorY = 1.9; // New motion detector locations createMotionDetector(-20, detectorY, 55, 0); createMotionDetector(25, detectorY, 55, 0); createMotionDetector(0, detectorY, 5, 0); createMotionDetector(35, detectorY, 20, 0); createTVScreen(); // Now call createTVScreen AFTER motionDetectors are populated // Adjust camera to view the building (commented out as player controls camera) // camera.position.set(0, 50, 80); // camera.lookAt(0, 0, 0); // Keyboard controls const onKeyDown = function(event) { switch (event.code) { case 'KeyW': case 'ArrowUp': moveForward = true; break; case 'KeyA': case 'ArrowLeft': moveLeft = true; break; case 'KeyS': case 'ArrowDown': moveBackward = true; break; case 'KeyD': case 'ArrowRight': moveRight = true; break; case 'KeyF': // Noclip toggle isNoclipActive = !isNoclipActive; if (isNoclipActive) { playerBody.collisionFilterMask = GROUP_GROUND; gridHelper.visible = true; coordDisplay.style.display = 'block'; console.log("Noclip ON: Player can pass through walls. Grid visible. Camera helpers visible."); if (compassMesh) compassMesh.visible = true; motionDetectors.forEach(detector => { if (detector.helper) detector.helper.visible = true; }); if (legsEnemy && legsEnemy.debugHelper) legsEnemy.debugHelper.visible = true; if (armsEnemy && armsEnemy.debugHelper) armsEnemy.debugHelper.visible = true; if (eyeEnemy && eyeEnemy.debugHelper) eyeEnemy.debugHelper.visible = true; } else { playerBody.collisionFilterMask = GROUP_GROUND | GROUP_BUILDING; gridHelper.visible = false; coordDisplay.style.display = 'none'; if (compassMesh) compassMesh.visible = false; motionDetectors.forEach(detector => { // We want the F key to toggle the spheres' visibility along with other debug info. if (detector.helper) detector.helper.visible = false; }); if (legsEnemy && legsEnemy.debugHelper) legsEnemy.debugHelper.visible = false; if (armsEnemy && armsEnemy.debugHelper) armsEnemy.debugHelper.visible = false; if (eyeEnemy && eyeEnemy.debugHelper) eyeEnemy.debugHelper.visible = false; console.log("Noclip OFF: Player collides with walls normally. Grid hidden. Camera helpers hidden."); } playerBody.wakeUp(); break; case 'KeyE': // Interaction key interactWithButtons(); break; case 'KeyB': // Force enemy to move if (legsEnemy && legsState === 'idle') { legsState = 'walking'; legsEnemy.material.map = legsWalkTexture; legsWalkTimer = 5.0; // Walk for 5 seconds console.log("Forcing enemy to walk."); } break; } }; const onKeyUp = function(event) { switch (event.code) { case 'KeyW': case 'ArrowUp': moveForward = false; break; case 'KeyA': case 'ArrowLeft': moveLeft = false; break; case 'KeyS': case 'ArrowDown': moveBackward = false; break; case 'KeyD': case 'ArrowRight': moveRight = false; break; } }; document.addEventListener('keydown', onKeyDown); document.addEventListener('keyup', onKeyUp); const MINIMUM_Y_LEVEL = -10; // If player falls below this, teleport them up const RESPAWN_POSITION = new CANNON.Vec3(2, playerHeight / 2 + 2, 67); // Slightly higher than original to avoid immediate collision function interactWithButtons() { const playerPos = playerBody.position; // Check door buttons buttons.forEach(button => { const buttonPos = button.mesh.position; const distance = playerPos.distanceTo(buttonPos); if (distance < INTERACTION_DISTANCE) { const doorToControl = doors.find(d => d.id === button.targetDoorId); if (doorToControl) { if (doorToControl.isOpen) { doorToControl.isOpen = false; doorToControl.targetY = doorYPosition + DOOR_CLOSED_Y_OFFSET; console.log(`Button pressed, closing door: ${doorToControl.id}`); button.mesh.material.color.set(0x00ff00); } else { doorToControl.isOpen = true; doorToControl.targetY = doorYPosition + DOOR_OPEN_Y_OFFSET; console.log(`Button pressed, opening door: ${doorToControl.id}`); button.mesh.material.color.set(0xff0000); } } } }); // Check TV control buttons let closestTVButton = null; let minTVButtonDistance = INTERACTION_DISTANCE; tvButtons.forEach(tvButton => { const buttonPos = tvButton.mesh.position; const distance = playerPos.distanceTo(buttonPos); if (distance < minTVButtonDistance) { minTVButtonDistance = distance; closestTVButton = tvButton; } }); if (closestTVButton) { currentDetectorIndex = closestTVButton.cameraIndex; console.log(`Switched to motion detector zone: ${closestTVButton.cameraIndex + 1}`); updateTVButtonAppearances(); // Update immediately to reflect the change } } function updateTVButtonAppearances() { const playerPos = playerBody.position; tvButtons.forEach((tvButton, index) => { const buttonPos = tvButton.mesh.position; const distance = playerPos.distanceTo(buttonPos); let isHighlighted = distance < INTERACTION_DISTANCE; let isActive = index === currentDetectorIndex; const canvas = tvButton.mesh.material.map.image; const ctx = canvas.getContext('2d'); if (isActive) { ctx.fillStyle = 'rgba(0, 255, 0, 0.8)'; // Green for active } else if (isHighlighted) { ctx.fillStyle = 'rgba(255, 255, 0, 0.8)'; // Yellow for highlighted } else { ctx.fillStyle = 'rgba(136, 136, 136, 0.8)'; // Grey for normal } ctx.fillRect(0, 0, canvas.width, canvas.height); ctx.font = 'bold 48px Arial'; ctx.fillStyle = 'white'; ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; ctx.fillText((index + 1).toString(), canvas.width / 2, canvas.height / 2); tvButton.mesh.material.map.needsUpdate = true; }); } function updateDoors(deltaTime) { doors.forEach(door => { // Smoothly move door to targetY const currentY = door.mesh.position.y; const newY = THREE.MathUtils.lerp(currentY, door.targetY, 10 * deltaTime); // Adjust speed with 10 * deltaTime if (Math.abs(newY - door.targetY) > 0.01) { door.mesh.position.y = newY; door.body.position.y = newY; door.body.wakeUp(); // Ensure physics body updates if it was sleeping } else if (currentY !== door.targetY) { // Snap to final position if very close door.mesh.position.y = door.targetY; door.body.position.y = door.targetY; door.body.wakeUp(); } }); } function updatePlayer(deltaTime) { const inputVelocity = new THREE.Vector3(); const direction = new THREE.Vector3(); // Get camera direction camera.getWorldDirection(direction); direction.y = 0; // Keep movement on the XZ plane direction.normalize(); if (moveForward) { inputVelocity.add(direction.multiplyScalar(playerMoveSpeed)); } if (moveBackward) { inputVelocity.add(direction.multiplyScalar(-playerMoveSpeed)); } if (moveLeft) { const strafeDirection = direction.clone().cross(camera.up).normalize(); inputVelocity.add(strafeDirection.multiplyScalar(-playerMoveSpeed)); } if (moveRight) { const strafeDirection = direction.clone().cross(camera.up).normalize(); inputVelocity.add(strafeDirection.multiplyScalar(playerMoveSpeed)); } playerBody.velocity.x = inputVelocity.x; playerBody.velocity.z = inputVelocity.z; // Keep existing y velocity for gravity/jumping // Update player mesh position and rotation from physics body playerMesh.position.copy(playerBody.position); // For first-person, we don't want the body to rotate with mouse look, only the camera. // If you wanted third-person, you'd copy playerBody.quaternion to playerMesh.quaternion. // Update coordinate display if noclip is active if (isNoclipActive) { const playerX = playerBody.position.x.toFixed(1); const playerZ = playerBody.position.z.toFixed(1); let directionIndicator = ""; const forward = new THREE.Vector3(); camera.getWorldDirection(forward); const angle = Math.atan2(forward.x, forward.z); // Angle in radians from Z-axis if (angle >= -Math.PI / 4 && angle < Math.PI / 4) directionIndicator = "N"; else if (angle >= Math.PI / 4 && angle < 3 * Math.PI / 4) directionIndicator = "E"; else if (angle >= 3 * Math.PI / 4 || angle < -3 * Math.PI / 4) directionIndicator = "S"; else if (angle >= -3 * Math.PI / 4 && angle < -Math.PI / 4) directionIndicator = "W"; coordDisplay.textContent = `World Coords: X: ${playerX}, Z: ${playerZ}, Y: ${playerBody.position.y.toFixed(1)} | Facing: ${directionIndicator}`; if (compassMesh) { // The compass arrow points "up" (positive Y in its local space) by default. // We want it to point North (positive Z in world space). // The angle from Math.atan2(forward.x, forward.z) gives the yaw. // If forward.z is positive (North), angle is near 0. // If forward.x is positive (East), angle is near PI/2. // The compass texture's "North" should align with the world's North. // So, if the player faces East (angle = PI/2), the compass should rotate -PI/2 // to make its "North" mark point to world North. compassMesh.rotation.z = -angle; } } // Teleport player back up if they fall too low if (playerBody.position.y < MINIMUM_Y_LEVEL) { playerBody.position.copy(RESPAWN_POSITION); playerBody.velocity.set(0, 0, 0); // Reset velocity playerBody.angularVelocity.set(0, 0, 0); // Reset angular velocity console.warn('Player fell out of map and was teleported back.'); } } function animate() { requestAnimationFrame(animate); const deltaTime = Math.min(clock.getDelta(), 0.1); const elapsedTime = clock.getElapsedTime() * 1000; // milliseconds if (assetsLoaded) { gameTime += deltaTime; world.step(deltaTime); updatePlayer(deltaTime); updateDoors(deltaTime); updateLegsEnemy(deltaTime); updateArmsEnemy(deltaTime); updateEyeEnemy(deltaTime); updateTVButtonAppearances(); // Update TV button visual states // Update motion detection system if (motionDetectors.length > 0 && tvScreenMesh) { const currentDetector = motionDetectors[currentDetectorIndex]; const distanceToPlayer = currentDetector.position.distanceTo(playerBody.position); const wasMotionDetected = motionDetected; motionDetected = distanceToPlayer <= currentDetector.radius; // Update the TV screen only when the status changes if (motionDetected !== wasMotionDetected) { if (motionDetected) { tvScreenMaterial.map = motionStatusTextures.detected; tvScreenMaterial.emissiveMap = motionStatusTextures.detected; console.log(`Motion DETECTED in zone ${currentDetectorIndex + 1}`); } else { tvScreenMaterial.map = motionStatusTextures.clear; tvScreenMaterial.emissiveMap = motionStatusTextures.clear; console.log(`Motion area CLEAR in zone ${currentDetectorIndex + 1}`); } tvScreenMaterial.needsUpdate = true; } } } renderer.autoClear = false; // Important for multi-scene rendering composer.render(); // Render main scene with player's camera if (assetsLoaded && compassScene && compassCamera && isNoclipActive) { renderer.clearDepth(); // Clear depth buffer before rendering compass renderer.render(compassScene, compassCamera); } renderer.autoClear = true; } function updateLegsEnemy(deltaTime) { if (!legsEnemy) return; legsEnemy.sprite.position.copy(legsEnemy.body.position); if (legsEnemy.debugHelper) { legsEnemy.debugHelper.update(); } if (legsState === 'idle') { legsWaitTimer -= deltaTime; if (legsWaitTimer <= 0) { legsState = 'walking'; legsEnemy.material.map = legsWalkTexture; // As game progresses, walk for longer const walkDurationBonus = Math.min(gameTime / 60, 5); // Add up to 5s bonus to walk time legsWalkTimer = 2.0 + walkDurationBonus; } } else if (legsState === 'walking') { legsWalkTimer -= deltaTime; const path = findPath(legsEnemy.body.position, playerBody.position); if (path && path.length > 1) { const nextNode = path[1]; const targetPos = new THREE.Vector3( (nextNode.x - (grid[0].length / 2) + 0.5) * TILE_SIZE, legsEnemy.body.position.y, (nextNode.z - (grid.length / 2) + 0.5) * TILE_SIZE ); let direction = new THREE.Vector3().subVectors(targetPos, legsEnemy.body.position).normalize(); const speed = 4; legsEnemy.body.velocity.x = direction.x * speed; legsEnemy.body.velocity.z = direction.z * speed; } if (legsWalkTimer <= 0) { legsState = 'idle'; legsEnemy.material.map = legsStillTexture; const waitTimeReduction = Math.min(gameTime / 30, 10); legsWaitTimer = (13 + Math.random() * 7) - waitTimeReduction; legsWaitTimer = Math.max(3, legsWaitTimer); } } else if (legsState === 'retreating') { const direction = new THREE.Vector3().subVectors(legsEnemy.startPosition, legsEnemy.body.position).normalize(); const speed = 4; legsEnemy.body.velocity.x = direction.x * speed; legsEnemy.body.velocity.z = direction.z * speed; if (legsEnemy.body.position.distanceTo(legsEnemy.startPosition) < 1.0) { legsState = 'idle'; legsEnemy.material.map = legsStillTexture; legsWaitTimer = 5 + Math.random() * 5; // shorter wait after retreating console.log("Enemy has returned to start position."); } } legsEnemy.body.quaternion.setFromAxisAngle(new CANNON.Vec3(0, 1, 0), Math.atan2( playerBody.position.x - legsEnemy.body.position.x, playerBody.position.z - legsEnemy.body.position.z )); } function updateArmsEnemy(deltaTime) { if (!armsEnemy) return; armsEnemy.sprite.position.copy(armsEnemy.body.position); if (armsEnemy.debugHelper) { armsEnemy.debugHelper.update(); } if (armsState === 'idle') { armsWaitTimer -= deltaTime; if (armsWaitTimer <= 0) { armsState = 'walking'; armsEnemy.material.map = armsWalkTexture; armsWalkTimer = armsStepCount; } } else if (armsState === 'walking') { armsWalkTimer -= deltaTime; armsWalkTimer -= deltaTime; const door1Pos = doors.find(d => d.id === 'door1').mesh.position; const path = findPath(armsEnemy.body.position, door1Pos); if (path && path.length > 1) { const nextNode = path[1]; const targetPos = new THREE.Vector3( (nextNode.x - (grid[0].length / 2) + 0.5) * TILE_SIZE, armsEnemy.body.position.y, (nextNode.z - (grid.length / 2) + 0.5) * TILE_SIZE ); let direction = new THREE.Vector3().subVectors(targetPos, armsEnemy.body.position).normalize(); const speed = 4; armsEnemy.body.velocity.x = direction.x * speed; armsEnemy.body.velocity.z = direction.z * speed; } if (armsWalkTimer <= 0) { armsState = 'idle'; armsEnemy.material.map = armsStillTexture; armsWaitTimer = 6 + Math.random() * 4; } } else if (armsState === 'retreating') { const direction = new THREE.Vector3().subVectors(armsEnemy.startPosition, armsEnemy.body.position).normalize(); const speed = 4; armsEnemy.body.velocity.x = direction.x * speed; armsEnemy.body.velocity.z = direction.z * speed; if (armsEnemy.body.position.distanceTo(armsEnemy.startPosition) < 1.0) { armsState = 'idle'; armsEnemy.material.map = armsStillTexture; armsWaitTimer = 5 + Math.random() * 5; // shorter wait after retreating console.log("Arms Enemy has returned to start position."); } } armsEnemy.body.quaternion.setFromAxisAngle(new CANNON.Vec3(0, 1, 0), Math.atan2( playerBody.position.x - armsEnemy.body.position.x, playerBody.position.z - armsEnemy.body.position.z )); } function updateEyeEnemy(deltaTime) { if (!eyeEnemy) return; eyeEnemy.sprite.position.copy(eyeEnemy.body.position); if (eyeState === 'idle') { eyeWaitTimer -= deltaTime; if (eyeWaitTimer <= 0) { eyeState = 'charging'; } } else if (eyeState === 'charging') { const path = findPath(eyeEnemy.body.position, playerBody.position); if (path && path.length > 1) { const nextNode = path[1]; const targetPos = new THREE.Vector3( (nextNode.x - (grid[0].length / 2) + 0.5) * TILE_SIZE, eyeEnemy.body.position.y, (nextNode.z - (grid.length / 2) + 0.5) * TILE_SIZE ); let direction = new THREE.Vector3().subVectors(targetPos, eyeEnemy.body.position).normalize(); const speed = 6; // Faster than other enemies eyeEnemy.body.velocity.x = direction.x * speed; eyeEnemy.body.velocity.z = direction.z * speed; } } eyeEnemy.body.quaternion.setFromAxisAngle(new CANNON.Vec3(0, 1, 0), Math.atan2( playerBody.position.x - eyeEnemy.body.position.x, playerBody.position.z - eyeEnemy.body.position.z )); } // Handle window resize function onWindowResize() { const width = parentDiv.clientWidth; const height = parentDiv.clientHeight; // Update camera camera.aspect = width / height; camera.updateProjectionMatrix(); // Update renderer and composer renderer.setSize(width, height); composer.setSize(width, height); // Update post-processing passes bloomPass.resolution.set(width, height); smaaPass.setSize(width, height); if (compassCamera && compassMesh) { const compassSize = 100; // Compass size in pixels compassCamera.left = -width / 2; compassCamera.right = width / 2; compassCamera.top = height / 2; compassCamera.bottom = -height / 2; compassCamera.updateProjectionMatrix(); // Position compass in top-right corner, below coordinate display if active const margin = 20; // Margin from screen edges let topOffset = margin + compassSize / 2; if (coordDisplay.style.display !== 'none') { topOffset += coordDisplay.offsetHeight + 10; // Add height of coordDisplay + some padding } compassMesh.position.set( width / 2 - compassSize / 2 - margin, height / 2 - topOffset, 0 // Z position in orthographic view ); } } function initCompass() { const compassSize = 100; // Size of the compass display in pixels compassCanvas = document.createElement('canvas'); compassCanvas.width = compassSize; compassCanvas.height = compassSize; const ctx = compassCanvas.getContext('2d'); // Draw compass background ctx.beginPath(); ctx.arc(compassSize / 2, compassSize / 2, compassSize / 2 - 2, 0, 2 * Math.PI, false); ctx.fillStyle = 'rgba(50, 50, 50, 0.7)'; ctx.fill(); ctx.lineWidth = 2; ctx.strokeStyle = 'rgba(200, 200, 200, 0.8)'; ctx.stroke(); // Draw North indicator (arrow pointing up) ctx.beginPath(); ctx.moveTo(compassSize / 2, 10); // Arrow tip ctx.lineTo(compassSize / 2 - 5, 20); ctx.lineTo(compassSize / 2 + 5, 20); ctx.closePath(); ctx.fillStyle = 'red'; ctx.fill(); // Draw 'N' text ctx.font = 'bold 16px Arial'; ctx.fillStyle = 'white'; ctx.textAlign = 'center'; ctx.fillText('N', compassSize / 2, 35); compassTexture = new THREE.CanvasTexture(compassCanvas); const compassMaterial = new THREE.MeshBasicMaterial({ map: compassTexture, transparent: true }); const compassGeometry = new THREE.PlaneGeometry(compassSize, compassSize); compassMesh = new THREE.Mesh(compassGeometry, compassMaterial); compassMesh.visible = false; // Initially hidden, like coordDisplay compassScene = new THREE.Scene(); compassScene.add(compassMesh); // Orthographic camera for HUD const width = parentDiv.clientWidth; const height = parentDiv.clientHeight; compassCamera = new THREE.OrthographicCamera(-width / 2, width / 2, height / 2, -height / 2, 1, 1000); compassCamera.position.z = 10; // Initial position (will be updated in resize) onWindowResize(); // Call to set initial position and camera properties } // Add event listeners window.addEventListener('resize', onWindowResize); const resizeObserver = new ResizeObserver(onWindowResize); resizeObserver.observe(parentDiv); initCompass(); // Initialize the compass // Start animation animate();