// Import necessary modules import * as THREE from 'three'; import { OrbitControls } from 'three/addons/controls/OrbitControls.js'; import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.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); const gltfLoader = new GLTFLoader(loadingManager); let assetsLoaded = false; // Optionally, add URL remapping if needed loadingManager.setURLModifier((url) => { if (url.includes('Textures/colormap.png')) { return 'https://play.rosebud.ai/assets/3D_playground_character_colormap.png?45XD'; } return url; }); 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 warning screen const warningScreen = document.createElement('div'); warningScreen.style.position = 'absolute'; warningScreen.style.top = '0'; warningScreen.style.left = '0'; warningScreen.style.width = '100%'; warningScreen.style.height = '100%'; warningScreen.style.backgroundColor = 'rgba(0, 0, 0, 0.95)'; warningScreen.style.display = 'none'; warningScreen.style.flexDirection = 'column'; warningScreen.style.justifyContent = 'center'; warningScreen.style.alignItems = 'center'; warningScreen.style.color = 'white'; warningScreen.style.fontFamily = 'Arial, sans-serif'; warningScreen.style.zIndex = '1001'; const warningTitle = document.createElement('h1'); warningTitle.textContent = 'WARNING'; warningTitle.style.fontSize = '48px'; warningTitle.style.color = '#ff0000'; warningTitle.style.marginBottom = '30px'; warningTitle.style.textShadow = '2px 2px 4px rgba(0, 0, 0, 0.5)'; const warningText = document.createElement('div'); warningText.style.fontSize = '24px'; warningText.style.textAlign = 'center'; warningText.style.maxWidth = '600px'; warningText.style.lineHeight = '1.5'; warningText.style.margin = '0 20px 30px 20px'; warningText.innerHTML = ` This game contains jump scares and sudden loud noises.

Player discretion is advised. `; const continueButton = document.createElement('button'); continueButton.textContent = 'I Understand, Continue'; continueButton.style.padding = '15px 30px'; continueButton.style.fontSize = '24px'; continueButton.style.backgroundColor = '#ff0000'; continueButton.style.color = 'white'; continueButton.style.border = 'none'; continueButton.style.borderRadius = '5px'; continueButton.style.cursor = 'pointer'; continueButton.style.transition = 'background-color 0.3s'; continueButton.onmouseover = () => { continueButton.style.backgroundColor = '#cc0000'; }; continueButton.onmouseout = () => { continueButton.style.backgroundColor = '#ff0000'; }; warningScreen.appendChild(warningTitle); warningScreen.appendChild(warningText); warningScreen.appendChild(continueButton); parentDiv.appendChild(warningScreen); // Create dialog scene overlay const dialogScene = document.createElement('div'); dialogScene.style.position = 'fixed'; dialogScene.style.top = '0'; dialogScene.style.left = '0'; dialogScene.style.width = '100%'; dialogScene.style.height = '100%'; dialogScene.style.backgroundColor = 'black'; dialogScene.style.display = 'none'; dialogScene.style.justifyContent = 'center'; dialogScene.style.alignItems = 'center'; dialogScene.style.zIndex = '1500'; const dialogText = document.createElement('div'); const dialogMessages = ["what happened?... where am I?", "I need to find a way out"]; let currentMessageIndex = 0; let currentChar = 0; dialogText.style.color = 'white'; dialogText.style.fontSize = '32px'; dialogText.style.fontFamily = 'Arial, sans-serif'; dialogText.textContent = ''; dialogScene.appendChild(dialogText); parentDiv.appendChild(dialogScene); // Create start menu const startMenu = document.createElement('div'); startMenu.style.position = 'absolute'; startMenu.style.top = '0'; startMenu.style.left = '0'; startMenu.style.width = '100%'; startMenu.style.height = '100%'; startMenu.style.backgroundColor = 'rgba(0, 0, 0, 0.85)'; startMenu.style.display = 'none'; startMenu.style.flexDirection = 'column'; startMenu.style.justifyContent = 'center'; startMenu.style.alignItems = 'center'; startMenu.style.color = 'white'; startMenu.style.fontFamily = 'Arial, sans-serif'; startMenu.style.zIndex = '1000'; const title = document.createElement('h1'); title.textContent = 'ESCAPE THE MAZE'; title.style.fontSize = '48px'; title.style.marginBottom = '30px'; title.style.textShadow = '2px 2px 4px rgba(0, 0, 0, 0.5)'; const startButton = document.createElement('button'); startButton.textContent = 'Start Game'; startButton.style.padding = '15px 30px'; startButton.style.fontSize = '24px'; startButton.style.backgroundColor = '#4CAF50'; startButton.style.color = 'white'; startButton.style.border = 'none'; startButton.style.borderRadius = '5px'; startButton.style.cursor = 'pointer'; startButton.style.transition = 'background-color 0.3s'; startButton.onmouseover = () => { startButton.style.backgroundColor = '#45a049'; }; startButton.onmouseout = () => { startButton.style.backgroundColor = '#4CAF50'; }; const instructions = document.createElement('div'); instructions.style.marginTop = '30px'; instructions.style.fontSize = '18px'; instructions.style.textAlign = 'center'; instructions.style.lineHeight = '1.5'; instructions.innerHTML = `

Controls:

W, A, S, D - Move

SPACE - Jump

SHIFT - Sprint

Mouse - Look around

Collect all 6 keys to win!

`; // Create settings section const settingsSection = document.createElement('div'); settingsSection.style.marginTop = '30px'; settingsSection.style.padding = '20px'; settingsSection.style.backgroundColor = 'rgba(0, 0, 0, 0.5)'; settingsSection.style.borderRadius = '10px'; settingsSection.style.width = '80%'; settingsSection.style.maxWidth = '400px'; // Settings title const settingsTitle = document.createElement('h2'); settingsTitle.textContent = 'Sound Settings'; settingsTitle.style.color = 'white'; settingsTitle.style.marginBottom = '15px'; settingsTitle.style.fontSize = '24px'; settingsSection.appendChild(settingsTitle); // Function to create volume slider function createVolumeControl(label, sound, defaultValue) { const container = document.createElement('div'); container.style.marginBottom = '10px'; container.style.display = 'flex'; container.style.alignItems = 'center'; container.style.justifyContent = 'space-between'; const text = document.createElement('span'); text.textContent = label; text.style.color = 'white'; text.style.marginRight = '10px'; const slider = document.createElement('input'); slider.type = 'range'; slider.min = '0'; slider.max = '100'; slider.value = defaultValue * 100; slider.style.width = '150px'; slider.addEventListener('input', () => { if (sound) { sound.volume = slider.value / 100; } }); container.appendChild(text); container.appendChild(slider); return container; } // Initialize sound variables early let walkingSound = new Audio('https://play.rosebud.ai/assets/walkingeffect.wav?yYpi'); let jumpscareSound = new Audio('https://play.rosebud.ai/assets/Jumpscare.mp3?flwF'); // Configure audio settings walkingSound.loop = true; walkingSound.volume = 0.2; jumpscareSound.volume = 0.5; // Add volume controls for each sound settingsSection.appendChild(createVolumeControl('Walking Sound:', walkingSound, 0.2)); settingsSection.appendChild(createVolumeControl('Jumpscare Sound:', jumpscareSound, 0.5)); startMenu.appendChild(title); startMenu.appendChild(startButton); startMenu.appendChild(instructions); startMenu.appendChild(settingsSection); parentDiv.appendChild(startMenu); // Create key counter display const keyCounter = document.createElement('div'); keyCounter.style.position = 'fixed'; keyCounter.style.top = '20px'; keyCounter.style.left = '20px'; keyCounter.style.color = '#FFD700'; // Gold color to match keys keyCounter.style.fontSize = '24px'; keyCounter.style.fontFamily = 'Arial, sans-serif'; keyCounter.style.textShadow = '2px 2px 4px rgba(0, 0, 0, 0.5)'; keyCounter.style.display = 'none'; // Hide initially keyCounter.style.zIndex = '1000'; keyCounter.innerHTML = 'Keys: 0/6'; parentDiv.appendChild(keyCounter); // Remove duplicate sound initialization since we've moved it up // 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'; warningScreen.style.display = 'flex'; }; loadingManager.onError = function(url) { console.error('Error loading:', url); }; // Initialize the scene const scene = new THREE.Scene(); // Variable for the key object let keyObject = null; const world = new CANNON.World(); world.gravity.set(0, -25, 0); world.defaultContactMaterial.friction = 0.01; // Reduced global friction world.defaultContactMaterial.restitution = 0; // No bounce by default world.solver.iterations = 10; world.solver.tolerance = 0.001; function randomBetween(min, max) { return Math.random() * (max - min) + min; } // Define physics materials const groundPhysMaterial = new CANNON.Material('ground'); const clock = new THREE.Clock(); // Initialize the camera const camera = new THREE.PerspectiveCamera( 75, canvas.offsetWidth / canvas.offsetHeight, 0.1, 1000 ); // Adjusted camera position camera.position.set(0, 15, 30); camera.lookAt(0, 0, 0); // Camera settings for first person view const cameraSettings = { height: 4.5, // Height offset from character position smoothSpeed: 0.1, mouseSensitivity: 0.002, }; // Variables for mouse look let mouseX = 0; let mouseY = 0; let targetRotationX = 0; let targetRotationY = 0; // 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; // Define fog color early const fogColor = new THREE.Color(0x0a1a2a); renderer.outputEncoding = THREE.sRGBEncoding; renderer.toneMapping = THREE.ACESFilmicToneMapping; renderer.toneMappingExposure = 0.8; renderer.setClearColor(fogColor); // Match clear color with fog // 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.5, // bloom strength 0.75, // radius 0.2 // 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(0x0a1a2a); // Dark night blue const groundColor = new THREE.Color(0x0a0a0a); // Very dark ground reflection // Add fog to the scene scene.fog = new THREE.Fog(fogColor, 10, 40); // Start at 10 units, fully foggy by 150 units // 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); // Setup mouse controls for first person view document.addEventListener('mousemove', (event) => { if (document.pointerLockElement === canvas) { mouseX -= event.movementX * cameraSettings.mouseSensitivity; mouseY -= event.movementY * cameraSettings.mouseSensitivity; // Clamp vertical rotation to prevent over-rotation mouseY = Math.max(-Math.PI / 2, Math.min(Math.PI / 2, mouseY)); targetRotationX = mouseX; targetRotationY = mouseY; } }); // Handle pointer lock and game start let gameStarted = false; // Warning screen continue button handler continueButton.addEventListener('click', () => { warningScreen.style.display = 'none'; startMenu.style.display = 'flex'; }); // Start button handler startButton.addEventListener('click', () => { startMenu.style.display = 'none'; dialogScene.style.display = 'flex'; dialogText.textContent = ''; const typeDialogue = () => { if (currentMessageIndex < dialogMessages.length) { if (currentChar < dialogMessages[currentMessageIndex].length) { dialogText.textContent += dialogMessages[currentMessageIndex][currentChar]; currentChar++; setTimeout(typeDialogue, 100); } else { currentChar = 0; currentMessageIndex++; if (currentMessageIndex < dialogMessages.length) { dialogText.textContent += '\n\n'; setTimeout(typeDialogue, 1000); } else { setTimeout(() => { dialogScene.style.display = 'none'; gameStarted = true; keyCounter.style.display = 'block'; canvas.requestPointerLock(); }, 2000); } } } }; typeDialogue(); }); canvas.addEventListener('click', () => { if (gameStarted && document.pointerLockElement !== canvas) { canvas.requestPointerLock(); } }); // Create flat terrain function createMazeWall(width, height, depth, position) { // Create wall mesh const geometry = new THREE.BoxGeometry(width, height, depth); const material = new THREE.MeshStandardMaterial({ color: 0x2d5a27, // Dark green color roughness: 0.8, metalness: 0.2, }); const wall = new THREE.Mesh(geometry, material); wall.castShadow = true; wall.receiveShadow = true; wall.position.copy(position); // Create wall physics body const wallShape = new CANNON.Box(new CANNON.Vec3(width / 2, height / 2, depth / 2)); const wallBody = new CANNON.Body({ mass: 0, material: groundPhysMaterial, }); wallBody.addShape(wallShape); wallBody.position.copy(position); world.addBody(wallBody); return wall; } function createMaze() { const mazeGroup = new THREE.Group(); const wallHeight = 20; const wallThickness = 2; const outerSize = 300; // Outer boundary walls // Split north wall into two parts with a gate in the middle const gateWidth = 10; // Width of the gate const wallSegmentWidth = (outerSize - gateWidth) / 2; // Left segment of north wall mazeGroup.add(createMazeWall(wallSegmentWidth, wallHeight, wallThickness, new THREE.Vector3(-outerSize / 4 - gateWidth / 4, wallHeight / 2, -outerSize / 2))); // Right segment of north wall mazeGroup.add(createMazeWall(wallSegmentWidth, wallHeight, wallThickness, new THREE.Vector3(outerSize / 4 + gateWidth / 4, wallHeight / 2, -outerSize / 2))); // Create gate from metal bars const gateGroup = new THREE.Group(); const barMaterial = new THREE.MeshStandardMaterial({ color: 0x808080, // Steel color metalness: 0.9, roughness: 0.2, emissive: 0x202020, emissiveIntensity: 0.2 }); // Create horizontal bars (top and bottom) const horizontalBarGeometry = new THREE.BoxGeometry(gateWidth, 0.5, 0.5); const topBar = new THREE.Mesh(horizontalBarGeometry, barMaterial); const bottomBar = new THREE.Mesh(horizontalBarGeometry, barMaterial); topBar.position.set(0, wallHeight - 0.25, -outerSize / 2); bottomBar.position.set(0, 0.25, -outerSize / 2); // Create vertical bars const barCount = 8; // Number of vertical bars const barSpacing = gateWidth / (barCount - 1); const verticalBarGeometry = new THREE.BoxGeometry(0.5, wallHeight, 0.5); for (let i = 0; i < barCount; i++) { const bar = new THREE.Mesh(verticalBarGeometry, barMaterial); const xPos = -gateWidth / 2 + i * barSpacing; bar.position.set(xPos, wallHeight / 2, -outerSize / 2); bar.castShadow = true; bar.receiveShadow = true; gateGroup.add(bar); } // Add horizontal bars to the group topBar.castShadow = true; bottomBar.castShadow = true; topBar.receiveShadow = true; bottomBar.receiveShadow = true; gateGroup.add(topBar); gateGroup.add(bottomBar); // Create collision bodies for the bars const barShape = new CANNON.Box(new CANNON.Vec3(0.25, wallHeight / 2, 0.25)); for (let i = 0; i < barCount; i++) { const barBody = new CANNON.Body({ mass: 0 }); const xPos = -gateWidth / 2 + i * barSpacing; barBody.addShape(barShape); barBody.position.set(xPos, wallHeight / 2, -outerSize / 2); world.addBody(barBody); } // Add horizontal bar collision bodies const horizontalBarShape = new CANNON.Box(new CANNON.Vec3(gateWidth / 2, 0.25, 0.25)); const topBarBody = new CANNON.Body({ mass: 0 }); const bottomBarBody = new CANNON.Body({ mass: 0 }); topBarBody.addShape(horizontalBarShape); bottomBarBody.addShape(horizontalBarShape); topBarBody.position.set(0, wallHeight - 0.25, -outerSize / 2); bottomBarBody.position.set(0, 0.25, -outerSize / 2); world.addBody(topBarBody); world.addBody(bottomBarBody); mazeGroup.add(gateGroup); mazeGroup.add(createMazeWall(outerSize, wallHeight, wallThickness, new THREE.Vector3(0, wallHeight / 2, outerSize / 2))); // South mazeGroup.add(createMazeWall(wallThickness, wallHeight, outerSize, new THREE.Vector3(outerSize / 2, wallHeight / 2, 0))); // East mazeGroup.add(createMazeWall(wallThickness, wallHeight, outerSize, new THREE.Vector3(-outerSize / 2, wallHeight / 2, 0))); // West const mazeWalls = [ // Main corridors { pos: new THREE.Vector3(0, wallHeight / 2, -80), size: [100, wallHeight, wallThickness] }, { pos: new THREE.Vector3(0, wallHeight / 2, 80), size: [100, wallHeight, wallThickness] }, { pos: new THREE.Vector3(-80, wallHeight / 2, 0), size: [wallThickness, wallHeight, 100] }, { pos: new THREE.Vector3(80, wallHeight / 2, 0), size: [wallThickness, wallHeight, 100] }, // Inner maze structure - Quadrant 1 (Northeast) { pos: new THREE.Vector3(40, wallHeight / 2, -40), size: [60, wallHeight, wallThickness] }, { pos: new THREE.Vector3(60, wallHeight / 2, -60), size: [wallThickness, wallHeight, 40] }, { pos: new THREE.Vector3(20, wallHeight / 2, -20), size: [40, wallHeight, wallThickness] }, { pos: new THREE.Vector3(30, wallHeight / 2, -90), size: [wallThickness, wallHeight, 60] }, { pos: new THREE.Vector3(90, wallHeight / 2, -30), size: [60, wallHeight, wallThickness] }, // Quadrant 2 (Northwest) { pos: new THREE.Vector3(-40, wallHeight / 2, -40), size: [60, wallHeight, wallThickness] }, { pos: new THREE.Vector3(-60, wallHeight / 2, -60), size: [wallThickness, wallHeight, 40] }, { pos: new THREE.Vector3(-20, wallHeight / 2, -20), size: [40, wallHeight, wallThickness] }, { pos: new THREE.Vector3(-90, wallHeight / 2, -30), size: [wallThickness, wallHeight, 60] }, { pos: new THREE.Vector3(-30, wallHeight / 2, -90), size: [60, wallHeight, wallThickness] }, // Quadrant 3 (Southwest) { pos: new THREE.Vector3(-40, wallHeight / 2, 40), size: [60, wallHeight, wallThickness] }, { pos: new THREE.Vector3(-60, wallHeight / 2, 60), size: [wallThickness, wallHeight, 40] }, { pos: new THREE.Vector3(-20, wallHeight / 2, 20), size: [40, wallHeight, wallThickness] }, { pos: new THREE.Vector3(-90, wallHeight / 2, 30), size: [wallThickness, wallHeight, 60] }, { pos: new THREE.Vector3(-30, wallHeight / 2, 90), size: [60, wallHeight, wallThickness] }, // Quadrant 4 (Southeast) { pos: new THREE.Vector3(40, wallHeight / 2, 40), size: [60, wallHeight, wallThickness] }, { pos: new THREE.Vector3(60, wallHeight / 2, 60), size: [wallThickness, wallHeight, 40] }, { pos: new THREE.Vector3(20, wallHeight / 2, 20), size: [40, wallHeight, wallThickness] }, { pos: new THREE.Vector3(90, wallHeight / 2, 30), size: [wallThickness, wallHeight, 60] }, { pos: new THREE.Vector3(30, wallHeight / 2, 90), size: [60, wallHeight, wallThickness] }, // Additional maze complexity - Outer Ring { pos: new THREE.Vector3(0, wallHeight / 2, -120), size: [120, wallHeight, wallThickness] }, { pos: new THREE.Vector3(0, wallHeight / 2, 120), size: [120, wallHeight, wallThickness] }, { pos: new THREE.Vector3(-120, wallHeight / 2, 0), size: [wallThickness, wallHeight, 120] }, { pos: new THREE.Vector3(120, wallHeight / 2, 0), size: [wallThickness, wallHeight, 120] }, // Diagonal corridors with additional connections { pos: new THREE.Vector3(-100, wallHeight / 2, -100), size: [80, wallHeight, wallThickness] }, { pos: new THREE.Vector3(100, wallHeight / 2, 100), size: [80, wallHeight, wallThickness] }, { pos: new THREE.Vector3(-100, wallHeight / 2, 100), size: [80, wallHeight, wallThickness] }, { pos: new THREE.Vector3(100, wallHeight / 2, -100), size: [80, wallHeight, wallThickness] }, // Inner circular pattern { pos: new THREE.Vector3(-50, wallHeight / 2, -50), size: [40, wallHeight, wallThickness] }, { pos: new THREE.Vector3(50, wallHeight / 2, 50), size: [40, wallHeight, wallThickness] }, { pos: new THREE.Vector3(-50, wallHeight / 2, 50), size: [40, wallHeight, wallThickness] }, { pos: new THREE.Vector3(50, wallHeight / 2, -50), size: [40, wallHeight, wallThickness] }, // Dead ends and challenge areas { pos: new THREE.Vector3(-140, wallHeight / 2, -140), size: [40, wallHeight, wallThickness] }, { pos: new THREE.Vector3(140, wallHeight / 2, 140), size: [40, wallHeight, wallThickness] }, { pos: new THREE.Vector3(-140, wallHeight / 2, 140), size: [wallThickness, wallHeight, 40] }, { pos: new THREE.Vector3(140, wallHeight / 2, -140), size: [wallThickness, wallHeight, 40] }, // Additional maze complexity - Inner areas { pos: new THREE.Vector3(-70, wallHeight / 2, -70), size: [30, wallHeight, wallThickness] }, { pos: new THREE.Vector3(70, wallHeight / 2, 70), size: [30, wallHeight, wallThickness] }, { pos: new THREE.Vector3(-70, wallHeight / 2, 70), size: [wallThickness, wallHeight, 30] }, { pos: new THREE.Vector3(70, wallHeight / 2, -70), size: [wallThickness, wallHeight, 30] }, // Cross passages { pos: new THREE.Vector3(-110, wallHeight / 2, -40), size: [60, wallHeight, wallThickness] }, { pos: new THREE.Vector3(110, wallHeight / 2, 40), size: [60, wallHeight, wallThickness] }, { pos: new THREE.Vector3(-40, wallHeight / 2, -110), size: [wallThickness, wallHeight, 60] }, { pos: new THREE.Vector3(40, wallHeight / 2, 110), size: [wallThickness, wallHeight, 60] }, // Corner complexes { pos: new THREE.Vector3(-130, wallHeight / 2, -100), size: [40, wallHeight, wallThickness] }, { pos: new THREE.Vector3(130, wallHeight / 2, 100), size: [40, wallHeight, wallThickness] }, { pos: new THREE.Vector3(-100, wallHeight / 2, -130), size: [wallThickness, wallHeight, 40] }, { pos: new THREE.Vector3(100, wallHeight / 2, 130), size: [wallThickness, wallHeight, 40] }, // Additional barriers { pos: new THREE.Vector3(-85, wallHeight / 2, -85), size: [30, wallHeight, wallThickness] }, { pos: new THREE.Vector3(85, wallHeight / 2, 85), size: [30, wallHeight, wallThickness] }, { pos: new THREE.Vector3(-85, wallHeight / 2, 85), size: [wallThickness, wallHeight, 30] }, { pos: new THREE.Vector3(85, wallHeight / 2, -85), size: [wallThickness, wallHeight, 30] } ]; // Create all the walls from the predefined positions mazeWalls.forEach(wall => { mazeGroup.add(createMazeWall(wall.size[0], wall.size[1], wall.size[2], wall.pos)); }); return mazeGroup; } function createTerrain() { const size = 1000; // Much larger ground size // Create simple flat plane for visuals const geometry = new THREE.PlaneGeometry(size, size); const texture = textureLoader.load('https://play.rosebud.ai/assets/3D_playground_grass_diffuse.png?0MBe'); const normalMap = textureLoader.load('https://play.rosebud.ai/assets/3D_playground_grass_normal.png?F0zr'); texture.wrapS = texture.wrapT = THREE.RepeatWrapping; texture.repeat.set(20, 20); texture.encoding = THREE.sRGBEncoding; normalMap.wrapS = normalMap.wrapT = THREE.RepeatWrapping; normalMap.repeat.set(20, 20); const material = new THREE.MeshStandardMaterial({ map: texture, normalMap: normalMap, normalScale: new THREE.Vector2(2, 2), roughness: 0.8, metalness: 0.1, envMapIntensity: 1.0, }); const terrain = new THREE.Mesh(geometry, material); 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, }); groundBody.addShape(groundShape); groundBody.position.set(0, -0.1, 0); world.addBody(groundBody); return terrain; } // Array to store all key objects and key collection tracking let keyObjects = []; let collectedKeys = 0; const totalKeys = 6; let gateOpened = false; let gameWon = false; let jumpscareActive = false; let jumpscareStartTime = 0; const JUMPSCARE_DURATION = 1000; // Duration in milliseconds // Create jumpscare overlay const jumpscareOverlay = document.createElement('div'); jumpscareOverlay.style.position = 'fixed'; jumpscareOverlay.style.top = '0'; jumpscareOverlay.style.left = '0'; jumpscareOverlay.style.width = '100%'; jumpscareOverlay.style.height = '100%'; jumpscareOverlay.style.display = 'none'; jumpscareOverlay.style.justifyContent = 'center'; jumpscareOverlay.style.alignItems = 'center'; jumpscareOverlay.style.zIndex = '2000'; jumpscareOverlay.style.backgroundColor = 'black'; const jumpscareImage = document.createElement('img'); jumpscareImage.src = 'https://play.rosebud.ai/assets/white eyes.png?o1vX'; jumpscareImage.style.width = '100%'; jumpscareImage.style.height = '100%'; jumpscareImage.style.objectFit = 'contain'; jumpscareOverlay.appendChild(jumpscareImage); parentDiv.appendChild(jumpscareOverlay); function startJumpscare() { jumpscareActive = true; jumpscareStartTime = performance.now(); // Lock controls during jumpscare keysPressed.w = false; keysPressed.a = false; keysPressed.s = false; keysPressed.d = false; keysPressed.space = false; keysPressed.shift = false; // Show jumpscare overlay jumpscareOverlay.style.display = 'flex'; // Play jumpscare sound if (jumpscareSound) { jumpscareSound.currentTime = 0; // Reset sound to start jumpscareSound.play().catch(error => { console.warn('Jumpscare sound playback failed:', error); }); } } function updateJumpscare() { if (!jumpscareActive) return; const currentTime = performance.now(); const elapsed = currentTime - jumpscareStartTime; if (elapsed > JUMPSCARE_DURATION) { jumpscareActive = false; // Hide jumpscare overlay jumpscareOverlay.style.display = 'none'; // Stop jumpscare sound if (jumpscareSound && !jumpscareSound.paused) { jumpscareSound.pause(); jumpscareSound.currentTime = 0; } // Reset game state gameWon = false; gameStarted = false; gateOpened = false; collectedKeys = 0; currentGateHeight = 0; keyCounter.innerHTML = `Keys: 0/${totalKeys}`; keyCounter.style.display = 'none'; // Reset gate position maze.traverse((child) => { if (child.isMesh && child.position.z === -150) { child.position.y = child.position.y - currentGateHeight; } }); // Remove old keys keyObjects.forEach(keyObj => { if (!keyObj.collected) { scene.remove(keyObj.mesh); scene.remove(keyObj.spotlight); scene.remove(keyObj.collisionSphere); } }); keyObjects = []; // Create new keys createKeys(totalKeys); // Reset character position to origin if (characterBody) { characterBody.position.set(0, characterConfig.startHeight, 30); characterBody.velocity.set(0, 0, 0); characterBody.angularVelocity.set(0, 0, 0); } // Reset camera rotation targetRotationX = 0; targetRotationY = 0; // Stop walking sound if playing if (walkingSound && !walkingSound.paused) { walkingSound.pause(); walkingSound.currentTime = 0; } // Show start menu startMenu.style.display = 'flex'; return; } // Calculate shake intensity (reduces over time) const intensity = 0.5 * (1 - elapsed / JUMPSCARE_DURATION); // Get monster's eye positions const leftEye = monster.mesh.children[5]; // Left eye const rightEye = monster.mesh.children[6]; // Right eye // Calculate center point between eyes const leftEyePos = new THREE.Vector3(); const rightEyePos = new THREE.Vector3(); leftEye.getWorldPosition(leftEyePos); rightEye.getWorldPosition(rightEyePos); // Calculate center between eyes const centerEyePos = new THREE.Vector3().addVectors(leftEyePos, rightEyePos).multiplyScalar(0.5); // Position camera directly in front of monster's face const monsterFacePos = new THREE.Vector3(); monsterFacePos.copy(centerEyePos); // Get direction monster is facing const monsterForward = new THREE.Vector3(0, 0, 1); monsterForward.applyQuaternion(monster.mesh.quaternion); // Position camera slightly in front of the face monsterFacePos.add(monsterForward.multiplyScalar(2)); // Add shake effect monsterFacePos.x += (Math.random() - 0.5) * intensity; monsterFacePos.y += (Math.random() - 0.5) * intensity; monsterFacePos.z += (Math.random() - 0.5) * intensity; // Update camera position camera.position.copy(monsterFacePos); // Make camera look directly into monster's eyes camera.lookAt(centerEyePos); } // Monster properties const monster = { mesh: null, body: null }; function createMonster() { const monsterGroup = new THREE.Group(); // Create the body (much slimmer) const bodyGeometry = new THREE.CapsuleGeometry(1, 10, 4, 8); const bodyMaterial = new THREE.MeshStandardMaterial({ color: 0x000000, roughness: 0.1, metalness: 0.9, emissive: 0x110000, emissiveIntensity: 0.2 }); const body = new THREE.Mesh(bodyGeometry, bodyMaterial); body.castShadow = true; body.receiveShadow = true; body.position.y = 6; // Move body up by 6 units // Create thin arms const armGeometry = new THREE.CapsuleGeometry(0.3, 8, 4, 8); const armMaterial = new THREE.MeshStandardMaterial({ color: 0x000000, roughness: 0.3, metalness: 0.7 }); const leftArm = new THREE.Mesh(armGeometry, armMaterial); const rightArm = new THREE.Mesh(armGeometry, armMaterial); // Position arms attached to raised body leftArm.position.set(-1.5, 8, 0); // Raised to match new body position rightArm.position.set(1.5, 8, 0); // Raised to match new body position leftArm.rotation.z = -Math.PI / 3; rightArm.rotation.z = Math.PI / 3; // Create thin legs const legGeometry = new THREE.CapsuleGeometry(0.4, 16, 4, 8); const leftLeg = new THREE.Mesh(legGeometry, armMaterial); const rightLeg = new THREE.Mesh(legGeometry, armMaterial); // Position legs leftLeg.position.set(-1.5, -6, 0); rightLeg.position.set(1.5, -6, 0); // Create small white glowing eyes const eyeGeometry = new THREE.SphereGeometry(0.2, 16, 16); const eyeMaterial = new THREE.MeshStandardMaterial({ color: 0xffffff, emissive: 0xffffff, emissiveIntensity: 3.0, metalness: 1.0, roughness: 0.0 }); const leftEye = new THREE.Mesh(eyeGeometry, eyeMaterial); const rightEye = new THREE.Mesh(eyeGeometry, eyeMaterial); // Position eyes closer together on the raised body leftEye.position.set(-0.4, 12, 1); // Raised to match new body position rightEye.position.set(0.4, 12, 1); // Raised to match new body position // Add white eye lights for glow effect const leftEyeLight = new THREE.PointLight(0xffffff, 1, 5); const rightEyeLight = new THREE.PointLight(0xffffff, 1, 5); leftEyeLight.position.copy(leftEye.position); rightEyeLight.position.copy(rightEye.position); // Add glowing cracks effect using multiple emissive cylinders const crackMaterial = new THREE.MeshStandardMaterial({ color: 0xff0000, emissive: 0xff0000, emissiveIntensity: 2, transparent: true, opacity: 0.8 }); const createCrack = (position, rotation, scale) => { const crackGeometry = new THREE.CylinderGeometry(0.1, 0.1, 2, 4); const crack = new THREE.Mesh(crackGeometry, crackMaterial); crack.position.copy(position); crack.rotation.copy(rotation); crack.scale.copy(scale); return crack; }; // Add multiple cracks in different orientations const cracks = [ createCrack( new THREE.Vector3(1, 0, 1), new THREE.Euler(0, Math.PI / 4, Math.PI / 2), new THREE.Vector3(1, 2, 1) ), createCrack( new THREE.Vector3(-1, 0, -1), new THREE.Euler(0, -Math.PI / 4, Math.PI / 2), new THREE.Vector3(1, 1.5, 1) ), createCrack( new THREE.Vector3(0, 1, 0), new THREE.Euler(Math.PI / 4, 0, 0), new THREE.Vector3(1, 1, 1) ) ]; // Add floating crystals around the core const crystalGeometry = new THREE.OctahedronGeometry(0.5, 0); const crystalMaterial = new THREE.MeshStandardMaterial({ color: 0xff0000, emissive: 0xff0000, emissiveIntensity: 1, metalness: 1, roughness: 0.2 }); const createCrystal = (angle) => { const crystal = new THREE.Mesh(crystalGeometry, crystalMaterial); const radius = 4; crystal.position.set( Math.cos(angle) * radius, Math.sin(angle * 2) * 0.5 + 2, Math.sin(angle) * radius ); crystal.userData.baseAngle = angle; return crystal; }; const crystals = []; for (let i = 0; i < 8; i++) { crystals.push(createCrystal((i / 8) * Math.PI * 2)); } // Add dark mist effect using small particle system const mistGeometry = new THREE.BufferGeometry(); const mistMaterial = new THREE.PointsMaterial({ color: 0x330000, size: 0.2, transparent: true, opacity: 0.6 }); const mistParticles = new Float32Array(300 * 3); for (let i = 0; i < mistParticles.length; i += 3) { const angle = Math.random() * Math.PI * 2; const radius = 3 + Math.random() * 2; mistParticles[i] = Math.cos(angle) * radius; mistParticles[i + 1] = (Math.random() - 0.5) * 4; mistParticles[i + 2] = Math.sin(angle) * radius; } mistGeometry.setAttribute('position', new THREE.Float32BufferAttribute(mistParticles, 3)); const mist = new THREE.Points(mistGeometry, mistMaterial); // Add all elements to the monster group // Add all parts to monster group monsterGroup.add(body); monsterGroup.add(leftArm, rightArm); monsterGroup.add(leftLeg, rightLeg); monsterGroup.add(leftEye, rightEye); monsterGroup.add(leftEyeLight, rightEyeLight); // Add light source from within const innerLight = new THREE.PointLight(0xff0000, 2, 10); innerLight.position.set(0, 0, 0); monsterGroup.add(innerLight); // Create physics body for the monster const monsterShape = new CANNON.Sphere(3); const monsterBody = new CANNON.Body({ mass: 0, type: CANNON.Body.STATIC, material: groundPhysMaterial }); monsterBody.addShape(monsterShape); // Position monster in front of the gate const gatePosition = new CANNON.Vec3(0, 10, -140); // Gate is at z=-150, put monster 10 units in front monsterBody.position.copy(gatePosition); world.addBody(monsterBody); // Position the visual monster mesh and make it visible monsterGroup.position.copy(monsterBody.position); monsterGroup.visible = true; // Add strong red light near the monster for dramatic effect const monsterLight = new THREE.SpotLight(0xff0000, 4, 30); monsterLight.position.set(0, 15, -135); // Position light above monster monsterLight.target = monsterGroup; monsterLight.angle = Math.PI / 6; monsterLight.penumbra = 0.3; scene.add(monsterLight); // Store animation properties in the group's userData monsterGroup.userData = { crystals: crystals, mist: mist, innerLight: innerLight }; // Add to scene and store references scene.add(monsterGroup); monster.mesh = monsterGroup; monster.body = monsterBody; } // Create win screen const winScreen = document.createElement('div'); winScreen.style.position = 'absolute'; winScreen.style.top = '0'; winScreen.style.left = '0'; winScreen.style.width = '100%'; winScreen.style.height = '100%'; winScreen.style.backgroundColor = 'rgba(0, 0, 0, 0.85)'; winScreen.style.display = 'none'; winScreen.style.flexDirection = 'column'; winScreen.style.justifyContent = 'center'; winScreen.style.alignItems = 'center'; winScreen.style.color = 'white'; winScreen.style.fontFamily = 'Arial, sans-serif'; winScreen.style.zIndex = '1000'; const winTitle = document.createElement('h1'); winTitle.textContent = 'YOU ESCAPED!'; winTitle.style.fontSize = '48px'; winTitle.style.color = '#4CAF50'; winTitle.style.marginBottom = '30px'; winTitle.style.textShadow = '2px 2px 4px rgba(0, 0, 0, 0.5)'; const playAgainButton = document.createElement('button'); playAgainButton.textContent = 'Play Again'; playAgainButton.style.padding = '15px 30px'; playAgainButton.style.fontSize = '24px'; playAgainButton.style.backgroundColor = '#4CAF50'; playAgainButton.style.color = 'white'; playAgainButton.style.border = 'none'; playAgainButton.style.borderRadius = '5px'; playAgainButton.style.cursor = 'pointer'; playAgainButton.style.transition = 'background-color 0.3s'; playAgainButton.onmouseover = () => { playAgainButton.style.backgroundColor = '#45a049'; }; playAgainButton.onmouseout = () => { playAgainButton.style.backgroundColor = '#4CAF50'; }; winScreen.appendChild(winTitle); winScreen.appendChild(playAgainButton); parentDiv.appendChild(winScreen); // Create a single key mesh function createKeyMesh() { const keyGroup = new THREE.Group(); // Key head (more detailed ring with decorative elements) const ringOuterRadius = 1.0; const ringInnerRadius = 0.6; const ringThickness = 0.25; // Main ring const ringGeometry = new THREE.TorusGeometry( (ringOuterRadius + ringInnerRadius) / 2, (ringOuterRadius - ringInnerRadius) / 2, 16, 32 ); const ringMesh = new THREE.Mesh(ringGeometry); // Decorative outer rim const rimGeometry = new THREE.TorusGeometry(ringOuterRadius, 0.15, 8, 16); const upperRim = new THREE.Mesh(rimGeometry); const lowerRim = new THREE.Mesh(rimGeometry); upperRim.position.z = ringThickness / 2; lowerRim.position.z = -ringThickness / 2; // Key shaft (tapered design) const shaftLength = 4; const shaftGeometry = new THREE.CylinderGeometry(0.3, 0.25, shaftLength, 8); const shaftMesh = new THREE.Mesh(shaftGeometry); shaftMesh.position.y = -shaftLength / 2 - 1; // Decorative collar where shaft meets head const collarGeometry = new THREE.CylinderGeometry(0.4, 0.3, 0.3, 8); const collarMesh = new THREE.Mesh(collarGeometry); collarMesh.position.y = -1; // Key bit (the part with teeth) const bitLength = 2; const bitGeometry = new THREE.BoxGeometry(0.8, bitLength, 0.2); const bitMesh = new THREE.Mesh(bitGeometry); bitMesh.position.y = -(shaftLength + bitLength / 2); // Create detailed teeth const teethGroup = new THREE.Group(); const teethPositions = [{ y: 0.6, h: 0.4, w: 0.4 }, { y: 0.2, h: 0.3, w: 0.5 }, { y: -0.2, h: 0.5, w: 0.3 }, { y: -0.6, h: 0.4, w: 0.4 }]; teethPositions.forEach(tooth => { const toothGeometry = new THREE.BoxGeometry(tooth.w, 0.2, 0.4); const toothMesh = new THREE.Mesh(toothGeometry); toothMesh.position.set(0.6, -(shaftLength + tooth.y), 0); teethGroup.add(toothMesh); }); // Create material with enhanced metallic effect const keyMaterial = new THREE.MeshStandardMaterial({ color: 0xffd700, // Gold color metalness: 0.9, // More metallic roughness: 0.1 // Smoother surface }); // Apply material and shadows to all meshes [ringMesh, upperRim, lowerRim, shaftMesh, collarMesh, bitMesh, ...teethGroup.children].forEach(mesh => { mesh.material = keyMaterial; mesh.castShadow = true; mesh.receiveShadow = true; }); // Add all parts to the key group keyGroup.add(ringMesh, upperRim, lowerRim, shaftMesh, collarMesh, bitMesh, teethGroup); // Rotate the key to lay flat and adjust scale keyGroup.rotation.x = Math.PI / 2; keyGroup.scale.set(0.6, 0.6, 0.6); // Make the key smaller return keyGroup; } // Create multiple keys function createKeys(count) { const usedPositions = new Set(); // Track used positions for (let i = 0; i < count; i++) { const keyGroup = createKeyMesh(); // Keep trying until we find an unused position let randomPosition; let positionKey; do { randomPosition = getRandomKeyPosition(); positionKey = `${randomPosition.x.toFixed(1)},${randomPosition.z.toFixed(1)}`; } while (usedPositions.has(positionKey)); usedPositions.add(positionKey); keyGroup.position.copy(randomPosition); // Add spotlight above the key const keySpotlight = new THREE.SpotLight(0xffffaa, 2.5); // Slightly increased intensity keySpotlight.position.set(randomPosition.x, 15, randomPosition.z); // Lower height for more focused lighting keySpotlight.target = keyGroup; keySpotlight.angle = Math.PI / 6; keySpotlight.penumbra = 0.3; keySpotlight.distance = 50; keySpotlight.decay = 1; keySpotlight.castShadow = true; // Improve spotlight shadow quality keySpotlight.shadow.mapSize.width = 512; keySpotlight.shadow.mapSize.height = 512; keySpotlight.shadow.camera.near = 1; keySpotlight.shadow.camera.far = 60; keySpotlight.shadow.focus = 1; scene.add(keySpotlight); scene.add(keyGroup); // Create key hitbox with proper dimensions const keyBoundingBox = new THREE.Box3().setFromObject(keyGroup); const keySize = keyBoundingBox.getSize(new THREE.Vector3()); // Create larger collision box for better collection detection const collisionGeometry = new THREE.BoxGeometry(8, 8, 8); const collisionMaterial = new THREE.MeshBasicMaterial({ visible: false, wireframe: true }); const collisionSphere = new THREE.Mesh(collisionGeometry, collisionMaterial); // Make sure the key is well away from walls randomPosition.y += 1; // Lift slightly higher collisionSphere.position.copy(randomPosition); // Check for wall collisions before finalizing position const wallCheckRadius = 3; // Minimum distance from walls let hasCollision = false; maze.traverse((child) => { if (child.isMesh) { const wallBox = new THREE.Box3().setFromObject(child); const expandedWallBox = wallBox.clone().expandByScalar(wallCheckRadius); if (expandedWallBox.containsPoint(randomPosition)) { hasCollision = true; } } }); if (!hasCollision) { scene.add(collisionSphere); scene.add(keyGroup); scene.add(keySpotlight); } else { // Try another position if there's a collision i--; continue; } keyObjects.push({ mesh: keyGroup, spotlight: keySpotlight, baseY: randomPosition.y, collisionSphere: collisionSphere, collected: false, hitboxHelper: new THREE.Box3Helper(new THREE.Box3().setFromObject(keyGroup), 0xffff00) }); } } // Function to get random key position within the maze function getRandomKeyPosition() { // Guaranteed safe spawn zones (carefully tested open areas) const safeZones = [{ center: { x: -100, z: -100 }, radius: 15 }, // NW quadrant { center: { x: 100, z: -100 }, radius: 8 }, // NE quadrant { center: { x: -100, z: 100 }, radius: 8 }, // SW quadrant { center: { x: 100, z: 100 }, radius: 8 }, // SE quadrant { center: { x: -50, z: -50 }, radius: 6 }, // Inner NW { center: { x: 50, z: -50 }, radius: 6 }, // Inner NE { center: { x: -50, z: 50 }, radius: 6 }, // Inner SW { center: { x: 50, z: 50 }, radius: 6 }, // Inner SE { center: { x: 0, z: -90 }, radius: 5 }, // North corridor { center: { x: 0, z: 90 }, radius: 5 }, // South corridor { center: { x: -90, z: 0 }, radius: 5 }, // West corridor { center: { x: 90, z: 0 }, radius: 5 } // East corridor ]; // Pick a random safe zone let attempts = 0; const maxAttempts = 50; while (attempts < maxAttempts) { const safeZone = safeZones[Math.floor(Math.random() * safeZones.length)]; // Generate position within the safe zone using polar coordinates const angle = Math.random() * Math.PI * 2; const radius = Math.random() * safeZone.radius; const position = new THREE.Vector3( safeZone.center.x + Math.cos(angle) * radius, 4, // Consistent height safeZone.center.z + Math.sin(angle) * radius ); // Create a collision box for testing // Create a test box that encompasses the entire key model const keySize = new THREE.Vector3(4, 4, 4); // Size that covers the entire key model const testBox = new THREE.Box3().setFromCenterAndSize( position, keySize ); // Add padding around the test box to ensure spacing from walls const paddedTestBox = testBox.clone().expandByScalar(3); // Check for wall collisions let hasCollision = false; maze.traverse((child) => { if (child.isMesh) { const wallBox = new THREE.Box3().setFromObject(child); // Check both the actual key box and the padded box if (wallBox.intersectsBox(testBox) || wallBox.intersectsBox(paddedTestBox)) { hasCollision = true; } } }); if (!hasCollision) { return position; } attempts++; } // Fallback to a guaranteed safe position if all attempts fail return new THREE.Vector3(0, 4, 90); } // Setup improved lighting system // Create moon light instead of sun const moonLight = new THREE.DirectionalLight(0xc9d5ff, 0.5); moonLight.position.set(-50, 100, -50); moonLight.castShadow = true; moonLight.shadow.mapSize.width = 2048; moonLight.shadow.mapSize.height = 2048; moonLight.shadow.camera.near = 10; moonLight.shadow.camera.far = 400; moonLight.shadow.camera.left = -100; moonLight.shadow.camera.right = 100; moonLight.shadow.camera.top = 100; moonLight.shadow.camera.bottom = -100; moonLight.shadow.bias = -0.001; scene.add(moonLight); // Add hemisphere light to simulate night sky and ground bounce light const hemiLight = new THREE.HemisphereLight(skyColor, groundColor, 0.2); scene.add(hemiLight); // Add some ambient light to prevent complete darkness const ambientLight = new THREE.AmbientLight(0x152238, 0.3); scene.add(ambientLight); // ========================= // Character Integration // ========================= // Variables for character let character = null; let characterBody = null; let mixer = null; let isGrounded = false; let currentJumps = 0; let lastJumpTime = 0; let moveDirection = new THREE.Vector3(); let walkAction = null; let idleAction = null; let jumpAction = null; let fallAction = null; let contactNormal = new CANNON.Vec3(); let upAxis = new CANNON.Vec3(0, 1, 0); const keysPressed = { w: false, a: false, s: false, d: false, space: false, shift: false, }; // Character configuration const characterConfig = { // Movement settings baseGroundSpeed: 15, sprintMultiplier: 1.8, groundSpeed: 15, // Will be modified by sprint airSpeed: 12, groundDamping: 0.1, airDamping: 0.1, acceleration: 50, turnSpeed: 8, jumpForce: 12, jumpCooldown: 0.1, maxJumps: 1, // Physics settings radius: 2.5, // Collision shape radius height: 5, // Increased height to match model's visual height mass: 62, friction: 0.1, restitution: 0.0, linearDamping: 0.02, angularDamping: 0.9, // Visual and animation settings scale: 10, startHeight: 8, }; // Define physics materials for character const characterPhysMaterial = new CANNON.Material('character'); // Create contact material between character and ground const characterGroundContact = new CANNON.ContactMaterial( characterPhysMaterial, groundPhysMaterial, { friction: 0.01, restitution: 0.0, contactEquationStiffness: 1e8, contactEquationRelaxation: 3, } ); world.addContactMaterial(characterGroundContact); // Add keyboard event listeners window.addEventListener('keydown', (event) => { if (event.code === 'Space') { keysPressed.space = true; } else if (event.code === 'ShiftLeft') { keysPressed.shift = true; } else if (keysPressed.hasOwnProperty(event.key.toLowerCase())) { keysPressed[event.key.toLowerCase()] = true; } }); window.addEventListener('keyup', (event) => { if (event.code === 'Space') { keysPressed.space = false; } else if (event.code === 'ShiftLeft') { keysPressed.shift = false; } else if (keysPressed.hasOwnProperty(event.key.toLowerCase())) { keysPressed[event.key.toLowerCase()] = false; } }); // Function to get random spawn position function getRandomSpawnPosition() { // List of predefined safe spawn positions const spawnPositions = [{ x: -120, z: -120 }, { x: 120, z: 120 }, { x: -120, z: 120 }, { x: 120, z: -120 }, { x: -80, z: -80 }, { x: 80, z: 80 }, { x: -80, z: 80 }, { x: 80, z: -80 }, { x: 0, z: -120 }, { x: 0, z: 120 }, { x: -120, z: 0 }, { x: 120, z: 0 }]; // Pick a random spawn position const randomIndex = Math.floor(Math.random() * spawnPositions.length); const position = spawnPositions[randomIndex]; // Add small random offset for variety const randomOffset = 5; position.x += (Math.random() - 0.5) * randomOffset; position.z += (Math.random() - 0.5) * randomOffset; return new THREE.Vector3(position.x, characterConfig.startHeight, position.z); } // Load the character model const characterUrl = 'https://play.rosebud.ai/assets/3D_playground_character.glb?FFiL'; gltfLoader.load(characterUrl, (gltf) => { const model = gltf.scene; model.scale.set( characterConfig.scale, characterConfig.scale, characterConfig.scale ); // Hide the character model in first person model.visible = false; // Adjust model's position so feet are on the ground model.position.set(0, 0, 0); model.traverse((child) => { if (child.isMesh) { child.castShadow = true; child.receiveShadow = true; child.material.envMapIntensity = 1.0; } }); // Create character physics body characterBody = new CANNON.Body({ mass: characterConfig.mass, material: characterPhysMaterial, linearDamping: characterConfig.linearDamping, angularDamping: characterConfig.angularDamping, fixedRotation: true, type: CANNON.Body.DYNAMIC, }); const characterShape = new CANNON.Cylinder( characterConfig.radius, characterConfig.radius, characterConfig.height, 8 ); // Adjust shapeOffset to align collision shape with the character model const shapeOffset = new CANNON.Vec3(0, characterConfig.height / 2, 0); characterBody.addShape(characterShape, shapeOffset); // Set random spawn position const spawnPosition = getRandomSpawnPosition(); characterBody.position.copy(spawnPosition); world.addBody(characterBody); // Reset contact tracking isGrounded = false; let groundContactCount = 0; characterBody.addEventListener('collide', (event) => { const contact = event.contact; let otherBody; if (event.contact.bi === characterBody) { otherBody = event.contact.bj; contact.ni.negate(contactNormal); } else { otherBody = event.contact.bi; contactNormal.copy(contact.ni); } if (contactNormal.dot(upAxis) > 0.5) { groundContactCount++; isGrounded = true; currentJumps = 0; // Reset animations for ground state if (fallAction) { fallAction.stop(); fallAction.setEffectiveWeight(0); } if (jumpAction) { jumpAction.stop(); jumpAction.setEffectiveWeight(0); } } }); characterBody.addEventListener('endContact', (event) => { let otherBody; if (event.contact.bi === characterBody) { otherBody = event.contact.bj; event.contact.ni.negate(contactNormal); } else { otherBody = event.contact.bi; contactNormal.copy(event.contact.ni); } if (contactNormal.dot(upAxis) > 0.5) { groundContactCount = Math.max(0, groundContactCount - 1); if (groundContactCount === 0) { isGrounded = false; } } }); // Setup animations mixer = new THREE.AnimationMixer(model); const idleClip = gltf.animations.find((clip) => clip.name.toLowerCase().includes('idle')); const walkClip = gltf.animations.find((clip) => clip.name.toLowerCase().includes('walk')); const jumpClip = gltf.animations.find((clip) => clip.name.toLowerCase().includes('jump')); const fallClip = gltf.animations.find((clip) => clip.name.toLowerCase().includes('fall')); if (idleClip) { idleAction = mixer.clipAction(idleClip); idleAction.play(); idleAction.setEffectiveWeight(1); } if (walkClip) { walkAction = mixer.clipAction(walkClip); walkAction.play(); walkAction.setEffectiveWeight(0); } if (jumpClip) { jumpAction = mixer.clipAction(jumpClip); jumpAction.setLoop(THREE.LoopOnce); jumpAction.clampWhenFinished = true; jumpAction.setEffectiveWeight(0); } if (fallClip) { fallAction = mixer.clipAction(fallClip); fallAction.setLoop(THREE.LoopRepeat); fallAction.setEffectiveWeight(0); } character = model; scene.add(model); }); // Update character movement function updateCharacterMovement(deltaTime) { if (!character || !characterBody) return; // Get camera's forward and right vectors for movement const cameraForward = new THREE.Vector3(0, 0, 1).applyQuaternion(camera.quaternion); const cameraRight = new THREE.Vector3(-1, 0, 0).applyQuaternion(camera.quaternion); // Keep movement on the horizontal plane cameraForward.y = 0; cameraForward.normalize(); cameraRight.y = 0; cameraRight.normalize(); // Calculate move direction relative to camera moveDirection.set(0, 0, 0); // Add movement input if (keysPressed.w) moveDirection.sub(cameraForward); if (keysPressed.s) moveDirection.add(cameraForward); if (keysPressed.a) moveDirection.add(cameraRight); if (keysPressed.d) moveDirection.sub(cameraRight); // Normalize movement direction if it exists if (moveDirection.length() > 0) { moveDirection.normalize(); } // Get current horizontal velocity const currentVelocity = new THREE.Vector2(characterBody.velocity.x, characterBody.velocity.z); // Different handling for ground vs air movement if (isGrounded) { // Update ground speed based on sprint state characterConfig.groundSpeed = keysPressed.shift ? characterConfig.baseGroundSpeed * characterConfig.sprintMultiplier : characterConfig.baseGroundSpeed; // Ground movement if (moveDirection.length() > 0) { // Calculate target velocity const targetVelocity = new THREE.Vector2( moveDirection.x * characterConfig.groundSpeed, moveDirection.z * characterConfig.groundSpeed ); // Interpolate current velocity towards target currentVelocity.lerp(targetVelocity, characterConfig.acceleration * deltaTime); // Update character rotation const targetAngle = Math.atan2(moveDirection.x, moveDirection.z); let currentAngle = character.rotation.y; // Calculate shortest rotation distance let angleDiff = targetAngle - currentAngle; if (angleDiff > Math.PI) angleDiff -= Math.PI * 2; if (angleDiff < -Math.PI) angleDiff += Math.PI * 2; // Smoothly rotate character character.rotation.y += angleDiff * characterConfig.turnSpeed * deltaTime; characterBody.quaternion.setFromEuler(0, character.rotation.y, 0); } else { // Immediately stop when no input is detected currentVelocity.set(0, 0); } } else { // Air movement if (moveDirection.length() > 0) { const airVelocity = new THREE.Vector2( moveDirection.x * characterConfig.airSpeed * deltaTime, moveDirection.z * characterConfig.airSpeed * deltaTime ); currentVelocity.add(airVelocity); // Clamp air speed const maxAirSpeed = characterConfig.airSpeed; if (currentVelocity.length() > maxAirSpeed) { currentVelocity.normalize().multiplyScalar(maxAirSpeed); } } else { // Apply air damping when no input currentVelocity.multiplyScalar(1 - characterConfig.airDamping * deltaTime); } } // Apply calculated velocity characterBody.velocity.x = currentVelocity.x; characterBody.velocity.z = currentVelocity.y; // Handle jumping if (keysPressed.space && isGrounded && currentJumps < characterConfig.maxJumps) { const now = performance.now(); if (now - lastJumpTime > characterConfig.jumpCooldown * 1000) { characterBody.velocity.y = characterConfig.jumpForce; currentJumps++; lastJumpTime = now; isGrounded = false; if (jumpAction) { jumpAction.reset(); jumpAction.setEffectiveWeight(1); jumpAction.play(); } } } // Update animations if (mixer && walkAction && idleAction && jumpAction && fallAction) { const verticalVelocity = characterBody.velocity.y; const horizontalSpeed = new THREE.Vector2(characterBody.velocity.x, characterBody.velocity.z).length(); if (!isGrounded) { // Air state walkAction.stop(); idleAction.stop(); if (verticalVelocity > 1) { // Rising fallAction.stop(); jumpAction.play(); jumpAction.setEffectiveWeight(1); } else { // Falling jumpAction.stop(); fallAction.play(); fallAction.setEffectiveWeight(1); } } else { // Ground state jumpAction.stop(); fallAction.stop(); if (horizontalSpeed > 0.1) { idleAction.stop(); walkAction.play(); walkAction.setEffectiveWeight(1); // Play walking sound if it's not already playing if (walkingSound && walkingSound.paused) { walkingSound.play().catch(error => { console.warn('Walking sound playback failed:', error); }); } } else { walkAction.stop(); idleAction.play(); idleAction.setEffectiveWeight(1); // Pause walking sound when not moving if (walkingSound && !walkingSound.paused) { walkingSound.pause(); walkingSound.currentTime = 0; } } } } // Update animation mixer if (mixer) { mixer.update(deltaTime); } } // Update camera for first person view function updateCamera() { if (!character || !characterBody) return; // Set camera position to character's head const headPosition = characterBody.position.clone(); headPosition.y += cameraSettings.height; camera.position.copy(headPosition); // Smoothly interpolate to target rotations camera.rotation.order = 'YXZ'; camera.rotation.x = targetRotationY; camera.rotation.y = targetRotationX; } // ========================= // End of Character Integration // ========================= // Create initial scene const terrain = createTerrain(); const maze = createMaze(); scene.add(maze); createKeys(totalKeys); // Create keys in random positions createMonster(); // Create the monster // Create variables for gate animation const gateGroup = new THREE.Group(); const gateSpeed = 0.5; // Speed of gate opening const maxGateHeight = 20; // Maximum height the gate can rise let currentGateHeight = 0; function animate() { requestAnimationFrame(animate); const deltaTime = Math.min(clock.getDelta(), 0.1); if (assetsLoaded && gameStarted && !gameWon) { // Update jumpscare if active if (jumpscareActive) { updateJumpscare(); } // Update monster animation and ensure visibility if (monster.mesh && monster.body) { const time = performance.now() * 0.001; // Make sure monster remains visible monster.mesh.visible = true; // Floating animation with larger movement monster.mesh.position.y = monster.body.position.y + Math.sin(time * 0.5) * 2; // Rotate floating crystals // Animate arms and legs const leftArm = monster.mesh.children[1]; // Left arm const rightArm = monster.mesh.children[2]; // Right arm const leftLeg = monster.mesh.children[3]; // Left leg const rightLeg = monster.mesh.children[4]; // Right leg // No arm swaying animation - arms stay fixed leftArm.rotation.z = -Math.PI / 3; rightArm.rotation.z = Math.PI / 3; // Subtle leg movement leftLeg.rotation.x = Math.sin(time * 0.3) * 0.1; rightLeg.rotation.x = -Math.sin(time * 0.3) * 0.1; // Pulsing eye effect const leftEye = monster.mesh.children[5]; const rightEye = monster.mesh.children[6]; const pulseIntensity = 1.5 + Math.sin(time * 2) * 0.5; leftEye.material.emissiveIntensity = pulseIntensity; rightEye.material.emissiveIntensity = pulseIntensity; // Animate mist particles const positions = monster.mesh.userData.mist.geometry.attributes.position.array; for (let i = 0; i < positions.length; i += 3) { positions[i + 1] += Math.sin(time + i) * 0.01; if (positions[i + 1] > 2) positions[i + 1] = -2; } monster.mesh.userData.mist.geometry.attributes.position.needsUpdate = true; // Pulse the inner light monster.mesh.userData.innerLight.intensity = 2 + Math.sin(time * 2) * 0.5; // Face the player if (characterBody) { const toPlayer = new THREE.Vector3( characterBody.position.x - monster.body.position.x, 0, characterBody.position.z - monster.body.position.z ); const angle = Math.atan2(toPlayer.x, toPlayer.z); monster.mesh.rotation.y = angle; } } // Advanced monster follow behavior with "look-freeze" mechanic if (monster.mesh && monster.body && characterBody) { // Get player's looking direction (from camera) // Calculate if there's a wall between player and monster const raycaster = new THREE.Raycaster(); const monsterPos = new THREE.Vector3().copy(monster.body.position); const playerPos = new THREE.Vector3().copy(characterBody.position); const toMonster = monsterPos.clone().sub(playerPos); const distanceToMonster = toMonster.length(); const directionToMonster = toMonster.clone().normalize(); // Get player's looking direction const playerLookDirection = new THREE.Vector3(0, 0, -1); playerLookDirection.applyQuaternion(camera.quaternion); playerLookDirection.y = 0; playerLookDirection.normalize(); // Setup raycaster from player to monster raycaster.set(playerPos, directionToMonster); // Check for wall intersections const intersects = raycaster.intersectObjects(maze.children, true); const wallBlocking = intersects.length > 0 && intersects[0].distance < distanceToMonster; // Calculate if player is looking at monster const lookingAtMonster = playerLookDirection.dot(directionToMonster) > 0.7; // Calculate movement direction const toPlayer = new THREE.Vector3( characterBody.position.x - monster.body.position.x, 0, characterBody.position.z - monster.body.position.z ); const distanceToPlayer = toPlayer.length(); const direction = toPlayer.normalize(); // Only move if player is not looking at the monster or is too far // Only move if player is not looking at the monster // Check for game over condition first if (distanceToPlayer < 5 && !jumpscareActive) { // If monster is very close to player and jumpscare isn't already playing // Trigger jumpscare startJumpscare(); // Reset game state gateOpened = false; collectedKeys = 0; currentGateHeight = 0; keyCounter.innerHTML = `Keys: 0/${totalKeys}`; return; // Exit the monster update to prevent further movement during jumpscare // Reset gate position maze.traverse((child) => { if (child.isMesh && child.position.z === -150) { child.position.y = child.position.y - currentGateHeight; } }); // Remove old keys keyObjects.forEach(keyObj => { if (!keyObj.collected) { scene.remove(keyObj.mesh); scene.remove(keyObj.spotlight); scene.remove(keyObj.collisionSphere); } }); keyObjects = []; // Create new keys createKeys(totalKeys); // Reset character position if (characterBody) { characterBody.position.set(0, characterConfig.startHeight, 30); characterBody.velocity.set(0, 0, 0); characterBody.angularVelocity.set(0, 0, 0); } // Reset camera rotation targetRotationX = 0; targetRotationY = 0; return; // Exit the monster update early } // Normal monster movement when not caught if (!lookingAtMonster || wallBlocking) { // Variable speed based on distance let moveSpeed = 100.0; // Base speed if (distanceToPlayer > 50) { moveSpeed = 150.0; // Faster when far away } else if (distanceToPlayer < 20) { moveSpeed = 130.0; // Fast when close } // Update monster position with smoother movement const targetX = monster.body.position.x + direction.x * moveSpeed * deltaTime; const targetZ = monster.body.position.z + direction.z * moveSpeed * deltaTime; // Smoothly interpolate to new position monster.body.position.x = THREE.MathUtils.lerp(monster.body.position.x, targetX, 0.1); monster.body.position.z = THREE.MathUtils.lerp(monster.body.position.z, targetZ, 0.1); // Update mesh position monster.mesh.position.copy(monster.body.position); } } world.step(deltaTime); updateCharacterMovement(deltaTime); // Update character movement updateCamera(); // Update camera to follow character // Animate floating keys and check for collection const playerPos = characterBody ? new THREE.Vector3( characterBody.position.x, characterBody.position.y, characterBody.position.z ) : null; const playerBox = playerPos ? new THREE.Box3().setFromCenterAndSize( playerPos, new THREE.Vector3(4, 8, 4) ) : null; const keysToRemove = []; keyObjects.forEach(keyObj => { if (!keyObj.collected) { // Update key animation keyObj.mesh.rotation.y += deltaTime * 0.5; const phase = keyObj.mesh.userData.phase || 0; keyObj.mesh.position.y = keyObj.baseY + Math.sin(performance.now() * 0.001 + phase) * 0.5; keyObj.collisionSphere.position.y = keyObj.mesh.position.y; // Check for collision with character using simple distance check if (playerBox && playerPos) { const distance = playerPos.distanceTo(keyObj.mesh.position); if (distance < 8) { // Mark key for collection keyObj.collected = true; keysToRemove.push(keyObj); // Update UI and game state immediately collectedKeys++; keyCounter.innerHTML = `Keys: ${collectedKeys}/${totalKeys}`; if (collectedKeys === totalKeys && !gateOpened) { gateOpened = true; } } } } }); // Remove collected keys after the loop keysToRemove.forEach(keyObj => { if (keyObj.mesh) { scene.remove(keyObj.mesh); if (keyObj.mesh.geometry) { keyObj.mesh.geometry.dispose(); } if (keyObj.mesh.material) { keyObj.mesh.material.dispose(); } } if (keyObj.spotlight) { scene.remove(keyObj.spotlight); } if (keyObj.collisionSphere) { scene.remove(keyObj.collisionSphere); } }); // Update keyObjects array after removing collected keys keyObjects = keyObjects.filter(keyObj => !keysToRemove.includes(keyObj)); // Animate gate opening when all keys are collected if (gateOpened && currentGateHeight < maxGateHeight) { // Find all gate meshes and move them up maze.traverse((child) => { if (child.isMesh && child.position.z === -150) { // Gate position check const heightDelta = gateSpeed * deltaTime; child.position.y += heightDelta; currentGateHeight += heightDelta; } }); } // Check if player has gone through the gate // Check win condition if (gateOpened && characterBody && characterBody.position.z < -145) { gameWon = true; document.exitPointerLock(); winScreen.style.display = 'flex'; // Reset game state resetToStartMenu(); // Show win screen for a few seconds before returning to start menu setTimeout(() => { winScreen.style.display = 'none'; startMenu.style.display = 'flex'; }, 3000); } // Check game over condition (monster catch) if (monster.body && characterBody && !jumpscareActive) { const distanceToMonster = new THREE.Vector3( monster.body.position.x - characterBody.position.x, monster.body.position.y - characterBody.position.y, monster.body.position.z - characterBody.position.z ).length(); if (distanceToMonster < 5) { document.exitPointerLock(); startJumpscare(); } } if (character && characterBody) { // Adjust the character model's position based on the physics body character.position.copy(characterBody.position); } } composer.render(); } // Function to reset the game and return to start menu function resetToStartMenu() { // Reset game state gameWon = false; gameStarted = false; gateOpened = false; collectedKeys = 0; targetRotationX = 0; targetRotationY = 0; keysPressed.w = false; keysPressed.a = false; keysPressed.s = false; keysPressed.d = false; keysPressed.space = false; keysPressed.shift = false; currentGateHeight = 0; keyCounter.innerHTML = `Keys: 0/${totalKeys}`; keyCounter.style.display = 'none'; // Reset gate position maze.traverse((child) => { if (child.isMesh && child.position.z === -150) { child.position.y = child.position.y - currentGateHeight; } }); // Remove old keys keyObjects.forEach(keyObj => { if (!keyObj.collected) { scene.remove(keyObj.mesh); scene.remove(keyObj.spotlight); scene.remove(keyObj.collisionSphere); } }); keyObjects = []; // Create new keys createKeys(totalKeys); // Reset character position to origin if (characterBody) { characterBody.position.set(0, characterConfig.startHeight, 30); characterBody.velocity.set(0, 0, 0); characterBody.angularVelocity.set(0, 0, 0); } // Reset camera rotation targetRotationX = 0; targetRotationY = 0; // Stop walking sound if playing if (walkingSound && !walkingSound.paused) { walkingSound.pause(); walkingSound.currentTime = 0; } // Show start menu startMenu.style.display = 'flex'; } // 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); } // Add event listeners window.addEventListener('resize', onWindowResize); const resizeObserver = new ResizeObserver(onWindowResize); resizeObserver.observe(parentDiv); // Start animation animate(); // Add play again button functionality playAgainButton.addEventListener('click', () => { winScreen.style.display = 'none'; resetToStartMenu(); });