// Import necessary modules import * as THREE from 'three'; import { FontLoader } from 'three/addons/loaders/FontLoader.js'; import { TextGeometry } from 'three/addons/geometries/TextGeometry.js'; import { ShaderPass } from 'three/addons/postprocessing/ShaderPass.js'; import { PointerLockControls } from 'three/addons/controls/PointerLockControls.js'; import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js'; import { OBJLoader } from 'three/addons/loaders/OBJLoader.js'; import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js'; import { RenderPass } from 'three/addons/postprocessing/RenderPass.js'; // Shader definitions // Vignette shader for helmet effect const VignetteShader = { uniforms: { 'tDiffuse': { value: null }, 'offset': { value: 0.95 }, 'darkness': { value: 0.95 } }, vertexShader: ` varying vec2 vUv; void main() { vUv = uv; gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); } `, fragmentShader: ` uniform sampler2D tDiffuse; uniform float offset; uniform float darkness; varying vec2 vUv; void main() { vec4 texel = texture2D(tDiffuse, vUv); vec2 uv = (vUv - 0.5) * 2.0; float vignet = smoothstep(0.0, offset, sqrt(dot(uv, uv))); texel.rgb = mix(texel.rgb, texel.rgb * (1.0 - darkness), vignet); gl_FragColor = texel; } ` }; class VignettePass extends ShaderPass { constructor() { super(VignetteShader); this.uniforms.offset.value = 0.95; this.uniforms.darkness.value = 0.95; } } // Dithering shader const DitheringShader = { uniforms: { 'tDiffuse': { value: null }, 'resolution': { value: new THREE.Vector2() }, 'ditherScale': { value: 0.5 }, 'threshold': { value: 0.5 } }, vertexShader: ` varying vec2 vUv; void main() { vUv = uv; gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); } `, fragmentShader: ` uniform sampler2D tDiffuse; uniform vec2 resolution; uniform float ditherScale; varying vec2 vUv; float indexMatrix4x4(float x, float y) { const float matrix[16] = float[16]( 0.0, 8.0, 2.0, 10.0, 12.0, 4.0, 14.0, 6.0, 3.0, 11.0, 1.0, 9.0, 15.0, 7.0, 13.0, 5.0 ); float index = mod(x, 4.0) * 4.0 + mod(y, 4.0); return matrix[int(index)] / 16.0; } void main() { vec4 color = texture2D(tDiffuse, vUv); float luminance = dot(color.rgb, vec3(0.299, 0.587, 0.114)); vec2 pixelPos = vUv * resolution; float dither = indexMatrix4x4(pixelPos.x / ditherScale, pixelPos.y / ditherScale); float threshold = (luminance * 4.0) < dither ? 0.0 : 1.0; gl_FragColor = vec4(vec3(threshold), 1.0); } ` }; class DitheringPass extends ShaderPass { constructor(resolution) { super(DitheringShader); this.uniforms.resolution.value.copy(resolution); this.uniforms.ditherScale.value = 1.0; } setSize(width, height) { this.uniforms.resolution.value.set(width, height); } } // Initialize loading manager const loadingManager = new THREE.LoadingManager(); const textureLoader = new THREE.TextureLoader(loadingManager); const gltfLoader = new GLTFLoader(loadingManager); const objLoader = new OBJLoader(loadingManager); const fontLoader = new FontLoader(loadingManager); // Initialize audio const listener = new THREE.AudioListener(); const walkSound = new THREE.Audio(listener); const breathSound = new THREE.Audio(listener); const ambientSound = new THREE.Audio(listener); const radioNoiseSound = new THREE.Audio(listener); const apollo1LogSound = new THREE.Audio(listener); const radioDistortionSound = new THREE.Audio(listener); const radioTransmissionSound = new THREE.Audio(listener); const objectiveSound = new THREE.Audio(listener); const audioLoader = new THREE.AudioLoader(loadingManager); // Preload all audio assets audioLoader.load('https://play.rosebud.ai/assets/objective.wav?NdcO', function(buffer) { objectiveSound.setBuffer(buffer); objectiveSound.setVolume(0.1104); objectiveSound.getOutput().connect(analyser); }); // Create audio analyzer const audioContext = listener.context; const analyser = audioContext.createAnalyser(); analyser.fftSize = 256; const dataArray = new Uint8Array(analyser.frequencyBinCount); // Create audio clipper/limiter const clipper = audioContext.createDynamicsCompressor(); clipper.threshold.value = -24; // dB threshold for compression clipper.knee.value = 0; // Sharp knee for hard limiting clipper.ratio.value = 20; // High ratio for limiting clipper.attack.value = 0.003; // Fast attack clipper.release.value = 0.25; // Moderate release // Connect analyzer to clipper and then to destination analyser.connect(clipper); clipper.connect(audioContext.destination); // Load breathing sound audioLoader.load('https://play.rosebud.ai/assets/gasmaskbreath.wav?DbPk', function(buffer) { breathSound.setBuffer(buffer); breathSound.setLoop(true); breathSound.setVolume(0.5); // Set fixed volume at 50% breathSound.playbackRate = 1.0; // Set initial playback rate breathSound.play(); // Start playing immediately // Connect breath sound through clipper const source = breathSound.getOutput(); source.connect(clipper); }); // Load walking sound audioLoader.load('https://play.rosebud.ai/assets/walk.wav?bUOC', function(buffer) { walkSound.setBuffer(buffer); walkSound.setLoop(true); walkSound.setVolume(0.5); // Connect walk sound to analyzer walkSound.getOutput().connect(analyser); }); // Load radio noise sound audioLoader.load('https://play.rosebud.ai/assets/radionoise.wav?Qq5D', function(buffer) { radioNoiseSound.setBuffer(buffer); radioNoiseSound.setLoop(true); radioNoiseSound.setVolume(0.0); // Start with volume 0 radioNoiseSound.play(); // Start playing immediately but at 0 volume }); // Load Apollo 1 log sound audioLoader.load('https://play.rosebud.ai/assets/apollo1log.wav?01PC', function(buffer) { apollo1LogSound.setBuffer(buffer); apollo1LogSound.setLoop(false); apollo1LogSound.setVolume(0.092); // Reduced by 50% from 0.184 // Connect apollo1LogSound to analyzer apollo1LogSound.getOutput().connect(analyser); }); // Load Radio Distortion sound audioLoader.load('https://play.rosebud.ai/assets/radiodist.wav?DW5Q', function(buffer) { radioDistortionSound.setBuffer(buffer); radioDistortionSound.setLoop(false); radioDistortionSound.setVolume(0.1315); // Reduced by 50% from 0.263 radioDistortionSound.getOutput().connect(analyser); }); // Load Radio Transmission sound audioLoader.load('https://play.rosebud.ai/assets/radiotrasmiss.wav?fTIE', function(buffer) { radioTransmissionSound.setBuffer(buffer); radioTransmissionSound.setLoop(false); radioTransmissionSound.setVolume(0.0985); // Reduced by 50% from 0.197 radioTransmissionSound.getOutput().connect(analyser); }); let defaultFont = null; let assetsLoaded = false; let sanityLevel = 100; // Maximum sanity level let compromisedSoundPlayed = false; // Flag to track if compromised sound has been played let isNearApollo = false; let apollo = null; // Reference to Apollo 1 model let logWindowVisible = false; const INTERACTION_DISTANCE = 15; // Reduced interaction distance for closer prompts const CRATER_CENTER = new THREE.Vector3(261, 0, 276); // Match crater position const CRATER_EFFECT_RADIUS = 70; // Radius within which anomaly sound and sanity are affected const CRATER_SANITY_DECREASE = 0.2; // How much sanity decreases near crater const minSanity = 0; // Minimum sanity level const sanityDecreaseRate = 0.2; // Doubled rate at which sanity decreases const maxDistortion = 0.5; // Maximum distortion amount // Add VT323 font to document const fontFace = document.createElement('style'); fontFace.textContent = ` @font-face { font-family: 'VT323'; src: url('https://play.rosebud.ai/assets/VT323-Regular.ttf?gudH') format('truetype'); font-weight: normal; font-style: normal; } `; document.head.appendChild(fontFace); // 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?93vn'; } return url; }); // Create log window const logWindow = document.createElement('div'); logWindow.style.position = 'absolute'; logWindow.style.top = '50%'; logWindow.style.left = '50%'; logWindow.style.transform = 'translate(-50%, -50%)'; logWindow.style.width = '400px'; logWindow.style.backgroundColor = 'rgba(0, 0, 0, 0.8)'; logWindow.style.border = '2px solid #ffffff'; logWindow.style.color = '#ffffff'; logWindow.style.padding = '20px'; logWindow.style.fontFamily = "'VT323', monospace"; logWindow.style.fontSize = '18px'; logWindow.style.lineHeight = '1.5'; logWindow.style.display = 'none'; logWindow.style.zIndex = '1000'; logWindow.innerHTML = `The lander is old. Too old. The flag is gone, the metal is pitted, but you just got here. Right?`; const parentDiv = document.getElementById('renderDiv'); parentDiv.appendChild(logWindow); // Create position display const positionDisplay = document.createElement('div'); positionDisplay.style.position = 'absolute'; positionDisplay.style.bottom = '5px'; positionDisplay.style.left = '50%'; positionDisplay.style.transform = 'translateX(-50%)'; positionDisplay.style.color = '#ffffff'; positionDisplay.style.backgroundColor = 'transparent'; positionDisplay.style.padding = '0'; positionDisplay.style.fontFamily = "'VT323', monospace"; positionDisplay.style.fontSize = '16px'; positionDisplay.style.zIndex = '1000'; parentDiv.appendChild(positionDisplay); // Create HUD canvas const hudCanvas = document.createElement('canvas'); hudCanvas.style.position = 'absolute'; hudCanvas.style.top = '0'; hudCanvas.style.left = '0'; hudCanvas.style.width = '100%'; hudCanvas.style.height = '100%'; hudCanvas.style.opacity = '0.7'; hudCanvas.width = parentDiv.clientWidth; hudCanvas.height = parentDiv.clientHeight; hudCanvas.style.pointerEvents = 'none'; parentDiv.appendChild(hudCanvas); const hudCtx = hudCanvas.getContext('2d'); // Variables for text glitch effect let lastGlitchUpdate = 0; let currentYear = 1969; let currentDay = 20; let lastUpdate = Date.now(); const letters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'; const months = ['JAN', 'FEB', 'MAR', 'APR', 'MAY', 'JUN', 'JUL', 'AUG', 'SEP', 'OCT', 'NOV', 'DEC']; // Variables for random HUD numbers let randomNumbers = ['000000', '000000', '000000']; let lastNumberUpdate = Date.now(); // Function to generate rapidly changing date text with letters function getGlitchedText() { const now = Date.now(); if (now - lastUpdate > 300) { // Update every 300ms for slower changes lastUpdate = now; // Randomly decide what to change const changeType = Math.random(); if (changeType < 0.05) { // Significantly reduced probability of day changes // Change day to number or letter if (Math.random() < 0.9) { // Increased probability of keeping numbers currentDay = Math.floor(Math.random() * 31) + 1; } else { currentDay = letters[Math.floor(Math.random() * letters.length)]; } } else if (changeType < 0.1) { // Significantly reduced probability of year changes // Change year if (Math.random() < 0.8) { currentYear = Math.floor(Math.random() * (1999 - 1969 + 1)) + 1969; } else { // Sometimes replace last two digits with letters currentYear = '19' + letters[Math.floor(Math.random() * letters.length)] + letters[Math.floor(Math.random() * letters.length)]; } } } // Format day with leading zero if it's a number const formattedDay = typeof currentDay === 'number' ? currentDay.toString().padStart(2, '0') : currentDay; // Randomly select month format with higher stability const monthDisplay = Math.random() < 0.95 ? '07' : // Increased probability of showing '07' '07'; // Always show '07' now to reduce glitching return `${currentYear}.${monthDisplay}.${formattedDay}`; } // Function to draw torch text function drawTorchText(ctx, width, height) { // Set up the torch text style ctx.fillStyle = '#ffffff'; ctx.font = '24px VT323'; ctx.textBaseline = 'bottom'; ctx.textAlign = 'right'; // Position text in bottom right with padding const padding = 20; ctx.fillText('[T]orch', width - padding, height - padding); } // Function to draw HUD function drawHUD() { const width = hudCanvas.width; const height = hudCanvas.height; const centerX = width / 2; const centerY = height / 2; // Clear the entire canvas first hudCtx.clearRect(0, 0, width, height); // Set up the retro date text style hudCtx.fillStyle = '#ffffff'; hudCtx.font = '24px VT323'; hudCtx.textBaseline = 'bottom'; hudCtx.textAlign = 'left'; // Position text in bottom left with some padding const textPadding = 20; const dateText = getGlitchedText(); hudCtx.fillText(dateText, textPadding, height - textPadding); // Draw random changing numbers in top right if (Date.now() - lastNumberUpdate > 100) { // Update every 100ms lastNumberUpdate = Date.now(); for (let i = 0; i < randomNumbers.length; i++) { // 20% chance to update each number if (Math.random() < 0.2) { let newNumber = ''; for (let j = 0; j < 6; j++) { if (Math.random() < 0.9) { // 90% chance for number newNumber += Math.floor(Math.random() * 10); } else { // 10% chance for letter newNumber += letters[Math.floor(Math.random() * letters.length)]; } } randomNumbers[i] = newNumber; } } } // Draw the numbers with reduced size and lower position hudCtx.textAlign = 'right'; hudCtx.font = '16px VT323'; // Reduced from default 24px (35% reduction) const numberPadding = 20; const lineHeight = 20; // Reduced from 30 to match new font size for (let i = 0; i < randomNumbers.length; i++) { hudCtx.fillText(randomNumbers[i], width - numberPadding, numberPadding + 5 + (i * lineHeight)); // Added 5px to Y position } hudCtx.font = '24px VT323'; // Reset font size for other HUD elements hudCtx.textAlign = 'left'; // Reset text align for other HUD elements const radius = Math.min(width, height) * 0.45; // Helmet size relative to screen // Continue with existing HUD elements hudCtx.strokeStyle = 'rgba(255, 255, 255, 0.7)'; hudCtx.lineWidth = 2; // Draw signal wave in top left corner const waveWidth = 100; const waveHeight = 30; const waveY = 20; const waveX = 20; // Draw outer border with double line effect hudCtx.strokeStyle = '#ffffff'; hudCtx.lineWidth = 2; hudCtx.strokeRect(waveX - 8, waveY - 8, waveWidth + 16, waveHeight + 16); hudCtx.lineWidth = 1; hudCtx.strokeRect(waveX - 6, waveY - 6, waveWidth + 12, waveHeight + 12); // Draw wave background with pixel-perfect border hudCtx.fillStyle = 'rgba(0, 0, 0, 0.8)'; hudCtx.fillRect(waveX - 5, waveY - 5, waveWidth + 10, waveHeight + 10); hudCtx.strokeRect(waveX - 5, waveY - 5, waveWidth + 10, waveHeight + 10); // Draw decorative corner markers const cornerSize = 4; const corners = [ [waveX - 5, waveY - 5], // Top-left [waveX + waveWidth + 5, waveY - 5], // Top-right [waveX - 5, waveY + waveHeight + 5], // Bottom-left [waveX + waveWidth + 5, waveY + waveHeight + 5] // Bottom-right ]; corners.forEach(([x, y]) => { hudCtx.fillStyle = '#ffffff'; hudCtx.fillRect(x - cornerSize, y - 1, cornerSize * 2, 2); hudCtx.fillRect(x - 1, y - cornerSize, 2, cornerSize * 2); }); // Draw the wave with enhanced style hudCtx.beginPath(); analyser.getByteTimeDomainData(dataArray); // Calculate overall audio intensity with priority to apollo1LogSound let totalIntensity = 0; let intensityMultiplier = 1.0; // Increase intensity when apollo1LogSound is playing if (apollo1LogSound.isPlaying) { intensityMultiplier = 1.5; // Reduced effect for apollo1LogSound } for (let i = 0; i < dataArray.length; i++) { totalIntensity += Math.abs((dataArray[i] - 128) / 128) * intensityMultiplier; } const averageIntensity = totalIntensity / dataArray.length; // Set wave style hudCtx.strokeStyle = '#ffffff'; hudCtx.lineWidth = 2; for (let x = 0; x < waveWidth; x++) { const time = Date.now() * 0.005; const dataIndex = Math.floor((x / waveWidth) * dataArray.length); const audioValue = (dataArray[dataIndex] - 128) / 128; const baseAmplitude = waveHeight / 3; // Slightly reduced for cleaner look const intensityMultiplier = apollo1LogSound.isPlaying ? 1.5 : 1.0; const audioAmplitude = baseAmplitude * (Math.abs(audioValue) * 2.5 + averageIntensity * 3.0) * intensityMultiplier; const frequencyOffset = Math.sin(time * 2) * averageIntensity * 5 * intensityMultiplier; const y = Math.sin(x * 0.1 + time + frequencyOffset) * audioAmplitude + (waveHeight / 2); if (x === 0) { hudCtx.moveTo(x + waveX, y + waveY); } else { hudCtx.lineTo(x + waveX, y + waveY); } } // Draw the wave with a crisp white line hudCtx.stroke(); // Add scanline effect hudCtx.fillStyle = 'rgba(255, 255, 255, 0.1)'; for (let y = waveY - 5; y < waveY + waveHeight + 5; y += 2) { hudCtx.fillRect(waveX - 5, y, waveWidth + 10, 1); } // Draw helmet frame hudCtx.beginPath(); hudCtx.arc(centerX, centerY, radius, 0, Math.PI * 2); hudCtx.stroke(); // Draw corner details const helmetCornerSize = radius * 0.25; // Size of corner details relative to helmet hudCtx.beginPath(); // Top left hudCtx.moveTo(0, helmetCornerSize); hudCtx.lineTo(0, 0); hudCtx.lineTo(helmetCornerSize, 0); // Top right hudCtx.moveTo(width - helmetCornerSize, 0); hudCtx.lineTo(width, 0); hudCtx.lineTo(width, helmetCornerSize); // Bottom left hudCtx.moveTo(0, height - helmetCornerSize); hudCtx.lineTo(0, height); hudCtx.lineTo(helmetCornerSize, height); // Bottom right hudCtx.moveTo(width - helmetCornerSize, height); hudCtx.lineTo(width, height); hudCtx.lineTo(width, height - helmetCornerSize); hudCtx.stroke(); // Draw torch text drawTorchText(hudCtx, width, height); } 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 = '#000000'; loadingScreen.style.color = 'white'; loadingScreen.style.display = 'flex'; loadingScreen.style.opacity = '1'; loadingScreen.style.zIndex = '10000'; loadingScreen.style.flexDirection = 'column'; loadingScreen.style.justifyContent = 'center'; loadingScreen.style.alignItems = 'center'; loadingScreen.style.fontFamily = "'VT323', monospace"; loadingScreen.style.fontSize = '32px'; // Create loading text const loadingText = document.createElement('div'); loadingText.innerHTML = 'Loading... 0%'; loadingText.style.marginBottom = '20px'; // Create loading bar container const loadingBarContainer = document.createElement('div'); loadingBarContainer.style.width = '300px'; loadingBarContainer.style.height = '30px'; loadingBarContainer.style.border = '2px solid #ffffff'; loadingBarContainer.style.padding = '2px'; loadingBarContainer.style.position = 'relative'; loadingBarContainer.style.overflow = 'hidden'; // Create loading bar const loadingBar = document.createElement('div'); loadingBar.style.width = '0%'; loadingBar.style.height = '100%'; loadingBar.style.backgroundColor = '#ffffff'; loadingBar.style.transition = 'width 0.1s'; // Assemble loading screen loadingBarContainer.appendChild(loadingBar); loadingScreen.appendChild(loadingText); loadingScreen.appendChild(loadingBarContainer); parentDiv.appendChild(loadingScreen); // Create black overlay const blackOverlay = document.createElement('div'); blackOverlay.style.position = 'absolute'; blackOverlay.style.top = '0'; blackOverlay.style.left = '0'; blackOverlay.style.width = '100%'; blackOverlay.style.height = '100%'; blackOverlay.style.backgroundColor = '#000000'; blackOverlay.style.opacity = '1'; blackOverlay.style.transition = 'opacity 10s'; blackOverlay.style.pointerEvents = 'none'; blackOverlay.style.zIndex = '999'; parentDiv.appendChild(blackOverlay); // Create main menu const mainMenu = document.createElement('div'); mainMenu.style.position = 'absolute'; mainMenu.style.top = '0'; mainMenu.style.left = '0'; mainMenu.style.width = '100%'; mainMenu.style.height = '100%'; mainMenu.style.backgroundColor = '#000000'; mainMenu.style.display = 'none'; mainMenu.style.flexDirection = 'column'; mainMenu.style.justifyContent = 'center'; mainMenu.style.alignItems = 'center'; mainMenu.style.zIndex = '1000'; // Create title const title = document.createElement('div'); title.innerHTML = 'APOLLO 19XX'; // Start title animation function updateTitleGlitch() { const getRandomChar = () => { if (Math.random() < 0.7) { // 70% chance for numbers return Math.floor(Math.random() * 10).toString(); } else { return letters[Math.floor(Math.random() * letters.length)]; } }; setInterval(() => { const xx = getRandomChar() + getRandomChar(); title.innerHTML = `APOLLO 19${xx}`; }, 100); // Update every 100ms }; updateTitleGlitch(); title.style.color = '#ffffff'; title.style.fontFamily = "'VT323', monospace"; title.style.fontSize = '64px'; title.style.marginBottom = '40px'; title.style.textAlign = 'center'; // Create menu container // Create controls info container const controlsInfo = document.createElement('div'); controlsInfo.style.backgroundColor = 'rgba(0, 0, 0, 0.8)'; controlsInfo.style.border = '2px solid #ffffff'; controlsInfo.style.padding = '20px'; controlsInfo.style.marginBottom = '20px'; controlsInfo.style.fontFamily = "'VT323', monospace"; controlsInfo.style.fontSize = '24px'; controlsInfo.style.color = '#ffffff'; controlsInfo.style.display = 'none'; controlsInfo.innerHTML = ` CONTROLS:

[W] Forward
[S] Backward
[A] Left
[D] Right
[SPACE] Jump
[T] Toggle Flashlight
[U] Toggle Visual Effects
[F] Interact
[MOUSE] Look Around `; // Create toggle for soundtrack const soundtrackToggle = document.createElement('button'); soundtrackToggle.innerHTML = '[ Disable Soundtrack ]'; soundtrackToggle.style.backgroundColor = 'transparent'; soundtrackToggle.style.border = '2px solid #ffffff'; soundtrackToggle.style.color = '#ffffff'; soundtrackToggle.style.fontFamily = "'VT323', monospace"; soundtrackToggle.style.fontSize = '32px'; soundtrackToggle.style.padding = '10px 20px'; soundtrackToggle.style.cursor = 'pointer'; soundtrackToggle.style.transition = 'all 0.2s'; // Add hover effects to soundtrack toggle soundtrackToggle.onmouseover = () => { soundtrackToggle.style.backgroundColor = '#ffffff'; soundtrackToggle.style.color = '#000000'; }; soundtrackToggle.onmouseout = () => { soundtrackToggle.style.backgroundColor = 'transparent'; soundtrackToggle.style.color = '#ffffff'; }; const menuContainer = document.createElement('div'); menuContainer.style.display = 'flex'; menuContainer.style.flexDirection = 'column'; menuContainer.style.gap = '20px'; // Create controls button const controlsButton = document.createElement('button'); controlsButton.innerHTML = '[ CONTROLS ]'; controlsButton.style.backgroundColor = 'transparent'; controlsButton.style.border = '2px solid #ffffff'; controlsButton.style.color = '#ffffff'; controlsButton.style.fontFamily = "'VT323', monospace"; controlsButton.style.fontSize = '32px'; controlsButton.style.padding = '10px 20px'; controlsButton.style.cursor = 'pointer'; controlsButton.style.transition = 'all 0.2s'; // Add hover effect to controls button controlsButton.onmouseover = () => { controlsButton.style.backgroundColor = '#ffffff'; controlsButton.style.color = '#000000'; }; controlsButton.onmouseout = () => { controlsButton.style.backgroundColor = 'transparent'; controlsButton.style.color = '#ffffff'; }; // Add click handler for controls button controlsButton.addEventListener('click', (event) => { // Prevent event from propagating to document click handler event.stopPropagation(); controlsInfo.style.display = controlsInfo.style.display === 'none' ? 'block' : 'none'; }); // Create start button const startButton = document.createElement('button'); startButton.innerHTML = '[ START GAME ]'; startButton.style.backgroundColor = 'transparent'; startButton.style.border = '2px solid #ffffff'; startButton.style.color = '#ffffff'; startButton.style.fontFamily = "'VT323', monospace"; startButton.style.fontSize = '32px'; startButton.style.padding = '10px 20px'; startButton.style.cursor = 'pointer'; startButton.style.transition = 'all 0.2s'; // Add hover effect startButton.onmouseover = () => { startButton.style.backgroundColor = '#ffffff'; startButton.style.color = '#000000'; }; startButton.onmouseout = () => { startButton.style.backgroundColor = 'transparent'; startButton.style.color = '#ffffff'; }; // Create exit button const exitButton = document.createElement('button'); exitButton.innerHTML = '[ EXIT ]'; exitButton.style.backgroundColor = 'transparent'; exitButton.style.border = '2px solid #ffffff'; exitButton.style.color = '#ffffff'; exitButton.style.fontFamily = "'VT323', monospace"; exitButton.style.fontSize = '32px'; exitButton.style.padding = '10px 20px'; exitButton.style.cursor = 'pointer'; exitButton.style.transition = 'all 0.2s'; // Add hover effect exitButton.onmouseover = () => { exitButton.style.backgroundColor = '#ffffff'; exitButton.style.color = '#000000'; }; exitButton.onmouseout = () => { exitButton.style.backgroundColor = 'transparent'; exitButton.style.color = '#ffffff'; }; // Assemble menu mainMenu.appendChild(title); mainMenu.appendChild(controlsInfo); menuContainer.appendChild(startButton); menuContainer.appendChild(controlsButton); menuContainer.appendChild(soundtrackToggle); menuContainer.appendChild(exitButton); mainMenu.appendChild(menuContainer); parentDiv.appendChild(mainMenu); // Loading manager events loadingManager.onProgress = function(url, itemsLoaded, itemsTotal) { const progress = ((itemsLoaded / itemsTotal) * 100).toFixed(0); const loadingText = loadingScreen.firstChild; const loadingBar = loadingScreen.lastChild.firstChild; loadingText.innerHTML = `Loading... ${progress}%`; loadingBar.style.width = `${progress}%`; }; loadingManager.onLoad = function() { assetsLoaded = true; // Update loading text to show completion loadingScreen.firstChild.innerHTML = 'Loading... 100%'; loadingScreen.lastChild.firstChild.style.width = '100%'; // Add a delay before fading out setTimeout(() => { // Fade out loading screen and show main menu loadingScreen.style.transition = 'opacity 1s'; loadingScreen.style.opacity = '0'; setTimeout(() => { loadingScreen.style.display = 'none'; mainMenu.style.display = 'flex'; }, 1000); }, 500); }; // Load lost sound audioLoader.load('https://play.rosebud.ai/assets/lost.wav?Q9ov', function(buffer) { const lostSound = new THREE.Audio(listener); lostSound.setBuffer(buffer); lostSound.setVolume(0.5); window.lostSound = lostSound; // Store reference globally }); 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, -10, 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(); // Create interaction prompt overlay const interactionPrompt = document.createElement('div'); interactionPrompt.style.position = 'absolute'; interactionPrompt.style.top = '50%'; interactionPrompt.style.left = '50%'; interactionPrompt.style.transform = 'translate(-50%, -50%)'; interactionPrompt.style.color = '#ffffff'; interactionPrompt.style.fontFamily = "'VT323', monospace"; interactionPrompt.style.fontSize = '32px'; interactionPrompt.style.textAlign = 'center'; interactionPrompt.style.display = 'none'; interactionPrompt.style.zIndex = '1000'; interactionPrompt.innerHTML = '[F]'; parentDiv.appendChild(interactionPrompt); // Initialize the camera const camera = new THREE.PerspectiveCamera( 75, canvas.offsetWidth / canvas.offsetHeight, 0.1, 1000 ); let bobOffset = 0; const BOB_AMPLITUDE = 0.15; // Maximum height of the bob const BOB_FREQUENCY = 9; // Updated speed of the bob camera.add(listener); // Add audio listener to camera after camera is initialized // Torchlight setup const torchlight = new THREE.SpotLight(0xffffff, 2.0); torchlight.angle = Math.PI / 6; // 30 degrees cone torchlight.penumbra = 0.3; torchlight.decay = 1.5; torchlight.distance = 80; // Doubled range from 40 to 80 torchlight.intensity = 4.0; // Doubled from 2.0 torchlight.castShadow = true; torchlight.shadow.mapSize.width = 1024; torchlight.shadow.mapSize.height = 1024; torchlight.shadow.camera.near = 0.5; torchlight.shadow.camera.far = 80; // Doubled from 40 torchlight.visible = false; camera.add(torchlight); torchlight.position.set(0, -1.0, 0); // Lowered position for better visibility // Create a target object and add it to the scene const torchlightTarget = new THREE.Object3D(); scene.add(torchlightTarget); torchlight.target = torchlightTarget; scene.add(camera); // Make sure camera is in the scene for lights to work // Adjusted camera position camera.position.set(0, 15, 30); camera.lookAt(0, 0, 0); // First person camera settings const cameraSettings = { height: 4.5, // Height of camera from character's feet sensitivity: 0.002, // Mouse look sensitivity }; // Initialize the renderer with HDR const renderer = new THREE.WebGLRenderer({ antialias: true, canvas: canvas, powerPreference: 'high-performance', }); renderer.setPixelRatio(0.5); 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 dithering pass const resolution = new THREE.Vector2(window.innerWidth, window.innerHeight); const ditheringPass = new DitheringPass(resolution); ditheringPass.enabled = true; // Add vignette pass const vignettePass = new VignettePass(); vignettePass.enabled = true; composer.addPass(vignettePass); // Dithering pass should be last ditheringPass.renderToScreen = true; composer.addPass(ditheringPass); // Initialize composer size composer.setSize(parentDiv.clientWidth, parentDiv.clientHeight); // Define sky colors for environmental lighting const skyColor = new THREE.Color(0x000000); // Black sky const groundColor = new THREE.Color(0x000000); // Black 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 ); } `; // Add flag to track if anomaly sound has been played let anomalySoundPlayed = false; 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 PointerLockControls const controls = new PointerLockControls(camera, document.body); // Add button event listeners // Load ambient soundtrack audioLoader.load('https://play.rosebud.ai/assets/ost.wav?bkci', function(buffer) { ambientSound.setBuffer(buffer); ambientSound.setLoop(true); ambientSound.setVolume(0.4); // Increased from 35% to 40% volume // Add soundtrack toggle event listener soundtrackToggle.addEventListener('click', () => { if (ambientSound.isPlaying) { ambientSound.pause(); soundtrackToggle.innerHTML = '[ Enable Soundtrack ]'; } else { ambientSound.play(); soundtrackToggle.innerHTML = '[ Disable Soundtrack ]'; } // Ensure pointer lock is maintained if (!controls.isLocked) { controls.lock(); } }); }); startButton.addEventListener('click', function() { // Reset anomaly sound flag when starting new game anomalySoundPlayed = false; if (!controls.isLocked) { mainMenu.style.display = 'none'; controls.lock(); // Reset and ensure overlay is visible before fade blackOverlay.style.opacity = '1'; blackOverlay.style.display = 'block'; // Start fade out animation after a brief delay setTimeout(() => { blackOverlay.style.opacity = '0'; }, 50); // Play objective sound and show text after 10 seconds setTimeout(() => { if (objectiveSound.buffer) { objectiveSound.play(); } }, 10000); // Always start the soundtrack when game starts with fade in if (ambientSound.buffer && !ambientSound.isPlaying) { const targetVolume = 0.4; // Target volume (40%) const fadeInDuration = 15000; // 15 seconds in milliseconds const steps = 60; // Number of steps for smooth transition const stepInterval = fadeInDuration / steps; const volumeStep = targetVolume / steps; ambientSound.setVolume(0); // Start at 0 volume ambientSound.play(); let currentStep = 0; const fadeInterval = setInterval(() => { currentStep++; const newVolume = Math.min(volumeStep * currentStep, targetVolume); ambientSound.setVolume(newVolume); if (currentStep >= steps) { clearInterval(fadeInterval); } }, stepInterval); soundtrackToggle.innerHTML = '[ Disable Soundtrack ]'; } } }); exitButton.addEventListener('click', function() { window.close(); }); // Add control state handlers controls.addEventListener('lock', function() { loadingScreen.style.display = 'none'; mainMenu.style.display = 'none'; }); controls.addEventListener('unlock', function() { if (assetsLoaded) { mainMenu.style.display = 'flex'; // Reset overlay opacity when returning to menu blackOverlay.style.opacity = '1'; // Add click event listener to the document when controls are unlocked const lockHandler = (event) => { // Check if click was on controls info or controls button if (event.target === controlsInfo || event.target === controlsButton || controlsInfo.contains(event.target)) { return; // Do nothing if clicking controls elements } if (!controls.isLocked) { controls.lock(); mainMenu.style.display = 'none'; } document.removeEventListener('click', lockHandler); }; document.addEventListener('click', lockHandler); } }); // Prevent ESC from unlocking controls document.addEventListener('keydown', function(event) { if (event.key === 'Escape') { event.preventDefault(); } }); // Create flat terrain function createTerrain() { const size = 3200; // 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?c7Ir'); const normalMap = textureLoader.load('https://play.rosebud.ai/assets/3D_playground_grass_normal.png?ZHM7'); texture.wrapS = texture.wrapT = THREE.RepeatWrapping; texture.repeat.set(320, 320); texture.encoding = THREE.sRGBEncoding; normalMap.wrapS = normalMap.wrapT = THREE.RepeatWrapping; normalMap.repeat.set(160, 160); 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; } // Setup improved lighting system const sunLight = new THREE.DirectionalLight(0xffffff, 2.0); // Keep white light for visibility sunLight.position.set(-350, 100, -350); 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); // Add hemisphere light to simulate sky and ground bounce light const hemiLight = new THREE.HemisphereLight(0x404040, 0x404040, 0.1); // Very dim ambient light as base scene.add(hemiLight); // Create the sun const sunGeometry = new THREE.SphereGeometry(20, 32, 32); const sunMaterial = new THREE.MeshBasicMaterial({ color: 0xffff00, transparent: true, opacity: 0.8 }); const sunMesh = new THREE.Mesh(sunGeometry, sunMaterial); sunMesh.position.copy(sunLight.position); scene.add(sunMesh); // Add glow effect to sun const sunGlowGeometry = new THREE.SphereGeometry(22, 32, 32); const sunGlowMaterial = new THREE.MeshBasicMaterial({ color: 0xffff00, transparent: true, opacity: 0.2, side: THREE.BackSide }); const sunGlow = new THREE.Mesh(sunGlowGeometry, sunGlowMaterial); sunGlow.position.copy(sunLight.position); scene.add(sunGlow); // ========================= // 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 isDitheringEnabled = true; // Track dithering state 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, }; // Character configuration const characterConfig = { // Movement settings groundSpeed: 10.5, // Reduced by 30% from 15 airSpeed: 8.75, // Reduced by 30% from 12.5 groundDamping: 0.1, airDamping: 0.1, acceleration: 20, 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 === 'KeyF') { if (isNearDeadAstronaut2) { deadAstronaut2MessageVisible = !deadAstronaut2MessageVisible; deadAstronaut2Message.style.display = deadAstronaut2MessageVisible ? 'block' : 'none'; // Play russ sound when showing the message if (deadAstronaut2MessageVisible) { const audioLoader = new THREE.AudioLoader(); audioLoader.load('https://play.rosebud.ai/assets/russ.wav?WNvM', function(buffer) { const russSound = new THREE.Audio(listener); russSound.setBuffer(buffer); russSound.setVolume(0.5); russSound.play(); }); } } else if (isNearFloatingAstronaut) { floatingAstronautMessageVisible = !floatingAstronautMessageVisible; floatingAstronautMessage.style.display = floatingAstronautMessageVisible ? 'block' : 'none'; if (floatingAstronautMessageVisible && window.lostSound && !window.lostSound.isPlaying) { window.lostSound.play(); // Start sun disappearing sequence after 20 seconds setTimeout(() => { // Play sun sound before fade starts const audioLoader = new THREE.AudioLoader(); audioLoader.load('https://play.rosebud.ai/assets/sun.wav?kaBw', function(buffer) { const sunSound = new THREE.Audio(listener); sunSound.setBuffer(buffer); sunSound.setVolume(0.5); sunSound.play(); }); // Set up the fade out animation const fadeDuration = 15000; // 15 seconds fade duration const steps = 60; const stepInterval = fadeDuration / steps; let currentStep = 0; // Store initial values const initialSunOpacity = sunMaterial.opacity; const initialGlowOpacity = sunGlowMaterial.opacity; const initialLightIntensity = sunLight.intensity; // Enable transparency sunMaterial.transparent = true; sunGlowMaterial.transparent = true; const fadeInterval = setInterval(() => { currentStep++; const progress = currentStep / steps; // Update opacities and intensity sunMaterial.opacity = initialSunOpacity * (1 - progress); sunGlowMaterial.opacity = initialGlowOpacity * (1 - progress); sunLight.intensity = initialLightIntensity * (1 - progress); // Force updates sunMaterial.needsUpdate = true; sunGlowMaterial.needsUpdate = true; if (currentStep >= steps) { clearInterval(fadeInterval); // Hide everything at the end sunMesh.visible = false; sunGlow.visible = false; sunLight.visible = false; } }, stepInterval); }, 30000); // 30 seconds delay } } else if (isNearApollo) { logWindowVisible = !logWindowVisible; logWindow.style.display = logWindowVisible ? 'block' : 'none'; // Play Apollo 1 log sound when showing the log window if (logWindowVisible && apollo1LogSound.buffer && !apollo1LogSound.isPlaying) { apollo1LogSound.play(); } else if (!logWindowVisible && apollo1LogSound.isPlaying) { apollo1LogSound.stop(); } } else if (isNearRadioTower) { radioMessageVisible = !radioMessageVisible; radioMessage.style.display = radioMessageVisible ? 'block' : 'none'; if (radioMessageVisible && radioDistortionSound.buffer && !radioDistortionSound.isPlaying) { radioDistortionSound.play(); } else if (!radioMessageVisible && radioDistortionSound.isPlaying) { radioDistortionSound.stop(); } } else if (isNearDeadAstronaut) { deadAstronautMessageVisible = !deadAstronautMessageVisible; deadAstronautMessage.style.display = deadAstronautMessageVisible ? 'block' : 'none'; if (deadAstronautMessageVisible && radioTransmissionSound.buffer && !radioTransmissionSound.isPlaying) { radioTransmissionSound.setPlaybackRate(0.85); // Slow down playback for creepier effect radioTransmissionSound.play(); } else if (!deadAstronautMessageVisible && radioTransmissionSound.isPlaying) { radioTransmissionSound.stop(); } } // Play Apollo 1 log sound when showing the log window if (logWindowVisible && apollo1LogSound.buffer && !apollo1LogSound.isPlaying) { apollo1LogSound.play(); } else if (!logWindowVisible && apollo1LogSound.isPlaying) { apollo1LogSound.stop(); } } else if (event.code === 'Space') { keysPressed.space = true; } else if (event.code === 'KeyT') { torchlight.visible = !torchlight.visible; } else if (keysPressed.hasOwnProperty(event.key.toLowerCase())) { keysPressed[event.key.toLowerCase()] = true; } else if (event.key.toLowerCase() === 'u') { isDitheringEnabled = !isDitheringEnabled; ditheringPass.enabled = isDitheringEnabled; // Toggle sun brightness if (isDitheringEnabled) { sunLight.intensity = 2.0; // Normal brightness sunMaterial.opacity = 0.8; // Normal sun opacity sunGlowMaterial.opacity = 0.2; // Normal glow opacity } else { sunLight.intensity = 8.0; // Increased brightness sunMaterial.opacity = 1.0; // Increased sun opacity sunGlowMaterial.opacity = 0.6; // Increased glow opacity } } }); window.addEventListener('keyup', (event) => { if (event.code === 'Space') { keysPressed.space = false; } else if (keysPressed.hasOwnProperty(event.key.toLowerCase())) { keysPressed[event.key.toLowerCase()] = false; } }); // Load the character model const characterUrl = 'https://play.rosebud.ai/assets/3D_playground_character.glb?Nm72'; gltfLoader.load(characterUrl, (gltf) => { const model = gltf.scene; model.scale.set( characterConfig.scale, characterConfig.scale, characterConfig.scale ); // Apply rotation correction if needed model.rotation.y = Math.PI; // Correcting the model's rotation // 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); characterBody.position.set(0, characterConfig.startHeight, 0); 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; // Don't add the model to scene for first person view // but keep the reference for physics }); // Update character movement function updateCharacterMovement(deltaTime) { if (!character || !characterBody || !sunMesh) return; // Get camera's forward and right vectors for first person movement const cameraForward = new THREE.Vector3(0, 0, -1).applyQuaternion(camera.quaternion); const cameraRight = new THREE.Vector3(-1, 0, 0).applyQuaternion(camera.quaternion); // Zero out vertical component cameraForward.y = 0; cameraRight.y = 0; cameraForward.normalize(); cameraRight.normalize(); // Calculate move direction relative to camera moveDirection.set(0, 0, 0); // Add movement input if (keysPressed.w) moveDirection.add(cameraForward); if (keysPressed.s) moveDirection.sub(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) { // 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 { // Apply ground damping when no input currentVelocity.multiplyScalar(1 - characterConfig.groundDamping * deltaTime); } } 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 walk sound if not already playing if (!walkSound.isPlaying) { walkSound.play(); } } else { walkAction.stop(); idleAction.play(); idleAction.setEffectiveWeight(1); // Stop walk sound if (walkSound.isPlaying) { walkSound.stop(); } } } } // Update animation mixer if (mixer) { mixer.update(deltaTime); } } // Update camera position to follow character in first person function updateCamera() { if (!characterBody) return; // Calculate head bob based on movement speed const horizontalSpeed = new THREE.Vector2(characterBody.velocity.x, characterBody.velocity.z).length(); if (horizontalSpeed > 0.5 && isGrounded) { // Only bob when moving and on the ground bobOffset = Math.sin(performance.now() * 0.001 * BOB_FREQUENCY) * BOB_AMPLITUDE * (horizontalSpeed / characterConfig.groundSpeed); } else { // Smoothly return to neutral position bobOffset *= 0.8; } // Position camera at character's head height with bob offset camera.position.copy(characterBody.position); camera.position.y += cameraSettings.height + bobOffset; // Update torchlight target to match where player is looking const cameraDirection = new THREE.Vector3(0, 0, -1); cameraDirection.applyQuaternion(camera.quaternion); // Position the target 10 units in front of where the camera is looking torchlight.target.position.copy(camera.position); torchlight.target.position.add(cameraDirection.multiplyScalar(10)); } // ========================= // End of Character Integration // ========================= // Create initial scene const terrain = createTerrain(); // Load Apollo 1 model gltfLoader.load('https://play.rosebud.ai/assets/apollo 1.glb?VLHH', (gltf) => { apollo = gltf.scene; // Scale and position the model apollo.scale.set(20, 20, 20); apollo.position.set(-100, 18, -240); // Position it at x:-100, y:18, z:-240 // Add shadows apollo.traverse((child) => { if (child.isMesh) { child.castShadow = true; child.receiveShadow = true; // Enhance material properties if (child.material) { child.material.envMapIntensity = 1.0; child.material.needsUpdate = true; } } }); scene.add(apollo); }); // Load Radio Tower model gltfLoader.load('https://play.rosebud.ai/assets/radio tower.glb?oSqR', (gltf) => { const radioTower = gltf.scene; // Scale and position the model radioTower.scale.set(15, 15, 15); // Halved size to 15 radioTower.position.set(90, 12, -140); // Moved to new position // Add shadows and enhance materials radioTower.traverse((child) => { if (child.isMesh) { child.castShadow = true; child.receiveShadow = true; if (child.material) { child.material.envMapIntensity = 1.0; child.material.needsUpdate = true; } } }); scene.add(radioTower); }); // Create industrial area // Load Gas Industrial models gltfLoader.load('https://play.rosebud.ai/assets/gas industrial.glb?gzqY', (gltf) => { const gasIndustrial1 = gltf.scene; // Scale and position the first gas industrial gasIndustrial1.scale.set(36, 36, 36); gasIndustrial1.position.set(-85, 16, 120); gasIndustrial1.rotation.y = Math.PI * 0.25; // Rotate 45 degrees // Add shadows and enhance materials gasIndustrial1.traverse((child) => { if (child.isMesh) { child.castShadow = true; child.receiveShadow = true; if (child.material) { child.material.envMapIntensity = 1.0; child.material.needsUpdate = true; } } }); scene.add(gasIndustrial1); // Clone for second gas industrial const gasIndustrial2 = gasIndustrial1.clone(); gasIndustrial2.position.set(-45, 16, 160); gasIndustrial2.rotation.y = Math.PI * -0.15; // Different rotation for variety scene.add(gasIndustrial2); }); // Load Nuclear Barrels gltfLoader.load('https://play.rosebud.ai/assets/nuclear barrel.glb?ddbf', (gltf) => { const nuclearBarrel1 = gltf.scene; nuclearBarrel1.scale.set(3, 3, 3); nuclearBarrel1.position.set(-17, 3, 124); nuclearBarrel1.rotation.y = Math.PI * Math.random() * 2; nuclearBarrel1.traverse((child) => { if (child.isMesh) { child.castShadow = true; child.receiveShadow = true; if (child.material) { child.material.envMapIntensity = 1.0; child.material.needsUpdate = true; } } }); // Create and position second barrel with random offset const nuclearBarrel2 = nuclearBarrel1.clone(); nuclearBarrel2.position.set(-22 + Math.random() * 6 - 3, 3, 135 + Math.random() * 6 - 3); nuclearBarrel2.rotation.y = Math.PI * Math.random() * 2; // Create and position third barrel with random offset const nuclearBarrel3 = nuclearBarrel1.clone(); nuclearBarrel3.position.set(-25 + Math.random() * 8 - 4, 3, 125 + Math.random() * 8 - 4); nuclearBarrel3.rotation.y = Math.PI * Math.random() * 2; scene.add(nuclearBarrel1); scene.add(nuclearBarrel2); scene.add(nuclearBarrel3); // Create and position fourth barrel at specific coordinates const nuclearBarrel4 = nuclearBarrel1.clone(); nuclearBarrel4.position.set(-92, 3, 151); nuclearBarrel4.rotation.y = Math.PI * Math.random() * 2; // Random rotation for variety scene.add(nuclearBarrel4); }); // Load Communication Tower model gltfLoader.load('https://play.rosebud.ai/assets/comunicationtower.glb?fdFG', (gltf) => { const commTower = gltf.scene; commTower.scale.set(108, 108, 108); // Reduced by 25% from 144 commTower.position.set(-10, 100, 82); // Updated position to x:-10, y:100, z:82 commTower.rotation.y = Math.PI * 0.15; // Slight rotation for variety commTower.traverse((child) => { if (child.isMesh) { child.castShadow = true; child.receiveShadow = true; if (child.material) { child.material.envMapIntensity = 1.0; child.material.needsUpdate = true; } } }); scene.add(commTower); }); // Load Dead Astronaut model gltfLoader.load('https://play.rosebud.ai/assets/deadastronaut.glb?1Caj', (gltf) => { const deadAstronaut = gltf.scene; deadAstronaut.scale.set(2.24, 2.24, 2.24); deadAstronaut.position.set(-18, 2, 121); deadAstronaut.rotation.y = Math.PI * 1.15 - Math.PI * 0.083; // Rotated 180 degrees plus offset, minus 15 degrees deadAstronaut.traverse((child) => { if (child.isMesh) { child.castShadow = true; child.receiveShadow = true; if (child.material) { child.material.envMapIntensity = 1.0; child.material.needsUpdate = true; } } }); scene.add(deadAstronaut); // Create second dead astronaut const deadAstronaut2 = gltf.scene.clone(); deadAstronaut2.scale.set(2.24, 2.24, 2.24); deadAstronaut2.position.set(-91, 2, 147); deadAstronaut2.rotation.y = Math.PI * 2.15 - Math.PI * 0.083; // Rotated 180 degrees from the first one deadAstronaut2.traverse((child) => { if (child.isMesh) { child.castShadow = true; child.receiveShadow = true; if (child.material) { child.material.envMapIntensity = 1.0; child.material.needsUpdate = true; } } }); scene.add(deadAstronaut2); }); // Load Crater gltfLoader.load('https://play.rosebud.ai/assets/crater.glb?vSTM', (gltf) => { const crater = gltf.scene; crater.scale.set(25, 25, 25); crater.position.set(261, 0, 276); crater.rotation.y = Math.PI * Math.random() * 2; // Random rotation for variety crater.traverse((child) => { if (child.isMesh) { child.castShadow = true; child.receiveShadow = true; if (child.material) { child.material.envMapIntensity = 1.0; child.material.needsUpdate = true; } } }); scene.add(crater); }); // Load Standing Astronaut model gltfLoader.load('https://play.rosebud.ai/assets/astronautstand.glb?y8Me', (gltf) => { const standingAstronaut = gltf.scene; standingAstronaut.scale.set(3.5, 3.5, 3.5); standingAstronaut.position.set(5, 4.1, 5); // Raised to y=4.1 standingAstronaut.rotation.y = Math.PI * 0.25; // 45-degree rotation standingAstronaut.traverse((child) => { if (child.isMesh) { child.castShadow = true; child.receiveShadow = true; if (child.material) { child.material.envMapIntensity = 1.0; child.material.needsUpdate = true; } } }); scene.add(standingAstronaut); }); // Load Floating Astronaut model gltfLoader.load('https://play.rosebud.ai/assets/floating astronaut.glb?px2K', (gltf) => { const floatingAstronaut = gltf.scene; floatingAstronaut.scale.set(3, 3, 3); floatingAstronaut.position.set(261, 15, 276); // Same x/z as crater, y=15 floatingAstronaut.rotation.y = Math.PI * 0.5; // 90-degree rotation // Store reference to floating astronaut for animation window.floatingAstronaut = floatingAstronaut; floatingAstronaut.traverse((child) => { if (child.isMesh) { child.castShadow = true; child.receiveShadow = true; if (child.material) { child.material.envMapIntensity = 1.0; child.material.needsUpdate = true; } } }); scene.add(floatingAstronaut); }); // Load Industrial Bench gltfLoader.load('https://play.rosebud.ai/assets/industrialbench.glb?SYep', (gltf) => { const industrialBench = gltf.scene; industrialBench.scale.set(10, 10, 10); industrialBench.position.set(-90, 0, 135); industrialBench.rotation.y = Math.PI * 0.5; // Rotate 90 degrees industrialBench.traverse((child) => { if (child.isMesh) { child.castShadow = true; child.receiveShadow = true; if (child.material) { child.material.envMapIntensity = 1.0; child.material.needsUpdate = true; } } }); scene.add(industrialBench); }); // Radio tower constants const RADIO_MAX_DISTANCE = 100; // Maximum distance to hear the radio let isNearFloatingAstronaut = false; let floatingAstronautMessageVisible = false; // Create floating astronaut message display // Create narrative text UI theme utility function function createNarrativeText(content, options = {}) { const element = document.createElement('div'); const defaultStyle = { position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%, -50%)', color: '#ffffff', fontFamily: "'VT323', monospace", fontSize: '24px', padding: '20px', backgroundColor: 'rgba(0, 0, 0, 0.7)', border: '2px solid #ffffff', display: 'none', zIndex: '1000', maxWidth: options.maxWidth || 'auto', textAlign: options.textAlign || 'left' }; Object.assign(element.style, defaultStyle); element.innerHTML = content; parentDiv.appendChild(element); return element; } // Create narrative text elements using the utility function const floatingAstronautMessage = createNarrativeText( 'I feel lost. How much time passed since we arrived? I feel lost' ); const RADIO_FULL_VOLUME_DISTANCE = 20; // Distance for maximum volume let radioTowerPosition = new THREE.Vector3(90, 12, -140); // Match the position from load let isNearRadioTower = false; let radioMessageVisible = false; let isNearDeadAstronaut = false; let isNearDeadAstronaut2 = false; let deadAstronautMessageVisible = false; let deadAstronaut2MessageVisible = false; // Create radio message display const radioMessage = createNarrativeText( 'The communications are corrupted' ); // Create dead astronaut message display const deadAstronautMessage = createNarrativeText( 'Do you hear it too? The words are not mine. The thoughts are not mine. It\'s inside now. Speaking with my tongue. Looking through my eyes. You won\'t know when it starts. You won\'t know when you stop', { maxWidth: '600px', textAlign: 'center' } ); // Create second dead astronaut message display const deadAstronaut2Message = createNarrativeText( 'There where not the americans... was something else... there is something under the ground', { maxWidth: '600px', textAlign: 'center' } ); // Function to update radio sound based on distance function updateRadioSound() { if (!characterBody) return; const distance = new THREE.Vector3( radioTowerPosition.x - characterBody.position.x, radioTowerPosition.y - characterBody.position.y, radioTowerPosition.z - characterBody.position.z ).length(); isNearRadioTower = distance < INTERACTION_DISTANCE; if (distance <= RADIO_MAX_DISTANCE) { // Calculate volume based on distance let volume = 1 - Math.max(0, (distance - RADIO_FULL_VOLUME_DISTANCE) / (RADIO_MAX_DISTANCE - RADIO_FULL_VOLUME_DISTANCE)); volume = Math.min(0.25, volume); // Cap maximum volume at 0.25 (halved from 0.5) radioNoiseSound.setVolume(volume); } else { radioNoiseSound.setVolume(0); } } // Check if player is near Apollo 1 function checkApolloProximity() { if (!apollo || !characterBody) return; const distance = new THREE.Vector3( apollo.position.x - characterBody.position.x, apollo.position.y - characterBody.position.y, apollo.position.z - characterBody.position.z ).length(); isNearApollo = distance < INTERACTION_DISTANCE; } // Check if player is near Dead Astronaut function checkDeadAstronautProximity() { if (!characterBody) return; const deadAstronautPosition = new THREE.Vector3(-18, 2, 121); const deadAstronaut2Position = new THREE.Vector3(-91, 2, 147); const distance1 = new THREE.Vector3( deadAstronautPosition.x - characterBody.position.x, deadAstronautPosition.y - characterBody.position.y, deadAstronautPosition.z - characterBody.position.z ).length(); const distance2 = new THREE.Vector3( deadAstronaut2Position.x - characterBody.position.x, deadAstronaut2Position.y - characterBody.position.y, deadAstronaut2Position.z - characterBody.position.z ).length(); isNearDeadAstronaut = distance1 < INTERACTION_DISTANCE; isNearDeadAstronaut2 = distance2 < INTERACTION_DISTANCE; } // Check if player is near Floating Astronaut function checkFloatingAstronautProximity() { if (!characterBody || !window.floatingAstronaut) return; const floatingAstronautPosition = new THREE.Vector3(261, 15, 276); const distance = new THREE.Vector3( floatingAstronautPosition.x - characterBody.position.x, floatingAstronautPosition.y - characterBody.position.y, floatingAstronautPosition.z - characterBody.position.z ).length(); isNearFloatingAstronaut = distance < (INTERACTION_DISTANCE + 15); // Increased range specifically for floating astronaut } function animate() { requestAnimationFrame(animate); const deltaTime = Math.min(clock.getDelta(), 0.1); // Update interaction prompt visibility if (isNearApollo || isNearFloatingAstronaut || isNearDeadAstronaut || isNearDeadAstronaut2 || isNearRadioTower) { interactionPrompt.style.display = 'block'; } else { interactionPrompt.style.display = 'none'; } if (mainMenu.style.display === 'none') { // Force HUD update every frame for smooth wave animation drawHUD(); // Update astronaut behavior if (characterBody && window.spawnedAstronauts) { window.spawnedAstronauts.forEach(astronaut => { const distanceToPlayer = new THREE.Vector3( characterBody.position.x - astronaut.position.x, 0, // Ignore vertical distance characterBody.position.z - astronaut.position.z ).length(); if (distanceToPlayer > 50) { // Start chasing astronaut.userData.isChasing = true; // Calculate direction to player const direction = new THREE.Vector3( characterBody.position.x - astronaut.position.x, 0, characterBody.position.z - astronaut.position.z ).normalize(); // Move towards player astronaut.position.x += direction.x * astronaut.userData.speed * deltaTime; astronaut.position.z += direction.z * astronaut.userData.speed * deltaTime; // Update rotation to face player astronaut.rotation.y = Math.atan2(direction.x, direction.z); } else { // Stop chasing when close astronaut.userData.isChasing = false; } }); } // Update sanity only when near crater if (characterBody) { updateSanity(); } if (assetsLoaded) { world.step(deltaTime); checkApolloProximity(); checkFloatingAstronautProximity(); checkDeadAstronautProximity(); updateRadioSound(); // Update radio volume based on distance updateCharacterMovement(deltaTime); // Update character movement updateCamera(); // Update camera to follow character if (character && characterBody) { // Adjust the character model's position based on the physics body character.position.copy(characterBody.position); } // No need to call controls.update() here as it's called in updateCamera() } composer.render(); drawHUD(); // Draw the HUD overlay // Check if sun has disappeared and play compromised sound if (!sunMesh.visible && !sunGlow.visible && !compromisedSoundPlayed) { const audioLoader = new THREE.AudioLoader(); audioLoader.load('https://play.rosebud.ai/assets/crompromized.wav?NRO6', function(buffer) { const compromisedSound = new THREE.Audio(listener); compromisedSound.setBuffer(buffer); compromisedSound.setVolume(0.105); compromisedSound.play(); compromisedSoundPlayed = true; }); // Delay astronaut spawn by 3 seconds setTimeout(() => { // Spawn astronauts in a circle when the sun disappears const numAstronauts = 8; // Number of astronauts to spawn const radius = 30; // Radius of the circle // Load the astronaut model once and clone it if (!window.spawnedAstronauts) { window.spawnedAstronauts = []; } gltfLoader.load('https://play.rosebud.ai/assets/astronautstand.glb?y8Me', (gltf) => { const baseAstronaut = gltf.scene; baseAstronaut.scale.set(3.5, 3.5, 3.5); // Create astronauts in a circle for (let i = 0; i < numAstronauts; i++) { const angle = (i / numAstronauts) * Math.PI * 2; const x = characterBody.position.x + Math.cos(angle) * radius; const z = characterBody.position.z + Math.sin(angle) * radius; const astronaut = baseAstronaut.clone(); astronaut.position.set(x, 4.1, z); astronaut.userData.speed = 5; // Movement speed astronaut.userData.isChasing = false; // Track chase state // Make astronauts face the player const directionToPlayer = new THREE.Vector3(); directionToPlayer.subVectors( new THREE.Vector3(characterBody.position.x, 4.1, characterBody.position.z), astronaut.position ); astronaut.rotation.y = Math.atan2(directionToPlayer.x, directionToPlayer.z); // Apply the same material settings as other models astronaut.traverse((child) => { if (child.isMesh) { child.castShadow = true; child.receiveShadow = true; if (child.material) { child.material.envMapIntensity = 1.0; child.material.needsUpdate = true; } } }); window.spawnedAstronauts.push(astronaut); scene.add(astronaut); } }); }); } // Rotate floating astronaut if it exists if (window.floatingAstronaut) { window.floatingAstronaut.rotation.y += deltaTime * 0.5; // Rotate 0.5 radians per second } // Update position display if (characterBody) { const x = Math.round(characterBody.position.x); const z = Math.round(characterBody.position.z); positionDisplay.textContent = `X: ${x} Z: ${z}`; } } } // Function to update sanity and breathing effects function updateSanity() { // Check if player is near crater center if (characterBody) { const distanceToCrater = new THREE.Vector3( CRATER_CENTER.x - characterBody.position.x, CRATER_CENTER.y - characterBody.position.y, CRATER_CENTER.z - characterBody.position.z ).length(); // Debug position and distance console.log('Player Position:', characterBody.position); console.log('Distance to Crater:', distanceToCrater); if (distanceToCrater < CRATER_EFFECT_RADIUS) { // Calculate proximity factor (1 at center, 0 at radius) const proximityFactor = Math.max(0, Math.min(1, 1 - (distanceToCrater / CRATER_EFFECT_RADIUS))); // Play anomaly sound once when getting close to crater if (!anomalySoundPlayed) { const audioLoader = new THREE.AudioLoader(); audioLoader.load('https://play.rosebud.ai/assets/anomaly.wav?A9wU', function(buffer) { const anomalySound = new THREE.Audio(listener); anomalySound.setBuffer(buffer); anomalySound.setVolume(0.5); anomalySound.play(); }); anomalySoundPlayed = true; } // Debug proximity factor console.log('Proximity Factor:', proximityFactor); // Update sanity based on proximity to crater sanityLevel = Math.max(sanityLevel - (CRATER_SANITY_DECREASE * proximityFactor), minSanity); // Update breath sound based on proximity to crater center if (breathSound && breathSound.buffer) { // Breath speed increases exponentially as you get closer to center const minRate = 1.0; const maxRate = 8.0; // Increased max rate for faster effect // Calculate base rate with more aggressive exponential scaling const exponentialFactor = Math.pow(proximityFactor, 1.5); // Reduced power for earlier effect const baseRate = minRate + (exponentialFactor * (maxRate - minRate)); // Apply additional exponential scaling with increased intensity const finalRate = Math.pow(baseRate, 1.8); // Reduced power for quicker acceleration breathSound.playbackRate = finalRate; // Debug breath rate console.log('Breath Rate:', finalRate); // Volume increases as you get closer to center const minVolume = 0.5; const maxVolume = 1.0; // Maximum volume // Calculate volume with exponential scaling const volumeFactor = Math.pow(proximityFactor, 1.2); // More responsive volume transition breathSound.setVolume(minVolume + (volumeFactor * (maxVolume - minVolume))); } } else { // Gradually recover sanity when outside crater effect if (sanityLevel < 100) { sanityLevel = Math.min(sanityLevel + (sanityDecreaseRate * 0.5), 100); } // Reset breath sound to normal when outside crater if (breathSound && breathSound.buffer) { breathSound.playbackRate = 1.0; breathSound.setVolume(0.5); } } } } // 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 HUD canvas size hudCanvas.width = width; hudCanvas.height = height; // Redraw HUD after resize drawHUD(); // Update post-processing passes ditheringPass.setSize(width, height); } // Add event listeners window.addEventListener('resize', onWindowResize); const resizeObserver = new ResizeObserver(onWindowResize); resizeObserver.observe(parentDiv); // Start animation animate();