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); // 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?HIGI'); 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, -30, 0); // Increased gravity for better control // Player movement state const moveState = { forward: false, backward: false, left: false, right: false }; 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 clock = new THREE.Clock(); // Initialize the camera const camera = new THREE.PerspectiveCamera( 75, canvas.offsetWidth / canvas.offsetHeight, 0.1, 1000 ); // Initial camera setup (will be updated to follow player) camera.position.set(0, 2, 0); camera.lookAt(0, 2, -1); // 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); // Remove OrbitControls as we'll use first-person controls // Create flat terrain function createTerrain() { const size = 200; // Create simple flat plane for visuals const geometry = new THREE.PlaneGeometry(size, size); const texture = textureLoader.load('https://play.rosebud.ai/assets/output.jpg?3Efd'); texture.wrapS = texture.wrapT = THREE.RepeatWrapping; texture.repeat.set(8, 8); texture.encoding = THREE.sRGBEncoding; const material = new THREE.MeshStandardMaterial({ map: texture, 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; } // Setup indoor lighting system const ambientLight = new THREE.AmbientLight(0x404040, 0.2); // Dim ambient light scene.add(ambientLight); // Create player flashlight const flashlight = new THREE.SpotLight(0xffffff, 1.5); flashlight.angle = Math.PI / 6; // 30 degrees flashlight.penumbra = 0.3; flashlight.decay = 2; flashlight.distance = 30; flashlight.castShadow = true; flashlight.shadow.mapSize.width = 1024; flashlight.shadow.mapSize.height = 1024; flashlight.shadow.camera.near = 0.5; flashlight.shadow.camera.far = 30; camera.add(flashlight); flashlight.position.set(0, 0, 1); scene.add(camera); // Create maze walls // Maze generation configuration const ROWS = 25; const COLS = 35; const CELL_SIZE = 4; // Size in Three.js units const WALL_HEIGHT = 8; const WALL_THICKNESS = 1; const ROOM_ATTEMPTS = 8; // how many rooms to try placing const MIN_ROOM_SIZE = 4; const MAX_ROOM_SIZE = 10; function createMazeWalls() { const texture = textureLoader.load('https://play.rosebud.ai/assets/output.jpg?3Efd'); texture.encoding = THREE.sRGBEncoding; const wallMaterial = new THREE.MeshStandardMaterial({ map: texture, roughness: 0.8, metalness: 0.2 }); // Utility function for random integers function randInt(min, max) { return Math.floor(Math.random() * (max - min + 1)) + min; } // Generate maze layout using the provided algorithm function makeGrid(r, c) { const grid = []; for (let y = 0; y < r; y++) { const row = []; for (let x = 0; x < c; x++) { row.push({ walls: { N: true, S: true, W: true, E: true }, visited: false }); } grid.push(row); } return grid; } // Place random rectangular rooms function generateRooms(grid) { const rooms = []; for (let i = 0; i < ROOM_ATTEMPTS; i++) { const w = randInt(MIN_ROOM_SIZE, MAX_ROOM_SIZE); const h = randInt(MIN_ROOM_SIZE, MAX_ROOM_SIZE); const x = randInt(1, COLS - w - 2); const y = randInt(1, ROWS - h - 2); const newRoom = { x, y, w, h }; // Check for room overlap let ok = true; for (const r of rooms) { if (x < r.x + r.w + 1 && x + w + 1 > r.x && y < r.y + r.h + 1 && y + h + 1 > r.y) { ok = false; break; } } if (!ok) continue; rooms.push(newRoom); // Carve out room interior for (let ry = y; ry < y + h; ry++) { for (let rx = x; rx < x + w; rx++) { grid[ry][rx].walls = { N: false, S: false, W: false, E: false }; } } } return rooms; } function carveMaze(grid, r = 0, c = 0) { grid[r][c].visited = true; const dirs = Object.keys(DIRS).sort(() => Math.random() - 0.5); for (const d of dirs) { const nx = c + DIRS[d].dx; const ny = r + DIRS[d].dy; if (ny >= 0 && ny < ROWS && nx >= 0 && nx < COLS && !grid[ny][nx].visited) { grid[r][c].walls[d] = false; grid[ny][nx].walls[DIRS[d].opposite] = false; carveMaze(grid, ny, nx); } } } const DIRS = { N: { dx: 0, dy: -1, opposite: 'S' }, S: { dx: 0, dy: 1, opposite: 'N' }, W: { dx: -1, dy: 0, opposite: 'E' }, E: { dx: 1, dy: 0, opposite: 'W' }, }; const grid = makeGrid(ROWS, COLS); const rooms = generateRooms(grid); carveMaze(grid); const wallBodies = []; const wallPhysMaterial = new CANNON.Material('wall'); // Create walls based on the generated maze for (let y = 0; y < ROWS; y++) { for (let x = 0; x < COLS; x++) { const cell = grid[y][x]; const x1 = (x - COLS / 2) * CELL_SIZE; const y1 = (y - ROWS / 2) * CELL_SIZE; // Create walls for each direction if present if (cell.walls.N) { const wallGeometry = new THREE.BoxGeometry(CELL_SIZE + WALL_THICKNESS, WALL_HEIGHT, WALL_THICKNESS); const wall = new THREE.Mesh(wallGeometry, wallMaterial); wall.position.set(x1 + CELL_SIZE / 2, WALL_HEIGHT / 2, y1); wall.castShadow = true; wall.receiveShadow = true; scene.add(wall); const wallShape = new CANNON.Box(new CANNON.Vec3((CELL_SIZE + WALL_THICKNESS) / 2, WALL_HEIGHT / 2, WALL_THICKNESS / 2)); const wallBody = new CANNON.Body({ mass: 0, material: wallPhysMaterial }); wallBody.addShape(wallShape); wallBody.position.copy(wall.position); world.addBody(wallBody); wallBodies.push(wallBody); } if (cell.walls.W) { const wallGeometry = new THREE.BoxGeometry(WALL_THICKNESS, WALL_HEIGHT, CELL_SIZE + WALL_THICKNESS); const wall = new THREE.Mesh(wallGeometry, wallMaterial); wall.position.set(x1, WALL_HEIGHT / 2, y1 + CELL_SIZE / 2); wall.castShadow = true; wall.receiveShadow = true; scene.add(wall); const wallShape = new CANNON.Box(new CANNON.Vec3(WALL_THICKNESS / 2, WALL_HEIGHT / 2, (CELL_SIZE + WALL_THICKNESS) / 2)); const wallBody = new CANNON.Body({ mass: 0, material: wallPhysMaterial }); wallBody.addShape(wallShape); wallBody.position.copy(wall.position); world.addBody(wallBody); wallBodies.push(wallBody); } // Add East and South walls only for the last row/column if (x === COLS - 1 && cell.walls.E) { const wallGeometry = new THREE.BoxGeometry(WALL_THICKNESS, WALL_HEIGHT, CELL_SIZE + WALL_THICKNESS); const wall = new THREE.Mesh(wallGeometry, wallMaterial); wall.position.set(x1 + CELL_SIZE, WALL_HEIGHT / 2, y1 + CELL_SIZE / 2); wall.castShadow = true; wall.receiveShadow = true; scene.add(wall); const wallShape = new CANNON.Box(new CANNON.Vec3(WALL_THICKNESS / 2, WALL_HEIGHT / 2, (CELL_SIZE + WALL_THICKNESS) / 2)); const wallBody = new CANNON.Body({ mass: 0, material: wallPhysMaterial }); wallBody.addShape(wallShape); wallBody.position.copy(wall.position); world.addBody(wallBody); wallBodies.push(wallBody); } if (y === ROWS - 1 && cell.walls.S) { const wallGeometry = new THREE.BoxGeometry(CELL_SIZE + WALL_THICKNESS, WALL_HEIGHT, WALL_THICKNESS); const wall = new THREE.Mesh(wallGeometry, wallMaterial); wall.position.set(x1 + CELL_SIZE / 2, WALL_HEIGHT / 2, y1 + CELL_SIZE); wall.castShadow = true; wall.receiveShadow = true; scene.add(wall); const wallShape = new CANNON.Box(new CANNON.Vec3((CELL_SIZE + WALL_THICKNESS) / 2, WALL_HEIGHT / 2, WALL_THICKNESS / 2)); const wallBody = new CANNON.Body({ mass: 0, material: wallPhysMaterial }); wallBody.addShape(wallShape); wallBody.position.copy(wall.position); world.addBody(wallBody); wallBodies.push(wallBody); } } } // Add roof const roofGeometry = new THREE.PlaneGeometry(COLS * CELL_SIZE, ROWS * CELL_SIZE); const roofMaterial = new THREE.MeshStandardMaterial({ map: texture, side: THREE.DoubleSide, roughness: 0.8, metalness: 0.2 }); const roof = new THREE.Mesh(roofGeometry, roofMaterial); roof.rotation.x = Math.PI / 2; roof.position.y = WALL_HEIGHT; scene.add(roof); // Add light fixtures in rooms rooms.forEach(room => { const centerX = (room.x - COLS / 2 + room.w / 2) * CELL_SIZE; const centerZ = (room.y - ROWS / 2 + room.h / 2) * CELL_SIZE; // Create light bulb geometry const bulbGeometry = new THREE.SphereGeometry(0.2, 8, 8); const bulbMaterial = new THREE.MeshStandardMaterial({ emissive: 0xffffee, emissiveIntensity: 1, color: 0x000000 }); const bulb = new THREE.Mesh(bulbGeometry, bulbMaterial); bulb.position.set(centerX, WALL_HEIGHT - 0.5, centerZ); scene.add(bulb); // Add point light const light = new THREE.PointLight(0xffffee, 1, CELL_SIZE * 8); light.position.copy(bulb.position); light.castShadow = true; light.shadow.mapSize.width = 512; light.shadow.mapSize.height = 512; light.shadow.camera.near = 0.1; light.shadow.camera.far = CELL_SIZE * 8; scene.add(light); }); return wallBodies; } // Create player function createPlayer() { // Player physical properties const playerRadius = 0.5; const playerHeight = 2; const playerShape = new CANNON.Cylinder(playerRadius, playerRadius, playerHeight, 8); const playerBody = new CANNON.Body({ mass: 5, material: new CANNON.Material('player') }); playerBody.addShape(playerShape); playerBody.position.set(0, playerHeight / 2 + 0.5, 0); playerBody.linearDamping = 0.9; // Add damping to prevent sliding world.addBody(playerBody); // Optional: Create a visual representation of the player (if needed) const playerGeometry = new THREE.CylinderGeometry(playerRadius, playerRadius, playerHeight, 8); const playerMaterial = new THREE.MeshPhongMaterial({ color: 0x00ff00, opacity: 0.5, transparent: true }); const playerMesh = new THREE.Mesh(playerGeometry, playerMaterial); playerMesh.visible = false; // Hide the player mesh since we're in first person scene.add(playerMesh); return { body: playerBody, mesh: playerMesh }; } // Create initial scene const terrain = createTerrain(); const mazeWalls = createMazeWalls(); const player = createPlayer(); // Movement speed configuration const MOVE_SPEED = 15; const mouseSensitivity = 0.002; let mouseEnabled = false; // Lock and hide mouse pointer canvas.addEventListener('click', () => { canvas.requestPointerLock(); }); document.addEventListener('pointerlockchange', () => { mouseEnabled = document.pointerLockElement === canvas; }); // Mouse movement handler document.addEventListener('mousemove', (event) => { if (mouseEnabled) { camera.rotation.y -= event.movementX * mouseSensitivity; } }); // Handle keyboard controls document.addEventListener('keydown', (event) => { switch (event.code) { case 'KeyW': moveState.forward = true; break; case 'KeyS': moveState.backward = true; break; case 'KeyA': moveState.right = true; break; case 'KeyD': moveState.left = true; break; } }); document.addEventListener('keyup', (event) => { switch (event.code) { case 'KeyW': moveState.forward = false; break; case 'KeyS': moveState.backward = false; break; case 'KeyA': moveState.right = false; break; case 'KeyD': moveState.left = false; break; } }); function animate() { requestAnimationFrame(animate); const deltaTime = Math.min(clock.getDelta(), 0.1); if (assetsLoaded) { // Handle player movement const playerBody = player.body; const playerMesh = player.mesh; // Calculate movement direction // Get the camera's forward direction const forward = new THREE.Vector3(0, 0, -1); forward.applyQuaternion(camera.quaternion); forward.y = 0; // Keep movement horizontal forward.normalize(); // Calculate right direction from forward const right = new THREE.Vector3(); right.crossVectors(new THREE.Vector3(0, 1, 0), forward).normalize(); // Reset velocity let moveX = 0; let moveZ = 0; // Apply movement based on key states relative to camera direction if (moveState.forward) { moveX += forward.x * MOVE_SPEED; moveZ += forward.z * MOVE_SPEED; } if (moveState.backward) { moveX -= forward.x * MOVE_SPEED; moveZ -= forward.z * MOVE_SPEED; } if (moveState.right) { moveX += right.x * MOVE_SPEED; moveZ += right.z * MOVE_SPEED; } if (moveState.left) { moveX -= right.x * MOVE_SPEED; moveZ -= right.z * MOVE_SPEED; } // Update player velocity playerBody.velocity.x = moveX; playerBody.velocity.z = moveZ; // Update physics world.step(deltaTime); // Update player mesh position playerMesh.position.copy(playerBody.position); playerMesh.quaternion.copy(playerBody.quaternion); // Update camera position and rotation // Update camera position to follow player camera.position.set( playerBody.position.x, playerBody.position.y + 1.7, // Eye level playerBody.position.z ); // Update flashlight target based on camera direction const target = new THREE.Vector3(); target.copy(forward).multiplyScalar(10).add(camera.position); flashlight.target.position.copy(target); flashlight.target.updateMatrixWorld(); } composer.render(); } // 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();