// Import necessary modules import * as THREE from 'three'; // Remove OrbitControls import as we won't be using it anymore 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); const audioLoader = new THREE.AudioLoader(loadingManager); let assetsLoaded = false; // Audio setup const listener = new THREE.AudioListener(); const backgroundMusic = new THREE.Audio(listener); // Inventory and interaction variables const inventory = []; const maxInventorySize = 3; // Increased to 3 slots const interactionRange = 8; // Increased distance for easier ball collection let selectedInventorySlot = 0; // Add this line to keep track of the selected slot // Debug output variables const debugMessages = []; let lastDebugUpdateTime = 0; const debugUpdateInterval = 500; // Update every 500ms // Function to update debug output const debugConfig = { interval: 500, maxMessages: 50, timestampInterval: 1000 }; let debugMessageCounter = 0; let lastTimestampUpdate = 0; function updateDebugOutput(message, id = null) { if (!debugMode) return id; console.log(`[${new Date().toLocaleTimeString()}] ${message}`); return id || Date.now(); // Return a new ID if none was provided } function removeDebugOutput(id) { // In this implementation, we don't need to do anything // since we're just logging to the console. // If you implement a more complex debug output system in the future, // you can use this function to remove specific debug messages. } // New function to update game state information let gameStateInfoId = null; let lastGameState = null; function updateGameStateInfo() { if (!debugMode) return; const currentGameState = { characterPosition: character ? `(${character.position.x.toFixed(2)}, ${character.position.y.toFixed(2)}, ${character.position.z.toFixed(2)})` : 'N/A', inventorySize: inventory.length, ballsInScene: balls.length, isGrounded: isGrounded, currentJumps: currentJumps, selectedInventorySlot: selectedInventorySlot, }; // Check if the game state has changed if (JSON.stringify(currentGameState) !== JSON.stringify(lastGameState)) { const stateMessage = ` Character Position: ${currentGameState.characterPosition} Inventory Size: ${currentGameState.inventorySize}/${maxInventorySize} Balls in Scene: ${currentGameState.ballsInScene} Is Grounded: ${currentGameState.isGrounded} Current Jumps: ${currentGameState.currentJumps} Selected Inventory Slot: ${currentGameState.selectedInventorySlot + 1} `; gameStateInfoId = updateDebugOutput(stateMessage, gameStateInfoId); logToConsole(stateMessage); // Update the last game state lastGameState = currentGameState; } } // 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?lWvg'; } return url; }); // Load background music audioLoader.load( 'https://play.rosebud.ai/assets/UnstoppableDriveextv2.mp3?ssOA', function(buffer) { backgroundMusic.setBuffer(buffer); backgroundMusic.setLoop(true); // Ensure volume is at least 50% const currentVolume = backgroundMusic.getVolume(); if (currentVolume < 0.5) { backgroundMusic.setVolume(0.5); } updateDebugOutput("Background music loaded successfully"); // Play the music backgroundMusic.play(); updateDebugOutput("Background music started playing"); // Update music toggle button state document.getElementById('musicToggle').textContent = 'Music: ON'; // Set initial volume slider value document.getElementById('musicVolume').value = backgroundMusic.getVolume(); // Ensure music is not muted if (backgroundMusic.getVolume() === 0) { backgroundMusic.setVolume(0.5); document.getElementById('musicVolume').value = 0.5; } }, function(xhr) { updateDebugOutput("Background music loading progress: " + (xhr.loaded / xhr.total * 100) + "%"); }, function(error) { updateDebugOutput("Error loading background music: " + error.message); } ); const parentDiv = document.getElementById('renderDiv'); let canvas = document.getElementById('threeRenderCanvas'); if (!canvas) { canvas = document.createElement('canvas'); canvas.id = 'threeRenderCanvas'; parentDiv.appendChild(canvas); } // Add CSS styles for inventory and controls const style = document.createElement('style'); style.textContent = ` #inventory { display: flex; gap: 5px; } .inventory-slot { width: 40px; height: 40px; border: 2px solid white; background-color: rgba(0, 0, 0, 0.7); box-shadow: 0 0 10px rgba(255, 255, 255, 0.5); } .selected-slot { border: 2px solid yellow; box-shadow: 0 0 15px rgba(255, 255, 0, 0.7); } #controlsDisplay { color: white; font-family: Arial, sans-serif; } .controls-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; } .control-group { background-color: rgba(0, 0, 0, 0.5); border-radius: 5px; padding: 10px; } .control-group h4 { margin-top: 0; border-bottom: 1px solid white; padding-bottom: 5px; } .control-group ul { list-style-type: none; padding: 0; } .control-group li { margin-bottom: 5px; } .key { display: inline-block; background-color: rgba(255, 255, 255, 0.2); border-radius: 3px; padding: 2px 5px; margin-right: 5px; font-weight: bold; } `; document.head.appendChild(style); // Add Menu and Debug button styles style.textContent += ` #ballInfoDisplay { position: absolute; top: 50px; left: 10px; background-color: rgba(0, 0, 0, 0.7); color: white; padding: 5px; font-family: monospace; display: none; z-index: 1000; } #ballColorDisplay, #ballInHandDisplay { margin: 5px 0; } #ballRemovedMessage { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: rgba(0, 0, 0, 0.7); color: white; padding: 10px 20px; border-radius: 5px; font-family: Arial, sans-serif; font-size: 16px; display: none; z-index: 1002; } #ballPickedUpMessage { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: rgba(0, 0, 0, 0.7); color: white; padding: 10px 20px; border-radius: 5px; font-family: Arial, sans-serif; font-size: 16px; display: none; z-index: 1002; } #menuButton { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); background-color: rgba(0, 0, 0, 0.7); color: white; padding: 10px 20px; border-radius: 25px; cursor: pointer; z-index: 1001; font-family: 'Arial', sans-serif; font-size: 16px; font-weight: bold; text-transform: uppercase; letter-spacing: 1px; border: 2px solid rgba(255, 255, 255, 0.3); box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); transition: all 0.3s ease; } #menuButton:hover { background-color: rgba(0, 0, 0, 0.8); border-color: rgba(255, 255, 255, 0.5); box-shadow: 0 6px 8px rgba(0, 0, 0, 0.2); transform: translateX(-50%) translateY(-2px); } #menuButton:active { transform: translateX(-50%) translateY(0); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } #menuContent { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: rgba(0, 0, 0, 0.8); color: white; padding: 30px; border-radius: 10px; z-index: 1000; display: none; text-align: center; width: 400px; height: 500px; overflow-y: auto; } #menuContent h2 { font-size: 24px; margin-bottom: 20px; border-bottom: 2px solid white; padding-bottom: 10px; } #menuContent button { margin: 15px 0; padding: 10px 20px; background-color: #4CAF50; color: white; border: none; border-radius: 5px; cursor: pointer; font-size: 16px; width: 80%; transition: background-color 0.3s; } #menuContent button:hover { background-color: #45a049; } #debugButton { margin: 15px 0; padding: 10px 20px; background-color: #f44336; color: white; border: none; border-radius: 5px; cursor: pointer; font-size: 16px; width: 80%; transition: background-color 0.3s; } #debugButton:hover { background-color: #d32f2f; } #positionDisplay { position: absolute; top: 10px; left: 10px; background-color: rgba(0, 0, 0, 0.7); color: white; padding: 5px; font-family: monospace; display: none; z-index: 1000; } #bottomContainer { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 10px; z-index: 1000; } #debugGUI { position: fixed; left: 10px; top: 50%; transform: translateY(-50%); width: 300px; max-height: 80vh; background-color: rgba(0, 0, 0, 0.7); color: white; padding: 10px; font-family: Arial, sans-serif; overflow-y: auto; display: none; z-index: 1001; border-radius: 5px; } #debugGUI .header { padding: 10px; background-color: rgba(50, 50, 50, 0.7); cursor: pointer; border-radius: 5px 5px 0 0; } #debugGUI .content { padding: 10px; } #debugGUI .tile { margin-bottom: 10px; padding: 5px; background-color: rgba(70, 70, 70, 0.7); cursor: pointer; border-radius: 3px; } #consoleGUI { background-color: rgba(40, 40, 40, 0.9); padding: 10px; border-radius: 3px; margin-top: 10px; width: 600px; /* Doubled from default 300px */ } #consoleOutput { height: 300px; /* Doubled from 150px */ overflow-y: auto; background-color: rgba(0, 0, 0, 0.5); color: #00ff00; font-family: monospace; padding: 5px; margin-bottom: 10px; font-size: 14px; /* Increased font size for better readability */ } #consoleInput { width: 100%; background-color: rgba(0, 0, 0, 0.5); color: white; border: none; padding: 5px; margin-bottom: 5px; font-size: 14px; /* Increased font size to match output */ } #consoleSubmit { width: 100%; background-color: rgba(0, 100, 0, 0.7); color: white; border: none; padding: 5px; cursor: pointer; } #bottomContainer { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 10px; z-index: 1000; } #inventory { display: flex; gap: 5px; } `; // Create Menu button, content div, Debug button, and output area const menuButton = document.createElement('button'); menuButton.id = 'menuButton'; menuButton.textContent = 'Menu'; parentDiv.appendChild(menuButton); // Create debug GUI const debugGUI = document.createElement('div'); debugGUI.id = 'debugGUI'; debugGUI.innerHTML = `

Console

`; document.body.appendChild(debugGUI); // Create inventory UI const inventoryDiv = document.createElement('div'); inventoryDiv.id = 'inventory'; // Create a container for inventory const bottomContainer = document.createElement('div'); bottomContainer.id = 'bottomContainer'; parentDiv.appendChild(bottomContainer); // Move inventory to the bottom container bottomContainer.appendChild(inventoryDiv); const menuContent = document.createElement('div'); menuContent.id = 'menuContent'; menuContent.innerHTML = `

Game Menu

`; parentDiv.appendChild(menuContent); // Create Settings submenu const settingsSubmenu = document.createElement('div'); settingsSubmenu.id = 'settingsSubmenu'; settingsSubmenu.style.display = 'none'; settingsSubmenu.innerHTML = `

Settings

`; menuContent.appendChild(settingsSubmenu); // Create Graphics submenu const graphicsSubmenu = document.createElement('div'); graphicsSubmenu.id = 'graphicsSubmenu'; graphicsSubmenu.style.display = 'none'; graphicsSubmenu.innerHTML = `

Graphics Settings

`; menuContent.appendChild(graphicsSubmenu); // Get the debug button reference const debugButton = document.getElementById('debugButton'); // Create controls display const controlsDisplay = document.createElement('div'); controlsDisplay.id = 'controlsDisplay'; controlsDisplay.style.display = 'none'; controlsDisplay.innerHTML = `

Game Controls

Movement

W Move forward
A Move left
S Move backward
D Move right
Space Jump

Interaction

Left Click Interact/Collect ball
Right Click Charge and throw ball
Scroll Wheel Cycle through inventory

Camera

Mouse Look around

`; menuContent.appendChild(controlsDisplay); // Add event listeners for buttons document.getElementById('resumeButton').addEventListener('click', toggleMenu); document.getElementById('settingsButton').addEventListener('click', () => { document.getElementById('settingsSubmenu').style.display = 'block'; Array.from(menuContent.children).forEach(child => { if (child.id !== 'settingsSubmenu') { child.style.display = 'none'; } }); }); document.getElementById('helpButton').addEventListener('click', () => { alert('Help menu not implemented yet'); }); document.getElementById('backButton').addEventListener('click', () => { document.getElementById('settingsSubmenu').style.display = 'none'; document.getElementById('controlsDisplay').style.display = 'none'; Array.from(menuContent.children).forEach(child => { if (child.id !== 'settingsSubmenu' && child.id !== 'controlsDisplay') { child.style.display = ''; } }); }); // Add event listener for the Controls button document.getElementById('controlsButton').addEventListener('click', () => { document.getElementById('settingsSubmenu').style.display = 'none'; document.getElementById('controlsDisplay').style.display = 'block'; }); // Add event listener for the Graphics button document.getElementById('graphicsButton').addEventListener('click', () => { document.getElementById('settingsSubmenu').style.display = 'none'; document.getElementById('graphicsSubmenu').style.display = 'block'; }); // Add event listener for the Back button in graphics submenu document.getElementById('graphicsBackButton').addEventListener('click', () => { document.getElementById('graphicsSubmenu').style.display = 'none'; document.getElementById('settingsSubmenu').style.display = 'block'; }); // Add event listener for the Party Mode button let partyMode = false; document.getElementById('partyModeButton').addEventListener('click', () => { partyMode = !partyMode; document.getElementById('partyModeButton').textContent = `Party Mode: ${partyMode ? 'ON' : 'OFF'}`; if (debugMode) { updateDebugOutput(`Party Mode ${partyMode ? 'enabled' : 'disabled'}`); } // TODO: Implement party mode effects }); // Add event listener for the Debug button document.getElementById('debugButton').addEventListener('click', () => { toggleDebugMode(); document.getElementById('debugButton').textContent = `Debug: ${debugMode ? 'ON' : 'OFF'}`; // Close the settings submenu after toggling debug mode document.getElementById('settingsSubmenu').style.display = 'none'; Array.from(menuContent.children).forEach(child => { if (child.id !== 'settingsSubmenu') { child.style.display = ''; } }); }); // Add event listener for music toggle document.getElementById('musicToggle').addEventListener('click', () => { if (backgroundMusic.isPlaying) { backgroundMusic.pause(); document.getElementById('musicToggle').textContent = 'Music: OFF'; if (debugMode) updateDebugOutput('Music paused'); } else { backgroundMusic.play(); document.getElementById('musicToggle').textContent = 'Music: ON'; if (debugMode) updateDebugOutput('Music playing'); } }); // Add event listener for music volume control document.getElementById('musicVolume').addEventListener('input', (event) => { const newVolume = event.target.value; backgroundMusic.setVolume(newVolume); if (debugMode) updateDebugOutput(`Music volume set to: ${newVolume}`); }); // Add event listener for the Close button in controls display document.getElementById('closeControlsButton').addEventListener('click', () => { document.getElementById('controlsDisplay').style.display = 'none'; document.getElementById('settingsSubmenu').style.display = 'block'; }); // Add click event listener to toggle menu visibility menuButton.addEventListener('click', toggleMenu); // Create position display element const positionDisplay = document.createElement('div'); positionDisplay.id = 'positionDisplay'; parentDiv.appendChild(positionDisplay); // Toggle debug mode let debugMode = false; function toggleDebugMode() { debugMode = !debugMode; positionDisplay.style.display = debugMode ? 'block' : 'none'; debugButton.textContent = `Debug: ${debugMode ? 'ON' : 'OFF'}`; debugGUI.style.display = debugMode ? 'flex' : 'none'; // Update visibility for all debug elements updateDebugVisibility(balls); updateDebugVisibility(inventory); updateDebugObjects(); scene.updateMatrixWorld(true); // Close the menu after toggling debug mode toggleMenu(); // Log debug mode state console.log(`Debug mode ${debugMode ? 'enabled' : 'disabled'}`); } // Modify the event listener for debug GUI expansion debugGUI.querySelector('.header').addEventListener('click', () => { const content = debugGUI.querySelector('.content'); content.style.display = content.style.display === 'none' ? 'block' : 'none'; }); // Add event listener for debug GUI expansion debugGUI.querySelector('.header').addEventListener('click', () => { debugGUI.classList.toggle('expanded'); }); // Add event listener for console tile debugGUI.querySelector('#consoleTile').addEventListener('click', () => { const consoleGUI = document.getElementById('consoleGUI'); consoleGUI.style.display = consoleGUI.style.display === 'none' ? 'block' : 'none'; }); // Add event listener for console submit button document.getElementById('consoleSubmit').addEventListener('click', () => { const consoleInput = document.getElementById('consoleInput'); const consoleOutput = document.getElementById('consoleOutput'); const command = consoleInput.value.trim(); if (command) { // Log the command logToConsole(`> ${command}`); // Process the command processConsoleCommand(command); consoleInput.value = ''; consoleOutput.scrollTop = consoleOutput.scrollHeight; } }); function processConsoleCommand(command) { switch (command.toLowerCase()) { case 'help': logToConsole('Available commands: help, clear, status, spawn, drop'); break; case 'clear': document.getElementById('consoleOutput').innerHTML = ''; break; case 'status': logGameStatus(); break; case 'spawn': spawnBall(); logToConsole('Attempted to spawn a new ball.'); break; case 'drop': dropBall(); logToConsole('Attempted to drop a ball from inventory.'); break; default: logToConsole('Unknown command. Type "help" for available commands.'); } } function logToConsole(message) { const consoleOutput = document.getElementById('consoleOutput'); consoleOutput.innerHTML += message + '
'; consoleOutput.scrollTop = consoleOutput.scrollHeight; } function logGameStatus() { const status = ` Character Position: (${character ? character.position.x.toFixed(2) : 'N/A'}, ${character ? character.position.y.toFixed(2) : 'N/A'}, ${character ? character.position.z.toFixed(2) : 'N/A'}) Inventory Size: ${inventory.length}/${maxInventorySize} Balls in Scene: ${balls.length} Is Grounded: ${isGrounded} Current Jumps: ${currentJumps} Selected Inventory Slot: ${selectedInventorySlot + 1} `; logToConsole(status); } // Add event listener for Enter key in console input document.getElementById('consoleInput').addEventListener('keypress', (e) => { if (e.key === 'Enter') { document.getElementById('consoleSubmit').click(); } }); function updateDebugVisibility(items) { items.forEach(item => { if (item.mesh) { item.mesh.userData.debugLabel.visible = debugMode; item.mesh.userData.debugVisual.visible = debugMode; } }); } function updateDebugObjects() { const debugSphere = scene.getObjectByName('debugInteractionSphere'); if (debugSphere) { debugSphere.visible = debugMode; } const doorTrigger = scene.getObjectByName('doorTrigger'); if (doorTrigger) { doorTrigger.visible = debugMode; updateDoorTriggerLabel(debugMode); } else { updateDebugOutput('Door trigger not found in the scene'); } } // These lines should be removed or commented out // Create ball info display element const ballInfoDisplay = document.createElement('div'); ballInfoDisplay.id = 'ballInfoDisplay'; parentDiv.appendChild(ballInfoDisplay); // Create ball color display element const ballColorDisplay = document.createElement('div'); ballColorDisplay.id = 'ballColorDisplay'; ballInfoDisplay.appendChild(ballColorDisplay); // Create ball in hand display element const ballInHandDisplay = document.createElement('div'); ballInHandDisplay.id = 'ballInHandDisplay'; ballInfoDisplay.appendChild(ballInHandDisplay); // Create ball removed message element const ballRemovedMessage = document.createElement('div'); ballRemovedMessage.id = 'ballRemovedMessage'; ballRemovedMessage.textContent = 'Ball removed from character\'s hand'; parentDiv.appendChild(ballRemovedMessage); // Create ball picked up message element const ballPickedUpMessage = document.createElement('div'); ballPickedUpMessage.id = 'ballPickedUpMessage'; ballPickedUpMessage.textContent = 'Ball picked up from the ground'; parentDiv.appendChild(ballPickedUpMessage); // Initialize inventory UI updateInventoryUI(); // 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); // 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'; }; 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, -20, 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'); // Define physics material for the ball const ballPhysMaterial = new CANNON.Material('ballMaterial'); // Create contact material between ball and ground const ballGroundContactMaterial = new CANNON.ContactMaterial( ballPhysMaterial, groundPhysMaterial, { friction: 0.1, // Increased from 0.05 for more grip restitution: 0.7, // Reduced from 0.95 for less bounce } ); world.addContactMaterial(ballGroundContactMaterial); // Create contact material between balls const ballBallContactMaterial = new CANNON.ContactMaterial( ballPhysMaterial, ballPhysMaterial, { friction: 0.1, // Increased from 0.05 for less sliding restitution: 0.5, // Reduced from 0.98 for less bounce between balls } ); world.addContactMaterial(ballBallContactMaterial); 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(12, 12, -10); // Moved 12 units to the right and 4 units up // Camera settings for character following const cameraSettings = { offset: new THREE.Vector3(12, 12, -10), // Moved 12 units to the right and 4 units up smoothSpeed: 0.1, rotationSpeed: 0.002, // Reduced for smoother mouse look minPolarAngle: 0.3, // Increased to prevent looking too far down from higher position maxPolarAngle: Math.PI - 0.3, // Decreased to prevent looking too far up from higher position minDistance: 10, // Increased minimum distance due to higher position maxDistance: 35, // Increased maximum distance for better overview minFollowDistance: 14, // Increased minimum follow distance }; // Mouse look variables let mouseLook = new THREE.Vector2(); let isPointerLocked = false; // 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); // Create sky dome with fixed color 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: new THREE.Color(0x87CEEB) // Sky blue color }, bottomColor: { value: new THREE.Color(0xffffff) // White ground reflection }, 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 the updateSkyColors function entirely // Remove OrbitControls setup // Add pointer lock event listeners renderer.domElement.addEventListener('click', () => { renderer.domElement.requestPointerLock(); }); document.addEventListener('pointerlockchange', () => { isPointerLocked = document.pointerLockElement === renderer.domElement; }); // Add mouse move event listener for looking around renderer.domElement.addEventListener('mousemove', (event) => { if (isPointerLocked) { mouseLook.x -= event.movementX * cameraSettings.rotationSpeed; mouseLook.y -= event.movementY * cameraSettings.rotationSpeed; // Clamp vertical look mouseLook.y = Math.max(-Math.PI / 2, Math.min(Math.PI / 2, mouseLook.y)); } }); // Add custom wheel event listener renderer.domElement.addEventListener('wheel', (event) => { event.preventDefault(); if (event.deltaY < 0) { // Scroll up selectedInventorySlot = (selectedInventorySlot - 1 + maxInventorySize) % maxInventorySize; } else { // Scroll down selectedInventorySlot = (selectedInventorySlot + 1) % maxInventorySize; } updateInventoryUI(); if (debugMode) updateDebugOutput(`Selected inventory slot: ${selectedInventorySlot + 1}`); }, { passive: false }); // 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/3D_playground_grass_diffuse.png?ULIi'); const normalMap = textureLoader.load('https://play.rosebud.ai/assets/3D_playground_grass_normal.png?amJc'); 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; } // Function to create a fence around the map function createFence() { const fenceHeight = 8; const postThickness = 0.5; const railThickness = 0.3; const fenceColor = 0x8B4513; // SaddleBrown color const fenceMaterial = new THREE.MeshStandardMaterial({ color: fenceColor }); const mapSize = 200; // This should match the size used in createTerrain() const halfSize = mapSize / 2; const postSpacing = 10; // Distance between posts const createPost = (x, z) => { const postGeometry = new THREE.BoxGeometry(postThickness, fenceHeight, postThickness); const postMesh = new THREE.Mesh(postGeometry, fenceMaterial); postMesh.position.set(x, fenceHeight / 2, z); postMesh.castShadow = true; postMesh.receiveShadow = true; scene.add(postMesh); const postShape = new CANNON.Box(new CANNON.Vec3(postThickness / 2, fenceHeight / 2, postThickness / 2)); const postBody = new CANNON.Body({ mass: 0 }); // Static body postBody.addShape(postShape); postBody.position.set(x, fenceHeight / 2, z); world.addBody(postBody); }; const createRail = (startX, startZ, endX, endZ, height) => { const length = Math.sqrt(Math.pow(endX - startX, 2) + Math.pow(endZ - startZ, 2)); const railGeometry = new THREE.BoxGeometry(length, railThickness, railThickness); const railMesh = new THREE.Mesh(railGeometry, fenceMaterial); const midX = (startX + endX) / 2; const midZ = (startZ + endZ) / 2; railMesh.position.set(midX, height, midZ); const angle = Math.atan2(endZ - startZ, endX - startX); railMesh.rotation.y = angle; railMesh.castShadow = true; railMesh.receiveShadow = true; scene.add(railMesh); const railShape = new CANNON.Box(new CANNON.Vec3(length / 2, railThickness / 2, railThickness / 2)); const railBody = new CANNON.Body({ mass: 0 }); // Static body railBody.addShape(railShape); railBody.position.set(midX, height, midZ); railBody.quaternion.setFromAxisAngle(new CANNON.Vec3(0, 1, 0), angle); world.addBody(railBody); }; // Create fence sections for (let i = -halfSize; i <= halfSize; i += postSpacing) { // Front and back createPost(i, -halfSize); createPost(i, halfSize); if (i < halfSize) { createRail(i, -halfSize, i + postSpacing, -halfSize, fenceHeight * 0.33); createRail(i, -halfSize, i + postSpacing, -halfSize, fenceHeight * 0.66); createRail(i, halfSize, i + postSpacing, halfSize, fenceHeight * 0.33); createRail(i, halfSize, i + postSpacing, halfSize, fenceHeight * 0.66); } // Left and right createPost(-halfSize, i); createPost(halfSize, i); if (i < halfSize) { createRail(-halfSize, i, -halfSize, i + postSpacing, fenceHeight * 0.33); createRail(-halfSize, i, -halfSize, i + postSpacing, fenceHeight * 0.66); createRail(halfSize, i, halfSize, i + postSpacing, fenceHeight * 0.33); createRail(halfSize, i, halfSize, i + postSpacing, fenceHeight * 0.66); } } } // Function to create a small house function createHouse() { const houseGroup = new THREE.Group(); // House base const baseGeometry = new THREE.BoxGeometry(10, 0.5, 10); const baseMaterial = new THREE.MeshStandardMaterial({ color: 0x8B4513 }); const base = new THREE.Mesh(baseGeometry, baseMaterial); base.position.y = 0.25; houseGroup.add(base); // Walls const wallGeometry = new THREE.BoxGeometry(10, 6, 10); const wallMaterial = new THREE.MeshStandardMaterial({ color: 0xD2B48C }); const walls = new THREE.Mesh(wallGeometry, wallMaterial); walls.position.y = 3.25; houseGroup.add(walls); // Roof const roofGeometry = new THREE.ConeGeometry(7.5, 5, 4); const roofMaterial = new THREE.MeshStandardMaterial({ color: 0x8B0000 }); const roof = new THREE.Mesh(roofGeometry, roofMaterial); roof.position.y = 8.75; roof.rotation.y = Math.PI / 4; houseGroup.add(roof); // Door const doorGeometry = new THREE.PlaneGeometry(2, 4); const doorMaterial = new THREE.MeshStandardMaterial({ color: 0x8B4513 }); const door = new THREE.Mesh(doorGeometry, doorMaterial); door.position.set(0, 2.25, 5.01); houseGroup.add(door); // Create trigger visual for debug mode const triggerGeometry = new THREE.BoxGeometry(3, 4, 2); const triggerMaterial = new THREE.MeshBasicMaterial({ color: 0xFF0000, // Bright red color transparent: true, opacity: 0.5, // Increased opacity for better visibility }); const triggerMesh = new THREE.Mesh(triggerGeometry, triggerMaterial); triggerMesh.position.set(0, 2, 6.5); // Positioned in front of the door triggerMesh.name = 'doorTrigger'; // Assign a name for easy reference triggerMesh.visible = debugMode; // Set initial visibility based on debug mode scene.add(triggerMesh); // Add directly to the scene instead of houseGroup // Create Cannon.js body for the trigger const triggerShape = new CANNON.Box(new CANNON.Vec3(1.5, 2, 1)); const triggerBody = new CANNON.Body({ mass: 0, // Static body shape: triggerShape, isTrigger: true // Set as trigger }); triggerBody.position.set(0, 2, 6.5); triggerBody.collisionResponse = false; // Doesn't affect physics simulation // Windows const windowGeometry = new THREE.PlaneGeometry(2, 2); const windowMaterial = new THREE.MeshStandardMaterial({ color: 0x87CEEB }); const window1 = new THREE.Mesh(windowGeometry, windowMaterial); window1.position.set(-3, 3.5, 5.01); houseGroup.add(window1); const window2 = window1.clone(); window2.position.set(3, 3.5, 5.01); houseGroup.add(window2); // Set random position on the map const mapSize = 200; const halfSize = mapSize / 2; const x = Math.random() * (mapSize - 20) - halfSize + 10; // 10 units from the edge const z = Math.random() * (mapSize - 20) - halfSize + 10; houseGroup.position.set(x, 0, z); // Add house to the scene scene.add(houseGroup); // Adjust trigger mesh position based on house position triggerMesh.position.set(x, 2, z + 6.5); // Add collision body for the house const houseShape = new CANNON.Box(new CANNON.Vec3(5, 3, 5)); const houseBody = new CANNON.Body({ mass: 0, // Static body shape: houseShape, position: new CANNON.Vec3(x, 3, z) }); world.addBody(houseBody); // Adjust trigger position based on house position triggerBody.position.set(x, 2, z + 6.5); world.addBody(triggerBody); updateDebugOutput(`House spawned at position: (${x.toFixed(2)}, 0, ${z.toFixed(2)})`); updateDebugOutput(`Door trigger spawned at position: (${triggerBody.position.x.toFixed(2)}, ${triggerBody.position.y.toFixed(2)}, ${triggerBody.position.z.toFixed(2)})`); // Return the trigger body for later use return { houseGroup, triggerBody }; } // Setup improved lighting system const sunLight = new THREE.DirectionalLight(0xffffff, 2.0); sunLight.position.set(-50, 100, -50); sunLight.castShadow = true; // Function to update sunlight color function updateSunlightColor() { if (partyMode) { // Rapidly change colors in party mode const hue = (Date.now() % 2000) / 2000; const color = new THREE.Color().setHSL(hue, 1, 0.5); uniforms.topColor.value.copy(color); sunLight.color.copy(color); } else { sunLight.color.copy(uniforms.topColor.value); } } 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(0x87CEEB, 0xFFFFFF, 0.6); scene.add(hemiLight); // ========================= // 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, }; // Character configuration const characterConfig = { // Movement settings groundSpeed: 30, airSpeed: 25, 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 spawn point const spawnPoint = new THREE.Vector3(0, characterConfig.startHeight, 0); // 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); // Create contact material between ball and character const ballCharacterContactMaterial = new CANNON.ContactMaterial( ballPhysMaterial, characterPhysMaterial, { friction: 0.1, // Increased from 0.05 for more interaction restitution: 0.3, // Reduced from 0.9 for less bounce off character } ); world.addContactMaterial(ballCharacterContactMaterial); // Add keyboard event listeners window.addEventListener('keydown', (event) => { if (event.code === 'Space') { keysPressed.space = true; } else if (event.key.toLowerCase() === 'a') { keysPressed.d = true; } else if (event.key.toLowerCase() === 'd') { keysPressed.a = 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.key.toLowerCase() === 'a') { keysPressed.d = false; } else if (event.key.toLowerCase() === 'd') { keysPressed.a = false; } else if (keysPressed.hasOwnProperty(event.key.toLowerCase())) { keysPressed[event.key.toLowerCase()] = false; } }); // Add listener for toggling the menu window.addEventListener('keydown', (event) => { if (event.code === 'KeyM') { toggleMenu(); } }); // Add variables for ball charging let isCharging = false; let chargeStartTime = 0; let maxChargeTime = 2000; // Maximum charge time in milliseconds // Modify right-click listeners for charging and dropping the ball window.addEventListener('mousedown', (event) => { if (event.button === 2 && inventory[selectedInventorySlot]) { // Right mouse button and selected slot has ball event.preventDefault(); isCharging = true; chargeStartTime = performance.now(); if (debugMode) updateDebugOutput(`Started charging ball throw for slot ${selectedInventorySlot + 1}`); } }); window.addEventListener('mouseup', (event) => { if (event.button === 2) { // Right mouse button event.preventDefault(); if (isCharging && inventory[selectedInventorySlot]) { const chargeTime = Math.min(performance.now() - chargeStartTime, maxChargeTime); dropBall(chargeTime); isCharging = false; if (debugMode) updateDebugOutput(`Ball thrown from slot ${selectedInventorySlot + 1} with charge time: ${chargeTime.toFixed(2)}ms`); } else if (debugMode) { if (!inventory[selectedInventorySlot]) { updateDebugOutput(`Attempted to throw, but no ball in selected slot ${selectedInventorySlot + 1}`); } else if (!isCharging) { updateDebugOutput(`Attempted to throw without charging from slot ${selectedInventorySlot + 1}`); } } } isCharging = false; // Reset charging state regardless }); window.addEventListener('contextmenu', (event) => { event.preventDefault(); // Prevent the default context menu }); // Remove the existing wheel event listener // Function to toggle the menu visibility function toggleMenu() { const menuContent = document.getElementById('menuContent'); if (menuContent) { menuContent.style.display = menuContent.style.display === 'none' ? 'block' : 'none'; } } // Load the character model const characterUrl = 'https://play.rosebud.ai/assets/3D_playground_character.glb?cbX3'; gltfLoader.load(characterUrl, (gltf) => { const model = gltf.scene; model.scale.set( characterConfig.scale, characterConfig.scale, characterConfig.scale ); // Create a reference point for holding the ball const ballHolder = new THREE.Object3D(); ballHolder.position.set(1.5, 5, 1); // Adjust these values to position the ball correctly model.add(ballHolder); model.userData.ballHolder = ballHolder; // Log the position of the ballHolder for debugging updateDebugOutput(`Ball holder position: (${ballHolder.position.x}, ${ballHolder.position.y}, ${ballHolder.position.z})`); // 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); // NPC creation npc = createNPC(); scene.add(npc.mesh); world.addBody(npc.body); // 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); }); // Declare npc in the global scope let npc; // Update character movement function updateCharacterMovement(deltaTime) { if (!character || !characterBody) return; // Update ball position in front of the character updateBallInHand(); // Update character rotation based on mouse look character.rotation.y = mouseLook.x; // Get character's forward and right vectors const characterForward = new THREE.Vector3(0, 0, 1).applyQuaternion(character.quaternion); const characterRight = new THREE.Vector3(1, 0, 0).applyQuaternion(character.quaternion); // Calculate move direction relative to character's facing direction moveDirection.set(0, 0, 0); // Add movement input if (keysPressed.w) moveDirection.add(characterForward); if (keysPressed.s) moveDirection.sub(characterForward); if (keysPressed.a) moveDirection.sub(characterRight); if (keysPressed.d) moveDirection.add(characterRight); // 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); // Check if the character is actually moving const isMoving = moveDirection.length() > 0 || Math.abs(characterBody.velocity.y) > 0.01 || currentVelocity.length() > 0.01; // 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); } else { walkAction.stop(); idleAction.play(); idleAction.setEffectiveWeight(1); } } } // Update animation mixer if (mixer) { mixer.update(deltaTime); } } // Update camera to follow the character function updateCamera() { if (!character) return; // Calculate the desired camera position const cameraOffset = new THREE.Vector3(0, cameraSettings.offset.y, cameraSettings.offset.z); // Add audio listener to the camera if (!camera.children.includes(listener)) { camera.add(listener); } cameraOffset.applyQuaternion(character.quaternion); const desiredPosition = character.position.clone().add(cameraOffset); // Smoothly move the camera to the desired position camera.position.lerp(desiredPosition, cameraSettings.smoothSpeed); // Calculate the look target (slightly above the character) const lookTarget = character.position.clone().add(new THREE.Vector3(0, characterConfig.height * 0.8, 0)); // Apply vertical mouse look const verticalLookOffset = new THREE.Vector3(0, 0, -1).applyAxisAngle(new THREE.Vector3(1, 0, 0), mouseLook.y); lookTarget.add(verticalLookOffset); // Make the camera look at the target camera.lookAt(lookTarget); } // ========================= // End of Character Integration // ========================= // Create initial scene const terrain = createTerrain(); createFence(); // Add this line to create the fence const { triggerBody } = createHouse(); // Add this line to spawn a house and get the trigger body /** * Variables for ball spawning */ // Remove or comment out these lines // const ballSpawnInterval = 1; // seconds between ball spawns // let timeSinceLastBall = 0; const balls = []; // const maxBalls = 20; // This is no longer needed as we're only spawning one ball /** * Function to spawn a new bouncy ball with a random color */ function spawnBall() { if (balls.length > 0 || inventory.length > 0) { updateDebugOutput("A ball already exists. Cannot spawn more."); return; } // Set ball size (radius) const ballSize = randomBetween(1, 3); // Random ball size // Create a sphere geometry with the specified size const radius = ballSize; const widthSegments = 32; const heightSegments = 32; const ballGeometry = new THREE.SphereGeometry(radius, widthSegments, heightSegments); // Create a material with a random color const randomColor = new THREE.Color(Math.random(), Math.random(), Math.random()); const ballMaterial = new THREE.MeshStandardMaterial({ color: randomColor }); const ballMesh = new THREE.Mesh(ballGeometry, ballMaterial); ballMesh.castShadow = true; ballMesh.receiveShadow = true; // Set initial position - spawn randomly on the map const mapSize = 200; // This should match the size used in createTerrain() const halfSize = mapSize / 2; const x = Math.random() * mapSize - halfSize; const z = Math.random() * mapSize - halfSize; const y = radius + 0.1; // Place the ball just above the ground ballMesh.position.set(x, y, z); scene.add(ballMesh); // Create and add the debug label createBallLabel(ballMesh); // Create debug visual (yellow wireframe sphere) const debugGeometry = new THREE.SphereGeometry(radius, 16, 16); const debugMaterial = new THREE.MeshBasicMaterial({ color: 0xffff00, wireframe: true, depthTest: false, depthWrite: false, transparent: true }); const debugMesh = new THREE.Mesh(debugGeometry, debugMaterial); debugMesh.visible = debugMode; ballMesh.add(debugMesh); ballMesh.userData.debugVisual = debugMesh; // Set renderOrder to ensure the debug visual is rendered on top of the ball debugMesh.renderOrder = 2; // Get the color hex value const colorHex = '#' + ballMaterial.color.getHexString(); // Debug output for color if (debugMode) updateDebugOutput(`Ball spawned`); // Create physics body with the same size const ballShape = new CANNON.Sphere(radius); const mass = 5; const ballBody = new CANNON.Body({ mass: mass, shape: ballShape, material: ballPhysMaterial, position: new CANNON.Vec3(x, y, z), }); // Add a small upward velocity to prevent immediate sinking ballBody.velocity.set(0, 1, 0); ballBody.linearDamping = 0.2; ballBody.angularDamping = 0.2; // Add ball body to the world world.addBody(ballBody); // Store the balls in an array const newBall = { mesh: ballMesh, body: ballBody, spawnTime: Date.now(), // Add spawn time for debugging wasRemovedFromScene: false // Add this flag }; balls.push(newBall); if (debugMode) updateDebugOutput(`Ball spawned with color: ${colorHex}`); // Check if the character can immediately collect the ball if (character && characterBody && inventory.length === 0) { const characterPos = new THREE.Vector3(characterBody.position.x, characterBody.position.y, characterBody.position.z); const ballPos = new THREE.Vector3(x, y, z); const distance = characterPos.distanceTo(ballPos); if (distance <= interactionRange) { if (debugMode) updateDebugOutput("Character is within range of spawned ball. Attempting immediate collection."); tryCollectBall(balls.length - 1); // Try to collect the last ball in the array (the one we just added) } } } // Function to check if a ball can be collected and update inventory function tryCollectBall(ballIndex) { if (debugMode) updateDebugOutput(`Attempting to collect ball at index: ${ballIndex}`); if (inventory.length < maxInventorySize) { // Collect if inventory is not full const ball = balls[ballIndex]; // Ensure the ball is dynamic before collection makeBallDynamic(ball); const ballColor = ball.mesh.material.color; const ballColorHex = '#' + ballColor.getHexString(); const characterPos = new THREE.Vector3( characterBody.position.x, characterBody.position.y + characterConfig.height / 2, characterBody.position.z ); const ballPos = new THREE.Vector3(ball.body.position.x, ball.body.position.y, ball.body.position.z); const distance = characterPos.distanceTo(ballPos); if (debugMode) { updateDebugOutput(`Ball to be collected: position (${ball.body.position.x.toFixed(2)}, ${ball.body.position.y.toFixed(2)}, ${ball.body.position.z.toFixed(2)})`); updateDebugOutput(`Character position: (${characterPos.x.toFixed(2)}, ${characterPos.y.toFixed(2)}, ${characterPos.z.toFixed(2)})`); updateDebugOutput(`Distance to ball: ${distance.toFixed(2)}`); } // Store the original scale and color of the ball const originalScale = ball.mesh.scale.clone(); const originalColor = ballColor.clone(); inventory.push({ mesh: ball.mesh, body: ball.body, originalScale: originalScale, originalColor: originalColor }); updateDebugOutput(`Ball added to inventory. New inventory size: ${inventory.length}`); // Remove ball from the scene and physics world scene.remove(ball.mesh); world.removeBody(ball.body); balls.splice(ballIndex, 1); updateDebugOutput(`Ball removed from scene and physics world. Remaining balls: ${balls.length}`); ball.mesh.name = "inventoryBall"; // Give it a name for easy removal later updateDebugOutput(`Ball collected and added to inventory.`); updateInventoryUI(); ballJustPickedUp = true; // Set flag to true when ball is picked up updateBallInHand(); updateDebugOutput("Inventory UI updated"); // Ensure the debug label and visual are visible/invisible based on debug mode if (ball.mesh.userData.debugLabel) { ball.mesh.userData.debugLabel.visible = debugMode; } if (ball.mesh.userData.debugVisual) { ball.mesh.userData.debugVisual.visible = debugMode; } // Display ball picked up message in GUI when in debug mode if (debugMode) { const ballPickedUpMessage = document.getElementById('ballPickedUpMessage'); ballPickedUpMessage.textContent = `Ball picked up from the ground. Position: (${ballPos.x.toFixed(2)}, ${ballPos.y.toFixed(2)}, ${ballPos.z.toFixed(2)})`; ballPickedUpMessage.style.display = 'block'; setTimeout(() => { ballPickedUpMessage.style.display = 'none'; }, 3000); // Hide the message after 3 seconds } } else { updateDebugOutput("Inventory full! Cannot collect more balls."); } } // Function to update debug output function dropBall(chargeTime = 0) { if (character && inventory[selectedInventorySlot]) { const ball = inventory[selectedInventorySlot]; // Mark the ball as recently thrown ball.lastThrown = Date.now(); // Calculate drop position in front of the character const dropDistance = 3; // Distance in front of the character to drop the ball const characterForward = new THREE.Vector3(); character.getWorldDirection(characterForward); const dropPosition = character.position.clone() .add(characterForward.multiplyScalar(dropDistance)) .add(new THREE.Vector3(0, characterConfig.height * 0.75, 0)); // Adjusted vertical position // Calculate throw force based on charge time const baseForce = 5; const maxForce = 20; const chargeRatio = Math.min(chargeTime / maxChargeTime, 1); const throwForce = baseForce + (maxForce - baseForce) * chargeRatio; const gracePeriod = 1.5; // 1.5 seconds grace period if (debugMode) { updateDebugOutput(`Ball position before drop: (${dropPosition.x.toFixed(2)}, ${dropPosition.y.toFixed(2)}, ${dropPosition.z.toFixed(2)})`); } if (debugMode) { // Update ball color display only in debug mode const ballColorDisplay = document.getElementById('ballColorDisplay'); const ballColor = ball.mesh.material.color; const ballColorHex = '#' + ballColor.getHexString(); ballColorDisplay.textContent = `Dropped Ball Color: ${ballColorHex}`; ballColorDisplay.style.display = 'block'; // Set a timeout to hide the color display after 3 seconds setTimeout(() => { ballColorDisplay.style.display = 'none'; }, 3000); } // Reset the ball's scale to its original size ball.mesh.scale.copy(ball.originalScale); // Set the ball's position to the drop position ball.mesh.position.copy(dropPosition); // Ensure the ball is added to the scene if (!scene.getObjectById(ball.mesh.id)) { scene.add(ball.mesh); if (debugMode) updateDebugOutput("Ball added to scene"); } else { if (debugMode) updateDebugOutput("Ball already in scene"); } ball.mesh.visible = true; // Additional logging if (debugMode) { updateDebugOutput(`Ball mesh visibility: ${ball.mesh.visible}`); updateDebugOutput(`Ball mesh in scene: ${scene.getObjectById(ball.mesh.id) !== undefined}`); } // Create a new physics body for the ball const ballBody = new CANNON.Body({ mass: 5, shape: new CANNON.Sphere(ball.mesh.geometry.parameters.radius), material: ballPhysMaterial, position: new CANNON.Vec3(dropPosition.x, dropPosition.y, dropPosition.z), linearDamping: 0.2, angularDamping: 0.2 }); // Set initial velocity for the throw const throwVelocity = new CANNON.Vec3( characterForward.x * throwForce, throwForce * 0.5, // Upward velocity characterForward.z * throwForce ); ballBody.velocity.copy(throwVelocity); if (debugMode) { updateDebugOutput(`Ball dropped at position: (${dropPosition.x.toFixed(2)}, ${dropPosition.y.toFixed(2)}, ${dropPosition.z.toFixed(2)})`); updateDebugOutput(`Throw velocity: (${throwVelocity.x.toFixed(2)}, ${throwVelocity.y.toFixed(2)}, ${throwVelocity.z.toFixed(2)})`); } // Remove the ball from inventory inventory.pop(); const droppedBall = { mesh: ball.mesh, body: ballBody, droppedAt: Date.now(), graceEndTime: Date.now() + gracePeriod * 1000, gracePeriodMessageId: null // We'll use this to track the grace period message }; // Add the ball to the balls array balls.push(droppedBall); // Add the ball's physics body to the world world.addBody(ballBody); // Add the ball's physics body to the world world.addBody(ballBody); updateInventoryUI(); updateBallInHand(); const debugMessage = `Ball dropped at position: (${dropPosition.x.toFixed(2)}, ${dropPosition.y.toFixed(2)}, ${dropPosition.z.toFixed(2)})`; updateDebugOutput(debugMessage); updateDebugOutput(`Balls in scene: ${balls.length}, Inventory: ${inventory.length}`); // Display initial grace period message and store its ID droppedBall.gracePeriodMessageId = updateDebugOutput(`Grace period: ${gracePeriod.toFixed(2)} seconds left`); if (ball.mesh.userData.debugLabel) { ball.mesh.userData.debugLabel.visible = debugMode; } // Check ball position after a short delay setTimeout(() => { const finalPosition = new THREE.Vector3(); ball.mesh.getWorldPosition(finalPosition); const isOnMap = finalPosition.y >= -10; const isVisible = ball.mesh.visible; const isInScene = scene.getObjectById(ball.mesh.id) !== undefined; const opacity = ball.mesh.material.opacity; const finalDebugMessage = `Ball status after drop: Position: (${finalPosition.x.toFixed(2)}, ${finalPosition.y.toFixed(2)}, ${finalPosition.z.toFixed(2)}) On Map: ${isOnMap} Visible: ${isVisible} In Scene: ${isInScene} Opacity: ${opacity} Color: ${ball.mesh.material.color.getHexString()}`; updateDebugOutput(finalDebugMessage); if (finalPosition.distanceTo(dropPosition) < 0.1) { updateDebugOutput("WARNING: Ball doesn't appear to have moved after dropping. Check physics simulation."); } const velocity = ballBody.velocity; updateDebugOutput(`Ball velocity: (${velocity.x.toFixed(2)}, ${velocity.y.toFixed(2)}, ${velocity.z.toFixed(2)})`); // Additional check to ensure the ball is in the scene if (!isInScene) { updateDebugOutput("WARNING: Ball mesh is not in the scene after dropping!"); scene.add(ball.mesh); } // Log the map boundaries updateDebugOutput(`Map boundaries: X: -100 to 100, Z: -100 to 100, Y < -10 is off map`); }, 100); } else { updateDebugOutput("No ball to drop."); } } // Function to update the inventory UI function updateInventoryUI() { const inventoryDiv = document.getElementById('inventory'); inventoryDiv.innerHTML = ''; for (let i = 0; i < maxInventorySize; i++) { const slot = document.createElement('div'); slot.className = 'inventory-slot'; if (i === selectedInventorySlot) { slot.classList.add('selected-slot'); } if (i < inventory.length) { const ball = inventory[i]; slot.style.backgroundColor = 'rgba(0, 0, 0, 0.7)'; // Set a dark background // Create a canvas for the ball icon const canvas = document.createElement('canvas'); canvas.width = 40; // Match the slot size canvas.height = 40; const ctx = canvas.getContext('2d'); // Draw the ball ctx.beginPath(); ctx.arc(20, 20, 15, 0, 2 * Math.PI); ctx.fillStyle = `#${ball.mesh.material.color.getHexString()}`; ctx.fill(); // Add a slight shine effect const gradient = ctx.createRadialGradient(15, 15, 0, 15, 15, 15); gradient.addColorStop(0, 'rgba(255, 255, 255, 0.8)'); gradient.addColorStop(0.5, 'rgba(255, 255, 255, 0)'); ctx.fillStyle = gradient; ctx.fill(); // Add the canvas to the slot slot.appendChild(canvas); } else { slot.style.backgroundColor = 'rgba(0, 0, 0, 0.5)'; // Empty slot } inventoryDiv.appendChild(slot); } updateDebugOutput(`Inventory UI updated. Current inventory size: ${inventory.length}`); } let lastLoggedPosition = new THREE.Vector3(); let ballJustPickedUp = false; const positionThreshold = 0.1; // Minimum distance to log a new position function updateBallInHand() { const ballInfoDisplay = document.getElementById('ballInfoDisplay'); const ballColorDisplay = document.getElementById('ballColorDisplay'); const ballInHandDisplay = document.getElementById('ballInHandDisplay'); const ballRemovedMessage = document.getElementById('ballRemovedMessage'); if (inventory.length > 0 && character) { inventory.forEach((ball, index) => { // Set the ball's scale const scaleFactor = 0.5; // Increased for better visibility ball.mesh.scale.set(scaleFactor, scaleFactor, scaleFactor); // Position the ball in front of the character const offsetDistance = 3 - index * 0.5; // Adjust distance based on index const offsetHeight = 2 + index * 0.5; // Adjust height based on index // Get the character's forward direction const characterForward = new THREE.Vector3(0, 0, 1).applyQuaternion(character.quaternion); // Calculate the ball's position const ballPosition = character.position.clone() .add(characterForward.multiplyScalar(offsetDistance)) .add(new THREE.Vector3(0, offsetHeight, 0)); ball.mesh.position.copy(ballPosition); ball.mesh.visible = true; // Ensure the ball is in the scene if (!scene.getObjectById(ball.mesh.id)) { scene.add(ball.mesh); } }); if (debugMode) { // Update ball color display only in debug mode const lastBall = inventory[inventory.length - 1]; const ballColor = lastBall.mesh.material.color; const ballColorHex = '#' + ballColor.getHexString(); ballColorDisplay.textContent = `Ball Color: ${ballColorHex}`; ballInHandDisplay.textContent = `Balls in Hand: ${inventory.length}`; ballInfoDisplay.style.display = 'block'; } else { ballInfoDisplay.style.display = 'none'; } ballRemovedMessage.style.display = 'none'; // Get the actual world position of the last ball const lastBall = inventory[inventory.length - 1]; const worldPosition = new THREE.Vector3(); lastBall.mesh.getWorldPosition(worldPosition); // Update last logged position and reset flag lastLoggedPosition.copy(worldPosition); ballJustPickedUp = false; } else { ballInfoDisplay.style.display = 'none'; // If there's no ball in the inventory, check if we need to remove it from the scene const ballToRemove = scene.getObjectByName("inventoryBall"); if (ballToRemove) { scene.remove(ballToRemove); if (debugMode) { ballRemovedMessage.style.display = 'block'; // Hide the message after 3 seconds setTimeout(() => { ballRemovedMessage.style.display = 'none'; }, 3000); } } } } // Add these variables at the top of your script, after other global variable declarations let previousBallCount = 0; let previousInventoryCount = 0; let lastTime = performance.now(); let frameCount = 0; let fpsUpdateInterval = 1000; // Update FPS every second let lastFpsUpdate = 0; let currentFps = 60; function animate() { requestAnimationFrame(animate); const currentTime = performance.now(); const deltaTime = Math.min((currentTime - lastTime) / 1000, 0.1); lastTime = currentTime; // FPS calculation frameCount++; if (currentTime - lastFpsUpdate > fpsUpdateInterval) { currentFps = Math.round((frameCount * 1000) / (currentTime - lastFpsUpdate)); frameCount = 0; lastFpsUpdate = currentTime; if (debugMode) { updateDebugOutput(`Current FPS: ${currentFps}`); } } if (assetsLoaded) { world.step(deltaTime); updateSunlightColor(); updateCharacterMovement(deltaTime); updateCamera(); if (character && characterBody) { // Check if the character is actually moving const isMoving = moveDirection.length() > 0 || Math.abs(characterBody.velocity.y) > 0.01 || new THREE.Vector2(characterBody.velocity.x, characterBody.velocity.z).length() > 0.01; if (isMoving) { character.position.copy(characterBody.position); if (inventory.length > 0) { updateBallInHand(); } // Check if character has fallen off the map if (characterBody.position.y < -10) { // Respawn character characterBody.position.copy(spawnPoint); characterBody.velocity.set(0, 0, 0); characterBody.angularVelocity.set(0, 0, 0); character.position.copy(spawnPoint); if (debugMode) { updateDebugOutput("Character fell off the map. Respawning at spawn point."); } } } // Check for trigger collision (only log when entered) const characterPos = characterBody.position; const triggerPos = triggerBody.position; const distance = new CANNON.Vec3().copy(characterPos).vsub(triggerPos).length(); const triggerRadius = 2; if (distance <= triggerRadius && !character.userData.inTrigger) { if (debugMode) { updateDebugOutput("Character entered door trigger!"); logToConsole("Character entered door trigger!"); } character.userData.inTrigger = true; } else if (distance > triggerRadius) { character.userData.inTrigger = false; } // Throttle debug updates based on FPS if (debugMode) { throttledDebugUpdate(currentFps); } // Update door trigger visual position (only in debug mode) if (debugMode) { const doorTrigger = scene.getObjectByName('doorTrigger'); if (doorTrigger) { doorTrigger.position.copy(triggerBody.position); doorTrigger.position.y = triggerBody.position.y - 1; } } // Check for ball collection if (inventory.length < maxInventorySize) { const currentTime = Date.now(); for (let i = balls.length - 1; i >= 0; i--) { const ball = balls[i]; if (ball.graceEndTime && currentTime < ball.graceEndTime) { const timeLeft = (ball.graceEndTime - currentTime) / 1000; if (debugMode && ball.gracePeriodMessageId !== null) { updateDebugOutput(`Grace period: ${timeLeft.toFixed(2)} seconds left`, ball.gracePeriodMessageId); } continue; // Skip this ball if it's still in the grace period } else if (ball.gracePeriodMessageId !== null) { removeDebugOutput(ball.gracePeriodMessageId); ball.gracePeriodMessageId = null; ball.graceEndTime = null; } const characterPos = new THREE.Vector3( characterBody.position.x, characterBody.position.y + characterConfig.height / 2, characterBody.position.z ); const ballPos = new THREE.Vector3(ball.body.position.x, ball.body.position.y, ball.body.position.z); const distance = characterPos.distanceTo(ballPos); if (distance <= interactionRange) { makeBallDynamic(ball); tryCollectBall(i); if (debugMode) updateDebugOutput(`Ball collected at distance: ${distance.toFixed(2)}`); break; } } } } // Check if there's no ball in the scene or inventory if (balls.length === 0 && inventory.length === 0) { spawnBall(); } // Update balls positions and respawn those that fall off for (let i = balls.length - 1; i >= 0; i--) { const ball = balls[i]; if (!ball.body.isStatic) { ball.mesh.position.copy(ball.body.position); ball.mesh.quaternion.copy(ball.body.quaternion); // Update debug label if (debugMode && ball.mesh.userData.updateLabel) { ball.mesh.userData.updateLabel(); ball.mesh.userData.debugLabel.material.map.needsUpdate = true; } // Removed ball position logging } checkBallStatic(ball, i); if (!scene.getObjectById(ball.mesh.id)) { scene.add(ball.mesh); if (debugMode && ball.wasRemovedFromScene) { updateDebugOutput(`Ball ${i} was not in scene, added back`); ball.wasRemovedFromScene = false; } } if (ball.body.position.y < -10) { scene.remove(ball.mesh); world.removeBody(ball.body); if (ball.gracePeriodMessageId !== null) { removeDebugOutput(ball.gracePeriodMessageId); } balls.splice(i, 1); if (debugMode) updateDebugOutput("Ball fell off the map. Respawning..."); spawnBall(); } } //Debug Mode Updates if (debugMode) { if (balls.length !== previousBallCount || inventory.length !== previousInventoryCount) { updateDebugOutput(`Balls in scene: ${balls.length}, Inventory: ${inventory.length}`); previousBallCount = balls.length; previousInventoryCount = inventory.length; } // Update character position display if (character && characterBody) { const pos = characterBody.position; positionDisplay.textContent = `Character Position: (${pos.x.toFixed(2)}, ${pos.y.toFixed(2)}, ${pos.z.toFixed(2)})`; } // Debug visualization of interaction range updateDebugInteractionSphere(); // Update door trigger label updateDoorTriggerLabel(true); function updateDebugInteractionSphere() { let debugSphere = scene.getObjectByName('debugInteractionSphere'); if (!debugSphere) { debugSphere = createDebugSphere(); scene.add(debugSphere); } if (character) { debugSphere.position.copy(character.position); debugSphere.position.y += characterConfig.height / 2; } debugSphere.visible = debugMode; } function createDebugSphere() { const geometry = new THREE.SphereGeometry(interactionRange, 32, 32); const material = new THREE.MeshBasicMaterial({ color: 0x00ff00, wireframe: true, transparent: true, opacity: 0.1 }); const sphere = new THREE.Mesh(geometry, material); sphere.name = 'debugInteractionSphere'; return sphere; } updateDoorTriggerLabel(true); } else { // Hide debug visualizations when not in debug mode const debugSphere = scene.getObjectByName('debugInteractionSphere'); if (debugSphere) debugSphere.visible = false; updateDoorTriggerLabel(false); } } // Update NPC movement if (npc && npc.body) { const currentTime = performance.now(); const npcPosition = new THREE.Vector3(npc.body.position.x, npc.body.position.y, npc.body.position.z); // Check if NPC needs to seek a ball if (npc.inventory.length < 3 && balls.length > 0) { let closestBall = null; let closestDistance = Infinity; for (let i = 0; i < balls.length; i++) { const ball = balls[i]; const distance = npcPosition.distanceTo(ball.mesh.position); if (distance < closestDistance) { closestBall = ball; closestDistance = distance; } } if (closestBall) { npcDirection.subVectors(closestBall.mesh.position, npcPosition).normalize(); npc.seekingBall = true; // Check if NPC is close enough to collect the ball if (closestDistance < characterConfig.radius * 2) { npcCollectBall(npc, balls.indexOf(closestBall)); } } } else if (!npc.seekingBall || currentTime - lastNpcMovementChange > npcMovementChangeInterval) { // Random movement when not seeking a ball or changing direction npcDirection.set(Math.random() - 0.5, 0, Math.random() - 0.5).normalize(); lastNpcMovementChange = currentTime; npc.seekingBall = false; } // Check map boundaries const halfMapSize = mapSize / 2; if (Math.abs(npcPosition.x) > halfMapSize - mapBorder) { npcDirection.x = -Math.sign(npcPosition.x); } if (Math.abs(npcPosition.z) > halfMapSize - mapBorder) { npcDirection.z = -Math.sign(npcPosition.z); } // Apply movement to NPC const npcVelocity = new CANNON.Vec3( npcDirection.x * npcSpeed, 0, // Set vertical velocity to 0 npcDirection.z * npcSpeed ); npc.body.velocity.copy(npcVelocity); // Raycast to find ground height const rayStart = new CANNON.Vec3(npc.body.position.x, npc.body.position.y + 1, npc.body.position.z); const rayEnd = new CANNON.Vec3(npc.body.position.x, npc.body.position.y - 10, npc.body.position.z); const rayResult = new CANNON.RaycastResult(); world.raycastClosest(rayStart, rayEnd, { collisionFilterMask: 1 }, rayResult); if (rayResult.hasHit) { // Set NPC position to ground height plus half its height npc.body.position.y = rayResult.hitPointWorld.y + characterConfig.height / 2; } else { // If no ground found, set to default height npc.body.position.y = characterConfig.startHeight; } // Update NPC mesh position npc.mesh.position.copy(npc.body.position); if (debugMode) { updateDebugOutput(`NPC Position: (${npc.body.position.x.toFixed(2)}, ${npc.body.position.y.toFixed(2)}, ${npc.body.position.z.toFixed(2)})`); updateDebugOutput(`NPC Inventory: ${npc.inventory.length}`); updateDebugOutput(`NPC Seeking Ball: ${npc.seekingBall}`); } } // Check for ball collisions with NPC if (npc && npc.body) { for (let i = 0; i < balls.length; i++) { const ball = balls[i]; const distance = npc.body.position.distanceTo(ball.body.position); if (distance < characterConfig.radius + ball.body.shapes[0].radius) { // Check if the ball was recently thrown by the player const currentTime = Date.now(); if (ball.lastThrown && currentTime - ball.lastThrown < 2000) { // 10% chance for the NPC to catch the ball if (Math.random() < 0.1 && npc.inventory.length < 3) { // NPC catches the ball npcCollectBall(npc, i); if (debugMode) { updateDebugOutput(`NPC caught the thrown ball!`); } } else { // NPC is hit by the ball killNPC(); // Remove the ball that hit the NPC scene.remove(ball.mesh); world.removeBody(ball.body); balls.splice(i, 1); if (debugMode) { updateDebugOutput(`Ball hit NPC. NPC killed.`); } } break; // Exit the loop since we've handled the collision } } } } // Update NPC movement with chasing behavior if (npc && npc.body && character) { const currentTime = performance.now(); const npcPosition = new THREE.Vector3(npc.body.position.x, npc.body.position.y, npc.body.position.z); const characterPosition = new THREE.Vector3(character.position.x, character.position.y, character.position.z); const distanceToCharacter = npcPosition.distanceTo(characterPosition); const chaseDistance = 50; // Distance at which NPC starts chasing const throwDistance = 30; // Distance at which NPC throws the ball const throwCooldown = 2000; // 2 seconds cooldown between throws const roamingChangeInterval = 3000; // Change roaming direction every 3 seconds if (npc.inventory.length > 0 && distanceToCharacter < chaseDistance) { // Chase the character npcDirection.subVectors(characterPosition, npcPosition).normalize(); npc.seekingBall = false; npc.chasingCharacter = true; npc.roaming = false; // Check if NPC should throw the ball if (distanceToCharacter < throwDistance && (!npc.lastThrowTime || currentTime - npc.lastThrowTime > throwCooldown)) { npcThrowBall(npc, characterPosition); } } else if (npc.inventory.length < 3 && balls.length > 0) { // Seek the closest ball let closestBall = null; let closestDistance = Infinity; for (let i = 0; i < balls.length; i++) { const ball = balls[i]; const distance = npcPosition.distanceTo(ball.mesh.position); if (distance < closestDistance) { closestBall = ball; closestDistance = distance; } } if (closestBall) { npcDirection.subVectors(closestBall.mesh.position, npcPosition).normalize(); npc.seekingBall = true; npc.chasingCharacter = false; npc.roaming = false; // Check if NPC is close enough to collect the ball if (closestDistance < characterConfig.radius * 2) { npcCollectBall(npc, balls.indexOf(closestBall)); } } } else { // Random roaming if (!npc.roaming || currentTime - npc.lastRoamingChange > roamingChangeInterval) { npcDirection.set(Math.random() - 0.5, 0, Math.random() - 0.5).normalize(); npc.lastRoamingChange = currentTime; npc.roaming = true; } npc.seekingBall = false; npc.chasingCharacter = false; } // Check map boundaries const halfMapSize = mapSize / 2; if (Math.abs(npcPosition.x) > halfMapSize - mapBorder) { npcDirection.x = -Math.sign(npcPosition.x); } if (Math.abs(npcPosition.z) > halfMapSize - mapBorder) { npcDirection.z = -Math.sign(npcPosition.z); } // Apply movement to NPC const npcVelocity = new CANNON.Vec3( npcDirection.x * npcSpeed, 0, // Set vertical velocity to 0 npcDirection.z * npcSpeed ); npc.body.velocity.copy(npcVelocity); // Raycast to find ground height const rayStart = new CANNON.Vec3(npc.body.position.x, npc.body.position.y + 1, npc.body.position.z); const rayEnd = new CANNON.Vec3(npc.body.position.x, npc.body.position.y - 10, npc.body.position.z); const rayResult = new CANNON.RaycastResult(); world.raycastClosest(rayStart, rayEnd, { collisionFilterMask: 1 }, rayResult); if (rayResult.hasHit) { // Set NPC position to ground height plus half its height npc.body.position.y = rayResult.hitPointWorld.y + characterConfig.height / 2; } else { // If no ground found, set to default height npc.body.position.y = characterConfig.startHeight; } // Update NPC mesh position npc.mesh.position.copy(npc.body.position); if (debugMode) { updateDebugOutput(`NPC Position: (${npc.body.position.x.toFixed(2)}, ${npc.body.position.y.toFixed(2)}, ${npc.body.position.z.toFixed(2)})`); updateDebugOutput(`NPC Inventory: ${npc.inventory.length}`); updateDebugOutput(`NPC Seeking Ball: ${npc.seekingBall}`); updateDebugOutput(`NPC Chasing Character: ${npc.chasingCharacter}`); updateDebugOutput(`Distance to Character: ${distanceToCharacter.toFixed(2)}`); } } composer.render(); // Update charge indicator updateChargeIndicator(); } // Function to update the charge indicator function updateChargeIndicator() { if (isCharging && character) { const chargeTime = Math.min(performance.now() - chargeStartTime, maxChargeTime); const chargeRatio = chargeTime / maxChargeTime; // Create or update the charge indicator let chargeIndicator = scene.getObjectByName('chargeIndicator'); if (!chargeIndicator) { const geometry = new THREE.RingGeometry(1, 1.2, 32); const material = new THREE.MeshBasicMaterial({ color: 0xffff00, side: THREE.DoubleSide }); chargeIndicator = new THREE.Mesh(geometry, material); chargeIndicator.name = 'chargeIndicator'; chargeIndicator.rotation.x = -Math.PI / 2; scene.add(chargeIndicator); } // Update the indicator's position and scale chargeIndicator.position.copy(character.position); chargeIndicator.position.y += 0.1; // Slightly above the ground chargeIndicator.scale.setScalar(chargeRatio * 3 + 1); // Grow as charge increases // Update the indicator's opacity chargeIndicator.material.opacity = chargeRatio; chargeIndicator.material.transparent = true; } else { // Remove the charge indicator when not charging const chargeIndicator = scene.getObjectByName('chargeIndicator'); if (chargeIndicator) { scene.remove(chargeIndicator); } } } // 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(); const minUpdateInterval = 100; // Minimum time between updates in milliseconds const targetFps = 60; function throttledDebugUpdate(currentFps) { const currentTime = performance.now(); const timeSinceLastUpdate = currentTime - lastDebugUpdateTime; // Calculate the dynamic update interval based on FPS const fpsRatio = Math.min(currentFps / targetFps, 1); const dynamicInterval = minUpdateInterval + (500 - minUpdateInterval) * (1 - fpsRatio); if (timeSinceLastUpdate >= dynamicInterval) { updateGameStateInfo(); lastDebugUpdateTime = currentTime; } } // Function to create a text label for the ball function createBallLabel(ball) { const canvas = document.createElement('canvas'); const context = canvas.getContext('2d'); canvas.width = 256; canvas.height = 256; const texture = new THREE.CanvasTexture(canvas); const spriteMaterial = new THREE.SpriteMaterial({ map: texture, depthTest: false, depthWrite: false, transparent: true }); const sprite = new THREE.Sprite(spriteMaterial); sprite.scale.set(3, 1.5, 1); sprite.renderOrder = 1; ball.add(sprite); ball.userData.debugLabel = sprite; ball.userData.updateLabel = () => updateBallLabel(context, texture, ball.position); sprite.visible = debugMode; ball.renderOrder = 0; ball.userData.updateLabel(); } function updateBallLabel(context, texture, position) { context.clearRect(0, 0, 256, 256); context.font = 'Bold 24px Arial'; context.fillStyle = 'white'; context.textAlign = 'center'; context.textBaseline = 'middle'; context.fillText(`(${position.x.toFixed(2)}, ${position.y.toFixed(2)}, ${position.z.toFixed(2)})`, 128, 128); texture.needsUpdate = true; } // Function to check if a ball should become static function checkBallStatic(ball, index) { const velocityThreshold = 0.1; // Adjust this value as needed const angularVelocityThreshold = 0.1; // Adjust this value as needed const positionThreshold = 0.01; // Threshold for considering a position change if (!ball.body.isStatic && ball.body.velocity.length() < velocityThreshold && ball.body.angularVelocity.length() < angularVelocityThreshold) { ball.body.type = CANNON.Body.STATIC; ball.body.updateMassProperties(); const currentPosition = ball.body.position.clone(); if (debugMode) { if (!ball.lastStaticPosition || currentPosition.distanceTo(ball.lastStaticPosition) > positionThreshold) { updateDebugOutput(`Ball ${index} became static at position: (${currentPosition.x.toFixed(2)}, ${currentPosition.y.toFixed(2)}, ${currentPosition.z.toFixed(2)})`); ball.lastStaticPosition = currentPosition; } } } else if (ball.body.isStatic) { // If the ball was static but is now moving, reset the lastStaticPosition ball.lastStaticPosition = null; } } // Function to make a ball dynamic again function makeBallDynamic(ball) { if (ball.body.isStatic) { ball.body.type = CANNON.Body.DYNAMIC; ball.body.updateMassProperties(); ball.body.velocity.set(0, 0, 0); ball.body.angularVelocity.set(0, 0, 0); if (debugMode) { updateDebugOutput(`Ball became dynamic at position: (${ball.body.position.x.toFixed(2)}, ${ball.body.position.y.toFixed(2)}, ${ball.body.position.z.toFixed(2)})`); } } } // Function to create and update the door trigger label function updateDoorTriggerLabel(visible) { let doorTriggerLabel = scene.getObjectByName('doorTriggerLabel'); const doorTrigger = scene.getObjectByName('doorTrigger'); if (!doorTriggerLabel) { const canvas = document.createElement('canvas'); const context = canvas.getContext('2d'); canvas.width = 256; canvas.height = 256; context.font = 'Bold 24px Arial'; context.fillStyle = 'white'; context.textAlign = 'center'; context.fillText('Door Trigger', 128, 128); const texture = new THREE.CanvasTexture(canvas); const spriteMaterial = new THREE.SpriteMaterial({ map: texture }); doorTriggerLabel = new THREE.Sprite(spriteMaterial); doorTriggerLabel.scale.set(10, 5, 1); doorTriggerLabel.name = 'doorTriggerLabel'; scene.add(doorTriggerLabel); } if (doorTrigger) { doorTriggerLabel.position.copy(doorTrigger.position); doorTriggerLabel.position.y += 3; // Adjust height as needed } doorTriggerLabel.visible = visible; } // Function to create an NPC function createNPC() { // Create NPC mesh const npcGeometry = new THREE.CylinderGeometry(characterConfig.radius, characterConfig.radius, characterConfig.height, 8); const npcMaterial = new THREE.MeshStandardMaterial({ color: 0x00ff00 }); // Green color to distinguish from player const npcMesh = new THREE.Mesh(npcGeometry, npcMaterial); npcMesh.castShadow = true; npcMesh.receiveShadow = true; // Set initial spawn position const spawnX = Math.random() * (mapSize - 2 * mapBorder) - (mapSize / 2 - mapBorder); const spawnZ = Math.random() * (mapSize - 2 * mapBorder) - (mapSize / 2 - mapBorder); // Raycast to find ground height const rayStart = new CANNON.Vec3(spawnX, 100, spawnZ); // Start from high up const rayEnd = new CANNON.Vec3(spawnX, -100, spawnZ); // End below the ground const rayResult = new CANNON.RaycastResult(); world.raycastClosest(rayStart, rayEnd, { collisionFilterMask: 1 }, rayResult); let spawnY = characterConfig.startHeight; // Default height if raycast fails if (rayResult.hasHit) { spawnY = rayResult.hitPointWorld.y + characterConfig.height / 2; } // Create NPC physics body const npcShape = new CANNON.Cylinder(characterConfig.radius, characterConfig.radius, characterConfig.height, 8); const npcBody = new CANNON.Body({ mass: characterConfig.mass, shape: npcShape, material: characterPhysMaterial, position: new CANNON.Vec3(spawnX, spawnY, spawnZ), linearDamping: 0.9, angularDamping: 0.9, fixedRotation: true, type: CANNON.Body.DYNAMIC }); // Set mesh position to match body position npcMesh.position.copy(npcBody.position); if (debugMode) { updateDebugOutput(`NPC spawned at: (${spawnX.toFixed(2)}, ${spawnY.toFixed(2)}, ${spawnZ.toFixed(2)})`); } return { mesh: npcMesh, body: npcBody, inventory: [], seekingBall: false, chasingCharacter: false, roaming: true, lastRoamingChange: performance.now() }; } // Function for NPC to collect a ball function npcCollectBall(npc, ballIndex) { if (npc.inventory.length < 3 && balls[ballIndex]) { const ball = balls[ballIndex]; npc.inventory.push(ball); scene.remove(ball.mesh); world.removeBody(ball.body); balls.splice(ballIndex, 1); if (debugMode) { updateDebugOutput(`NPC collected a ball. Inventory size: ${npc.inventory.length}`); } } } // Function to handle NPC damage // This function is no longer needed, but we'll keep it as a placeholder in case we want to reintroduce damage mechanics later function damageNPC() { killNPC(); if (debugMode) { updateDebugOutput(`NPC hit! Instantly killed.`); } } // Function to handle NPC death function killNPC() { if (npc) { scene.remove(npc.mesh); world.removeBody(npc.body); // Drop all balls in NPC's inventory npc.inventory.forEach(ball => { ball.body.position.copy(npc.body.position); ball.body.velocity.set( (Math.random() - 0.5) * 5, 5 + Math.random() * 5, (Math.random() - 0.5) * 5 ); scene.add(ball.mesh); world.addBody(ball.body); balls.push(ball); }); npc = null; if (debugMode) { updateDebugOutput("NPC instantly killed!"); } // Respawn the NPC after a short delay setTimeout(() => { npc = createNPC(); scene.add(npc.mesh); world.addBody(npc.body); if (debugMode) { updateDebugOutput("NPC respawned!"); } }, 3000); // Respawn after 3 seconds } } // NPC movement variables let npcDirection = new THREE.Vector3(1, 0, 0); const npcSpeed = 5; const mapSize = 200; // This should match the size used in createTerrain() const mapBorder = 10; // Buffer zone from the edge of the map const npcMovementChangeInterval = 3000; // Change direction every 3 seconds let lastNpcMovementChange = 0; // Function for NPC to throw a ball at the character function npcThrowBall(npc, characterPosition) { if (npc.inventory.length > 0) { const ball = npc.inventory.pop(); const throwForce = 15; const npcPosition = new THREE.Vector3(npc.body.position.x, npc.body.position.y, npc.body.position.z); // Ensure we're using the correct character position const targetPosition = new THREE.Vector3(characterPosition.x, characterPosition.y, characterPosition.z); // Calculate throw direction const throwDirection = new THREE.Vector3().subVectors(targetPosition, npcPosition).normalize(); // Set ball position slightly in front of the NPC const ballStartPosition = npcPosition.clone().add(throwDirection.clone().multiplyScalar(characterConfig.radius * 2)); ball.mesh.position.copy(ballStartPosition); ball.body.position.copy(ballStartPosition); // Calculate throw velocity with a slight upward arc const throwVelocity = throwDirection.multiplyScalar(throwForce); throwVelocity.y += 2; // Add a slight upward component // Apply velocity to the ball ball.body.velocity.set(throwVelocity.x, throwVelocity.y, throwVelocity.z); // Add the ball back to the scene and world scene.add(ball.mesh); world.addBody(ball.body); balls.push(ball); if (debugMode) { updateDebugOutput(`NPC threw a ball at the character! Direction: (${throwDirection.x.toFixed(2)}, ${throwDirection.y.toFixed(2)}, ${throwDirection.z.toFixed(2)})`); } // Set a cooldown for the next throw npc.lastThrowTime = Date.now(); } }