// Import necessary modules import * as THREE from 'three'; import { OrbitControls } from 'three/addons/controls/OrbitControls.js'; import * as TWEEN from 'three/addons/libs/tween.module.js'; import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js'; import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js'; import { RenderPass } from 'three/addons/postprocessing/RenderPass.js'; import { UnrealBloomPass } from 'three/addons/postprocessing/UnrealBloomPass.js'; import { SMAAPass } from 'three/addons/postprocessing/SMAAPass.js'; // Initialize npcs array const npcs = []; let terrain; let policeHasBeenCalled = false; let policeArrivalTime = null; let policemenSpawnTime = null; let policeNotificationShown = false; let policeExitTime = null; let policeHaveExited = false; let policemenHaveSpawned = false; const parentDiv = document.getElementById('renderDiv'); // Create a notification system function createNotificationSystem() { const notificationContainer = document.createElement('div'); notificationContainer.id = 'notificationContainer'; document.body.appendChild(notificationContainer); return notificationContainer; } const notificationContainer = createNotificationSystem(); function showNotification(message, duration = 5000) { notificationContainer.textContent = message; notificationContainer.style.opacity = '1'; clearTimeout(notificationContainer.hideTimeout); notificationContainer.hideTimeout = setTimeout(() => { notificationContainer.style.opacity = '0'; }, duration); // Add a second timeout to reset the text after the fade-out setTimeout(() => { notificationContainer.textContent = ''; }, duration + 300); // 300ms extra to account for the fade-out transition } // 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; // Player stats let playerHealth = 100; let playerStamina = 100; // Create an audio listener and a sound const listener = new THREE.AudioListener(); const sound = new THREE.Audio(listener); const laughSound = new THREE.Audio(listener); const deathSound = new THREE.Audio(listener); const maleScream = new THREE.Audio(listener); const sleepSound = new THREE.Audio(listener); const gunshot = new THREE.Audio(listener); const chaseMusic = new THREE.Audio(listener); const backgroundMusic = new THREE.Audio(listener); const titleMusic = new THREE.Audio(listener); let isChasingNPC = false; let gameStarted = false; const femaleScreams = [ new THREE.Audio(listener), new THREE.Audio(listener), new THREE.Audio(listener), new THREE.Audio(listener), new THREE.Audio(listener), new THREE.Audio(listener) ]; // Define laugh segments const laughSegments = [{ start: 0, end: 4 }, { start: 4, end: 7 }, { start: 7, end: 13 }, { start: 13, end: 18 }]; // 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?N9vm'; } return url; }); let canvas = document.getElementById('threeRenderCanvas'); if (!canvas) { canvas = document.createElement('canvas'); canvas.id = 'threeRenderCanvas'; parentDiv.appendChild(canvas); } // Create UI container const uiContainer = document.createElement('div'); uiContainer.id = 'uiContainer'; uiContainer.style.position = 'absolute'; uiContainer.style.bottom = '20px'; uiContainer.style.right = '20px'; uiContainer.style.display = 'none'; // Hide UI container initially uiContainer.style.flexDirection = 'column'; uiContainer.style.alignItems = 'flex-end'; parentDiv.appendChild(uiContainer); // Create time display const timeDisplay = document.createElement('div'); timeDisplay.id = 'timeDisplay'; timeDisplay.style.position = 'absolute'; timeDisplay.style.top = '0'; timeDisplay.style.left = '0'; timeDisplay.style.width = '100%'; timeDisplay.style.backgroundColor = 'rgba(0, 0, 0, 0.7)'; timeDisplay.style.color = 'white'; timeDisplay.style.padding = '10px'; timeDisplay.style.textAlign = 'center'; timeDisplay.style.fontSize = '18px'; parentDiv.appendChild(timeDisplay); // Create "Go to sleep" ability UI const sleepUI = document.createElement('div'); sleepUI.className = 'ability-ui'; sleepUI.innerHTML = `

C `; uiContainer.appendChild(sleepUI); // Create knife ability UI const knifeUI = document.createElement('div'); knifeUI.className = 'ability-ui'; knifeUI.innerHTML = ` Knife

F `; uiContainer.appendChild(knifeUI); // Create laugh ability UI const laughUI = document.createElement('div'); laughUI.className = 'ability-ui'; laughUI.innerHTML = ` Laugh

T `; uiContainer.appendChild(laughUI); // Create player status UI const playerStatusUI = document.createElement('div'); playerStatusUI.id = 'playerStatusUI'; playerStatusUI.innerHTML = `

`; playerStatusUI.style.display = 'none'; // Hide player status UI initially parentDiv.appendChild(playerStatusUI); // Create title screen const titleScreen = document.createElement('div'); titleScreen.id = 'titleScreen'; titleScreen.style.display = 'none'; // Initially hide the title screen titleScreen.innerHTML = `

The Daily Horror

Jeff the Killer Strikes Again!

In a shocking turn of events, the infamous Jeff the Killer has been spotted in our quiet town. Authorities advise residents to stay indoors and report any suspicious activity immediately.

`; parentDiv.appendChild(titleScreen); // Create black overlay const blackOverlay = document.createElement('div'); blackOverlay.id = 'blackOverlay'; blackOverlay.style.position = 'absolute'; blackOverlay.style.top = '0'; blackOverlay.style.left = '0'; blackOverlay.style.width = '100%'; blackOverlay.style.height = '100%'; blackOverlay.style.backgroundColor = 'black'; blackOverlay.style.zIndex = '1001'; blackOverlay.style.cursor = 'pointer'; parentDiv.appendChild(blackOverlay); // Add CSS styles const style = document.createElement('style'); style.textContent = ` .ability-ui { display: flex; align-items: center; margin-bottom: 10px; background-color: rgba(0, 0, 0, 0.5); padding: 5px; border-radius: 5px; } .ability-ui img { width: 30px; height: 30px; margin-right: 5px; } .ability-ui .key { color: white; font-weight: bold; margin-right: 5px; } .ability-ui .cooldown { color: white; } #playerStatusUI { position: absolute; bottom: 20px; left: 20px; background-color: rgba(0, 0, 0, 0.5); padding: 10px; border-radius: 5px; } #statusContent { display: flex; align-items: center; } #playerFaceIcon { width: 40px; height: 40px; margin-right: 10px; } #bars { display: flex; flex-direction: column; justify-content: space-between; height: 40px; } #healthBarContainer, #staminaBarContainer { width: 150px; height: 15px; background-color: #333; margin-left: 5px; } #notificationContainer { position: fixed; top: 100px; left: 20px; background-color: rgba(0, 0, 0, 0.7); color: white; padding: 10px 20px; border-radius: 5px; font-family: Arial, sans-serif; font-size: 16px; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity 0.3s ease; z-index: 1000; } #healthBar, #staminaBar { height: 100%; width: 100%; transition: width 0.3s ease-in-out; } #healthBar { background-color: #ff0000; } #staminaBar { background-color: #0000ff; } `; document.head.appendChild(style); // Add CSS for title screen and black overlay const titleScreenStyle = document.createElement('style'); titleScreenStyle.textContent = ` #titleScreen { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #000000; display: flex; justify-content: center; align-items: center; z-index: 1000; } #blackOverlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #000000; z-index: 1001; } .newspaper { width: 80%; max-width: 800px; background-color: #fff; padding: 20px; box-shadow: 0 0 10px rgba(255,255,255,0.1); font-family: 'Times New Roman', serif; } .newspaper-title { font-size: 48px; text-align: center; margin-bottom: 10px; font-weight: bold; color: #000; } .newspaper-headline { font-size: 36px; text-align: center; margin-bottom: 20px; color: #ff0000; } .newspaper-image { width: 100%; height: 400px; object-fit: cover; margin-bottom: 20px; } .newspaper-content { font-size: 18px; line-height: 1.5; margin-bottom: 20px; column-count: 2; column-gap: 20px; } .newspaper-cta { display: block; width: 200px; margin: 0 auto; padding: 10px; background-color: #000000; color: white; text-align: center; font-size: 18px; cursor: pointer; border: none; transition: background-color 0.3s; } .newspaper-cta:hover { background-color: #333333; } `; document.head.appendChild(titleScreenStyle); // 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'; console.log('All assets loaded, ready to start background music'); // Set a timer to start the music after 1 second setTimeout(() => { startBackgroundMusic(); }, 1000); }; loadingManager.onError = function(url) { console.error('Error loading:', url); }; // Array to store police NPCs const policeNPCs = []; // 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; // Define physics materials const groundPhysMaterial = new CANNON.Material('ground'); const characterPhysMaterial = new CANNON.Material('character'); const wallMaterial = new CANNON.Material('wall'); // 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.05, // Lower friction for smoother rolling restitution: 0.95, // High restitution for bouncy balls } ); world.addContactMaterial(ballGroundContactMaterial); // Create contact material between character and walls const characterWallContactMaterial = new CANNON.ContactMaterial( characterPhysMaterial, wallMaterial, { friction: 0.1, restitution: 0.0 } ); world.addContactMaterial(characterWallContactMaterial); // Create contact material between balls const ballBallContactMaterial = new CANNON.ContactMaterial( ballPhysMaterial, ballPhysMaterial, { friction: 0.05, // Lower friction between balls for easier pushing restitution: 0.98, // High restitution between balls for bouncier collisions } ); world.addContactMaterial(ballBallContactMaterial); // NPC variables let npc, npcBody; let npcHealth = 100; // Initial health of the NPC let npcIsDead = false; // Flag to track if the NPC is dead const npcWaypoints = [ new THREE.Vector3(30, 3, -30), // Near the house entrance new THREE.Vector3(35, 3, -35), // Inside the house new THREE.Vector3(25, 3, -35), // Another point inside the house new THREE.Vector3(30, 3, -40), // Back of the house new THREE.Vector3(25, 3, -30), // Inside, left of the house new THREE.Vector3(35, 3, -30) // Inside, right of the house ]; const npcDetectionRadius = 10; // Detection radius for the NPC const npcFleeSpeed = 8; // Increased speed at which the NPC flees let npcIsFleeing = false; // Flag to track if the NPC is currently fleeing let currentWaypointIndex = 0; const npcSpeed = 2; // Normal walking speed remains unchanged const normalDetectionRadius = 10; // Normal detection radius let chaseDetectionRadius = normalDetectionRadius; // Variable detection radius let npcGender = 'female'; // Set the NPC in the house to be female let npcHasScreamed = false; // Flag to ensure NPC only screams once // Function to create a simple NPC function createNPC(gender = 'female') { const npcGroup = new THREE.Group(); // NPC body const bodyGeometry = new THREE.BoxGeometry(1, 1.5, 0.5); const bodyMaterial = new THREE.MeshPhongMaterial({ color: gender === 'male' ? 0x0000FF : 0xFF69B4 // Blue for male, pink for female }); const bodyMesh = new THREE.Mesh(bodyGeometry, bodyMaterial); bodyMesh.position.y = 0.75; npcGroup.add(bodyMesh); // NPC head const headGeometry = new THREE.BoxGeometry(0.5, 0.5, 0.5); const headMaterial = new THREE.MeshPhongMaterial({ color: 0xFFD1DC }); // Light pink for the face const headMesh = new THREE.Mesh(headGeometry, headMaterial); headMesh.position.y = 1.75; npcGroup.add(headMesh); // Arms const armGeometry = new THREE.BoxGeometry(0.25, 1, 0.25); const armMaterial = new THREE.MeshPhongMaterial({ color: 0xFFD1DC }); // Skin color for arms const leftArm = new THREE.Mesh(armGeometry, armMaterial); leftArm.position.set(-0.625, 0.75, 0); npcGroup.add(leftArm); const rightArm = new THREE.Mesh(armGeometry, armMaterial); rightArm.position.set(0.625, 0.75, 0); npcGroup.add(rightArm); // Legs const legGeometry = new THREE.BoxGeometry(0.375, 1, 0.375); const legMaterial = new THREE.MeshPhongMaterial({ color: gender === 'male' ? 0x000080 : 0x8B4513 // Dark blue for male, brown for female }); const leftLeg = new THREE.Mesh(legGeometry, legMaterial); leftLeg.position.set(-0.25, -0.5, 0); npcGroup.add(leftLeg); const rightLeg = new THREE.Mesh(legGeometry, legMaterial); rightLeg.position.set(0.25, -0.5, 0); npcGroup.add(rightLeg); npcGroup.traverse((object) => { if (object instanceof THREE.Mesh) { object.castShadow = true; object.receiveShadow = true; } }); // Scale up the NPC to match the player's size npcGroup.scale.set(2, 2, 2); return npcGroup; return npcGroup; } // Create and add NPC to the scene const houseNPCMesh = createNPC(npcGender); houseNPCMesh.position.copy(npcWaypoints[0]); houseNPCMesh.position.y = 3; // Set the initial height to be inside the house scene.add(houseNPCMesh); // Ensure proper material and lighting for the NPC houseNPCMesh.traverse((child) => { if (child instanceof THREE.Mesh) { child.material.color.setHex(npcGender === 'male' ? 0x0000FF : 0xFF69B4); child.material.needsUpdate = true; child.castShadow = true; child.receiveShadow = true; } }); // Create NPC physics body const npcShape = new CANNON.Box(new CANNON.Vec3(1, 2, 0.5)); // Doubled size to match visual scale npcBody = new CANNON.Body({ mass: 5, shape: npcShape, position: new CANNON.Vec3(houseNPCMesh.position.x, houseNPCMesh.position.y, houseNPCMesh.position.z), // Match the visual representation fixedRotation: true, material: characterPhysMaterial }); world.addBody(npcBody); // Initialize NPC properties const houseNPCData = { mesh: houseNPCMesh, body: npcBody, gender: npcGender, hasScreamed: false, lastScreamTime: 0, health: 100, isDead: false, lastSawPlayerTime: 0, isCallingPolice: false }; // Add the house NPC to the npcs array npcs.push({ npc: houseNPCData, waypointIndex: 0, waypoints: npcWaypoints }); // Function to update NPC movement function updateNPC(deltaTime) { const npcs = [{ npc: maleNPC, waypointIndex: maleNPCWaypointIndex, waypoints: campgroundWaypoints }, { npc: femaleNPC, waypointIndex: femaleNPCWaypointIndex, waypoints: campgroundWaypoints }, { npc: houseNPCData, waypointIndex: currentWaypointIndex, waypoints: npcWaypoints }]; let isAnyNPCBeingChased = false; npcs.forEach((npcData) => { const { npc, waypointIndex, waypoints } = npcData; if (!npc || !npc.mesh || !npc.body) return; if (npc.isDead) { // Update the mesh position and rotation to match the physics body npc.mesh.position.copy(npc.body.position); npc.mesh.quaternion.copy(npc.body.quaternion); return; } let playerDetected = false; let direction; // Adjust detection radius based on chase state chaseDetectionRadius = npc.isBeingChased ? normalDetectionRadius * 2 : normalDetectionRadius; // Check if player is within detection radius if (character && character.position) { const distanceToPlayer = npc.mesh.position.distanceTo(character.position); playerDetected = distanceToPlayer <= chaseDetectionRadius; if (playerDetected) { checkAndPlayNPCScream(npc); npc.lastSawPlayerTime = performance.now(); npc.isBeingChased = true; isAnyNPCBeingChased = true; } else { if (npc.isBeingChased) { // NPC has just lost sight of the player npc.isBeingChased = false; chaseDetectionRadius = normalDetectionRadius; // Reset detection radius } if (npc.hasScreamed && !policeHasBeenCalled && !npc.isCallingPolice && performance.now() - npc.lastScreamTime > 5000 && performance.now() - npc.lastSawPlayerTime > 5000) { npc.isCallingPolice = true; setTimeout(() => { if (!policeHasBeenCalled) { callPolice(); } npc.isCallingPolice = false; }, 2000); // Simulating the time it takes to make a call } } } // Update NPC color based on health updateNPCColor(npc); if (playerDetected) { // Calculate direction away from player direction = npc.mesh.position.clone().sub(character.position).normalize(); } else { // Normal waypoint behavior const currentWaypoint = waypoints[waypointIndex]; direction = new THREE.Vector3().subVectors(currentWaypoint, npc.mesh.position).normalize(); } // Move NPC const speed = playerDetected ? npcFleeSpeed : npcSpeed; npc.mesh.position.add(direction.multiplyScalar(speed * deltaTime)); npc.mesh.position.y = 3; // Maintain a constant height npc.body.position.copy(npc.mesh.position); // Rotate NPC to face the direction of movement if (direction.length() > 0.01) { const targetRotation = Math.atan2(direction.x, direction.z); npc.mesh.rotation.y = targetRotation; } // Check if NPC has reached the current waypoint (only when not fleeing) if (!playerDetected && npc.mesh.position.distanceTo(waypoints[waypointIndex]) < 0.1) { npcData.waypointIndex = (waypointIndex + 1) % waypoints.length; } // Animation animateNPC(npc.mesh, direction, speed); // Update NPC color based on health updateNPCColor(npc); }); // Update chase music if (isAnyNPCBeingChased && !isChasingNPC) { isChasingNPC = true; startChaseMusic(); } else if (!isAnyNPCBeingChased && isChasingNPC) { isChasingNPC = false; stopChaseMusic(); } // Update global variables maleNPCWaypointIndex = npcs[0].waypointIndex; femaleNPCWaypointIndex = npcs[1].waypointIndex; currentWaypointIndex = npcs[2].waypointIndex; } function animateNPC(npcMesh, direction, speed) { // Simple leg movement const leftLeg = npcMesh.children.find(child => child.position.x < 0 && child.position.y < 0); const rightLeg = npcMesh.children.find(child => child.position.x > 0 && child.position.y < 0); if (leftLeg && rightLeg) { if (direction.length() > 0.01) { // Walking/running animation const animationSpeed = speed > npcSpeed ? 0.04 : 0.02; // Faster animation for fleeing const legAngle = Math.sin(Date.now() * animationSpeed) * 0.5; leftLeg.rotation.x = -legAngle; rightLeg.rotation.x = legAngle; } else { // Reset legs when idle leftLeg.rotation.x = 0; rightLeg.rotation.x = 0; } } // Simple arm movement const leftArm = npcMesh.children.find(child => child.position.x < -1 && child.position.y > 0); const rightArm = npcMesh.children.find(child => child.position.x > 1 && child.position.y > 0); if (leftArm && rightArm) { if (direction.length() > 0.01) { // Arm swing when walking/running const animationSpeed = speed > npcSpeed ? 0.04 : 0.02; // Faster animation for fleeing const armAngle = Math.sin(Date.now() * animationSpeed) * 0.5; leftArm.rotation.x = armAngle; rightArm.rotation.x = -armAngle; } else { // Reset arms when idle leftArm.rotation.x = 0; rightArm.rotation.x = 0; } } } function updateNPCColor(npc) { const healthPercentage = npc.health / 100; const color = new THREE.Color(1, healthPercentage, healthPercentage); npc.mesh.traverse((child) => { if (child instanceof THREE.Mesh) { child.material.color = color; } }); } function checkAndPlayNPCScream(npc) { const currentTime = performance.now(); if (!npc.lastScreamTime || currentTime - npc.lastScreamTime >= 20000) { // 20 seconds cooldown playNPCScream(npc); npc.lastScreamTime = currentTime; npc.hasScreamed = true; console.log(`NPC screamed at ${currentTime}`); // Debugging line } } function playNPCScream(npc) { if (npc.gender === 'male') { if (maleScream.isPlaying) { maleScream.stop(); } maleScream.play(); } else { const randomFemaleScream = femaleScreams[Math.floor(Math.random() * femaleScreams.length)]; if (randomFemaleScream.isPlaying) { randomFemaleScream.stop(); } randomFemaleScream.play(); } } function createBloodPool(position) { const geometry = new THREE.CircleGeometry(2, 32); const texture = textureLoader.load('https://play.rosebud.ai/assets/pool-of-blood-png-3.png?pfo1'); const material = new THREE.MeshBasicMaterial({ map: texture, transparent: true, depthWrite: false, alphaTest: 0.5, }); const bloodPool = new THREE.Mesh(geometry, material); bloodPool.rotation.x = -Math.PI / 2; // Rotate to lay flat on the ground bloodPool.position.copy(position); bloodPool.position.y += 0.01; // Slightly above the ground to prevent z-fighting scene.add(bloodPool); // Animate the blood pool expanding bloodPool.scale.set(0.1, 0.1, 0.1); new TWEEN.Tween(bloodPool.scale) .to({ x: 1, y: 1, z: 1 }, 1000) .easing(TWEEN.Easing.Quadratic.Out) .start(); return bloodPool; } // Time system let gameTime = 6 * 60; // Start at 6:00 AM (in minutes) const dayDuration = 24 * 60; // 24 hours in minutes const timeScale = 15; // 1 second real time = 15 seconds game time (4 times slower) function updateTime(deltaTime) { gameTime += deltaTime * timeScale; if (gameTime >= dayDuration) { gameTime -= dayDuration; } let hours = Math.floor(gameTime / 60); const minutes = Math.floor(gameTime % 60); const ampm = hours >= 12 ? 'PM' : 'AM'; hours = hours % 12; hours = hours ? hours : 12; // Convert 0 to 12 timeDisplay.textContent = `${hours}:${minutes.toString().padStart(2, '0')} ${ampm}`; } function updateLighting() { if (!gameStarted) { // Night-time lighting for main menu (unchanged) moonLight.intensity = 0.5; hemiLight.intensity = 0.2; ambientLight.intensity = 0.2; sky.material.uniforms.topColor.value.setHex(0x001a33); sky.material.uniforms.bottomColor.value.setHex(0x000033); } else { const hour = Math.floor(gameTime / 60); const minute = gameTime % 60; const totalMinutes = hour * 60 + minute; const t = (totalMinutes % 1440) / 1440; // Normalized time (0 to 1) // Define default (12 PM) lighting values const defaultSunIntensity = 1; const defaultHemiIntensity = 0.7; const defaultAmbientIntensity = 0.5; const defaultSkyTopColor = new THREE.Color(0x87CEEB); // Sky blue const defaultSkyBottomColor = new THREE.Color(0xFFFFFF); // White // Calculate sun position const sunAngle = (t - 0.5) * Math.PI; // 12 PM is at 0 radians const sunY = Math.sin(sunAngle); const sunXZ = Math.cos(sunAngle); // Adjust sunlight intensity and color const sunIntensity = Math.max(0, Math.sin((t - 0.25) * Math.PI * 2)); moonLight.intensity = defaultSunIntensity * sunIntensity; moonLight.color.setHSL(0.1, 0.7, 0.5 + 0.5 * sunIntensity); // Adjust sunlight position moonLight.position.set( sunXZ * 100, sunY * 100, sunXZ * 100 ); // Adjust hemisphere and ambient light hemiLight.intensity = defaultHemiIntensity * (0.5 + 0.5 * sunIntensity); ambientLight.intensity = defaultAmbientIntensity * (0.5 + 0.5 * sunIntensity); // Adjust sky colors const nightSkyTopColor = new THREE.Color(0x001a33); const nightSkyBottomColor = new THREE.Color(0x000033); const skyTopColor = new THREE.Color().lerpColors(nightSkyTopColor, defaultSkyTopColor, sunIntensity); const skyBottomColor = new THREE.Color().lerpColors(nightSkyBottomColor, defaultSkyBottomColor, sunIntensity); sky.material.uniforms.topColor.value.copy(skyTopColor); sky.material.uniforms.bottomColor.value.copy(skyBottomColor); } } function randomBetween(min, max) { return Math.random() * (max - min) + min; } const clock = new THREE.Clock(); // Initialize the camera const camera = new THREE.PerspectiveCamera( 75, canvas.offsetWidth / canvas.offsetHeight, 0.1, 1000 ); // Adjusted camera position camera.position.set(0, 15, 30); camera.lookAt(0, 0, 0); // Camera settings for character following const cameraSettings = { offset: new THREE.Vector3(0, 5, 15), smoothSpeed: 0.1, rotationSpeed: 0.5, minPolarAngle: 0.1, maxPolarAngle: Math.PI / 2, minDistance: 8, maxDistance: 30, minFollowDistance: 12, }; // Initialize the renderer with HDR const renderer = new THREE.WebGLRenderer({ antialias: true, canvas: canvas, powerPreference: 'high-performance', }); renderer.setPixelRatio(window.devicePixelRatio); renderer.setSize(canvas.offsetWidth, canvas.offsetHeight); renderer.shadowMap.enabled = true; renderer.shadowMap.type = THREE.PCFSoftShadowMap; renderer.outputEncoding = THREE.sRGBEncoding; renderer.toneMapping = THREE.ACESFilmicToneMapping; renderer.toneMappingExposure = 1.2; // Initialize post-processing const composer = new EffectComposer(renderer); // Regular scene render pass const renderPass = new RenderPass(scene, camera); composer.addPass(renderPass); // Add subtle bloom effect const bloomPass = new UnrealBloomPass( new THREE.Vector2(window.innerWidth, window.innerHeight), 0.2, // bloom strength 0.4, // radius 0.9 // threshold ); composer.addPass(bloomPass); // Add anti-aliasing const smaaPass = new SMAAPass( window.innerWidth * renderer.getPixelRatio(), window.innerHeight * renderer.getPixelRatio() ); composer.addPass(smaaPass); // Initialize composer size composer.setSize(parentDiv.clientWidth, parentDiv.clientHeight); // Define sky colors for environmental lighting const skyColor = new THREE.Color(0x001a33); // Dark blue sky color const groundColor = new THREE.Color(0x000066); // Very dark blue ground reflection // Create sky dome with night 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; uniform float time; varying vec3 vWorldPosition; void main() { float h = normalize(vWorldPosition + offset).y; float blendFactor = max(pow(max(h, 0.0), exponent), 0.0); vec3 skyColor = mix(bottomColor, topColor, blendFactor); // Add subtle color variation based on time float timeFactor = sin(time * 0.1) * 0.1 + 0.9; skyColor *= timeFactor; gl_FragColor = vec4(skyColor, 1.0); } `; const skyGeo = new THREE.SphereGeometry(500, 32, 15); const uniforms = { topColor: { value: new THREE.Color(0x0077ff) }, bottomColor: { value: new THREE.Color(0xffffff) }, offset: { value: 33 }, exponent: { value: 0.6 }, time: { value: 0 } }; const skyMat = new THREE.ShaderMaterial({ uniforms: uniforms, vertexShader: vertexShader, fragmentShader: fragmentShader, side: THREE.BackSide, }); const sky = new THREE.Mesh(skyGeo, skyMat); scene.add(sky); // Modify OrbitControls setup const controls = new OrbitControls(camera, renderer.domElement); controls.enableDamping = true; controls.dampingFactor = 0.05; controls.screenSpacePanning = false; controls.minPolarAngle = cameraSettings.minPolarAngle; controls.maxPolarAngle = cameraSettings.maxPolarAngle; controls.minDistance = cameraSettings.minDistance; controls.maxDistance = cameraSettings.maxDistance; controls.target = new THREE.Vector3(0, 2, 0); // 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?nYdD'); const normalMap = textureLoader.load('https://play.rosebud.ai/assets/3D_playground_grass_normal.png?7ReE'); 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); // Create ground collision body const groundShape = new CANNON.Plane(); const groundBody = new CANNON.Body({ mass: 0, // static body shape: groundShape, material: groundPhysMaterial }); groundBody.quaternion.setFromAxisAngle(new CANNON.Vec3(1, 0, 0), -Math.PI / 2); // rotate to match visual plane world.addBody(groundBody); return terrain; } // Setup dynamic lighting system const moonLight = new THREE.DirectionalLight(0xffffff, 1.0); moonLight.position.set(50, 100, 50); moonLight.castShadow = true; moonLight.shadow.mapSize.width = 2048; moonLight.shadow.mapSize.height = 2048; moonLight.shadow.camera.near = 10; moonLight.shadow.camera.far = 400; moonLight.shadow.camera.left = -100; moonLight.shadow.camera.right = 100; moonLight.shadow.camera.top = 100; moonLight.shadow.camera.bottom = -100; moonLight.shadow.bias = -0.001; scene.add(moonLight); // Add hemisphere light for sky and ground reflection const hemiLight = new THREE.HemisphereLight(0xffffff, 0x444444, 0.7); scene.add(hemiLight); // Add ambient light const ambientLight = new THREE.AmbientLight(0x404040, 0.5); scene.add(ambientLight); // ========================= // Character Integration // ========================= // Variables for character let character = null; let characterBody = null; let mixer = null; let isGrounded = false; let currentJumps = 0; let lastJumpTime = 0; let moveDirection = new THREE.Vector3(); let walkAction = null; let idleAction = null; let jumpAction = null; let fallAction = null; let contactNormal = new CANNON.Vec3(); let upAxis = new CANNON.Vec3(0, 1, 0); const keysPressed = { w: false, a: false, s: false, d: false, space: false, shift: false, }; let isRunning = false; // Character configuration const characterConfig = { // Movement settings walkSpeed: 30, // Increased walk speed runSpeed: 40, // Kept the same as before airSpeed: 25, groundDamping: 0.1, airDamping: 0.1, acceleration: 30, turnSpeed: 10, jumpForce: 12, jumpCooldown: 0.1, maxJumps: 1, staminaDrain: 10, // Stamina drained per second while running staminaRegen: 5, // Stamina regenerated per second while not running // 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: 3, // Adjusted to position character just above the ground }; // Create contact material between character and ground const characterGroundContact = new CANNON.ContactMaterial( characterPhysMaterial, groundPhysMaterial, { friction: 0.1, restitution: 0.0, contactEquationStiffness: 1e8, contactEquationRelaxation: 3, frictionEquationStiffness: 1e8, frictionEquationRegularizationTime: 3, } ); world.addContactMaterial(characterGroundContact); // Create contact material between ball and character const ballCharacterContactMaterial = new CANNON.ContactMaterial( ballPhysMaterial, characterPhysMaterial, { friction: 0.05, restitution: 0.9, } ); world.addContactMaterial(ballCharacterContactMaterial); // Add keyboard event listeners window.addEventListener('keydown', (event) => { if (event.code === 'Space') { keysPressed.space = true; } else if (event.code === 'ShiftLeft' || event.code === 'ShiftRight') { keysPressed.shift = true; } else if (keysPressed.hasOwnProperty(event.key.toLowerCase())) { keysPressed[event.key.toLowerCase()] = true; } else if (event.code === 'KeyF' && !isSwinging) { swingKnife(); } else if (event.code === 'KeyT') { playRandomLaugh(); } else if (event.code === 'KeyC' && !sleepSoundCooldown) { playSleepSound(); } }); // Load the sounds audioLoader.load('https://play.rosebud.ai/assets/swing-whoosh-11-198503.mp3?Qxi1', function(buffer) { sound.setBuffer(buffer); sound.setVolume(0.5); }); audioLoader.load('https://play.rosebud.ai/assets/Jeff The Killer Go to sleep.mp3?OTYP', function(buffer) { sleepSound.setBuffer(buffer); sleepSound.setVolume(0.5); }); audioLoader.load('https://play.rosebud.ai/assets/Jeff The Killer Crazy Laugh.mp3?Cg5d', function(buffer) { laughSound.setBuffer(buffer); laughSound.setVolume(0.5); }); audioLoader.load('https://play.rosebud.ai/assets/gib-sound-97000.mp3?zpeS', function(buffer) { deathSound.setBuffer(buffer); deathSound.setVolume(0.5); }); audioLoader.load('https://play.rosebud.ai/assets/man1scream.mp3?n2Os', function(buffer) { maleScream.setBuffer(buffer); maleScream.setVolume(0.5); }); // Load gunshot sound audioLoader.load('https://play.rosebud.ai/assets/gib-sound-97000.mp3?zpeS', function(buffer) { gunshot.setBuffer(buffer); gunshot.setVolume(0.3); }); const femaleScreamUrls = [ 'https://play.rosebud.ai/assets/woman1scream.mp3?SmTl', 'https://play.rosebud.ai/assets/woman2scream.mp3?WZog', 'https://play.rosebud.ai/assets/woman3scream.mp3?10mV', 'https://play.rosebud.ai/assets/woman4scream.mp3?BQpz', 'https://play.rosebud.ai/assets/woman5scream.mp3?vM0o', 'https://play.rosebud.ai/assets/woman6scream.mp3?Xxyz' ]; femaleScreamUrls.forEach((url, index) => { audioLoader.load(url, function(buffer) { femaleScreams[index].setBuffer(buffer); femaleScreams[index].setVolume(0.5); }); }); // Load chase music audioLoader.load('https://play.rosebud.ai/assets/jeffchasetheme.mp3?TiXY', function(buffer) { chaseMusic.setBuffer(buffer); chaseMusic.setLoop(true); chaseMusic.setVolume(0.5); // Set the loop end point to 1 second before the end of the track const loopEndTime = buffer.duration - 1; chaseMusic.setLoopEnd(loopEndTime); }); // Load background music audioLoader.load('https://play.rosebud.ai/assets/Jeff the killer GO TO SLEEP original soundtrack horror.mp3?MZnq', function(buffer) { backgroundMusic.setBuffer(buffer); backgroundMusic.setLoop(true); backgroundMusic.setVolume(0.3); // Set initial volume console.log('Background music loaded successfully'); }); // Load title music audioLoader.load('https://play.rosebud.ai/assets/shortjeff.mp3?I2i6', function(buffer) { titleMusic.setBuffer(buffer); titleMusic.setLoop(true); titleMusic.setVolume(0.5); // Set to desired volume // Add click event listener to fade in title screen and play music blackOverlay.addEventListener('click', function fadeInTitleScreen() { // Fade out black overlay new TWEEN.Tween(blackOverlay.style) .to({ opacity: 0 }, 1000) .onComplete(() => { blackOverlay.style.display = 'none'; }) .start(); // Fade in title screen titleScreen.style.display = 'block'; titleScreen.style.opacity = 0; new TWEEN.Tween(titleScreen.style) .to({ opacity: 1 }, 1000) .start(); // Play title music if (titleMusic.context && titleMusic.context.state === 'suspended') { titleMusic.context.resume().then(() => { titleMusic.play(); }); } else { titleMusic.play(); } // Remove this event listener blackOverlay.removeEventListener('click', fadeInTitleScreen); }, { once: true }); }); function startBackgroundMusic() { console.log('Attempting to start background music'); // Only start background music if the game has started if (gameStarted) { // Fade out title music if (titleMusic.isPlaying) { new TWEEN.Tween(titleMusic.gain.gain) .to({ value: 0 }, 1000) .onComplete(() => { titleMusic.stop(); }) .start(); } // Start background music if (!backgroundMusic.isPlaying) { backgroundMusic.setVolume(0); // Start at 0 volume if (listener.context.state === 'suspended') { listener.context.resume().then(() => { console.log('Audio context resumed'); playAndFadeInBackgroundMusic(); }); } else { playAndFadeInBackgroundMusic(); } } else { console.log('Background music is already playing'); } } else { console.log('Game has not started yet, keeping title music'); } } function playAndFadeInBackgroundMusic() { try { backgroundMusic.play(); console.log('Background music started successfully'); new TWEEN.Tween(backgroundMusic.gain.gain) .to({ value: 0.3 }, 1000) .start(); } catch (error) { console.error('Failed to start background music:', error); } } function startChaseMusic() { if (!chaseMusic.isPlaying) { chaseMusic.play(); chaseMusic.setLoopEnd(chaseMusic.buffer.duration - 1); // Ensure loop end is set to 1 second before the end backgroundMusic.setVolume(0); // Mute background music } } function stopChaseMusic() { if (chaseMusic.isPlaying) { chaseMusic.stop(); backgroundMusic.setVolume(0.3); // Restore background music volume } } function playRandomLaugh() { if (!gameStarted || laughSound.isPlaying) return; const segment = laughSegments[Math.floor(Math.random() * laughSegments.length)]; laughSound.offset = segment.start; laughSound.duration = segment.end - segment.start; laughSound.play(); laughSound.setLoop(false); // Update UI laughUI.style.opacity = '0.5'; // Ensure the sound stops at the end of the segment setTimeout(() => { if (laughSound.isPlaying) { laughSound.stop(); } // Reset UI laughUI.style.opacity = '1'; }, laughSound.duration * 1000); } let sleepSoundCooldown = false; function playSleepSound() { if (!gameStarted || sleepSoundCooldown) return; sleepSoundCooldown = true; // Update UI immediately sleepUI.style.opacity = '0.5'; // Start the sound after a 1-second delay, skipping 2 seconds ahead setTimeout(() => { if (sleepSound.isPlaying) { sleepSound.stop(); } sleepSound.offset = 2; // Skip 2 seconds ahead sleepSound.play(); }, 1000); // Reset UI and cooldown when the sound finishes setTimeout(() => { sleepUI.style.opacity = '1'; sleepSoundCooldown = false; }, (sleepSound.buffer.duration - 2) * 1000 + 1000); // Subtract 2 seconds from duration and add 1 second for initial delay } let isSwinging = false; function swingKnife() { if (!gameStarted || !character || isSwinging) return; isSwinging = true; // Play the sound if (sound.isPlaying) { sound.stop(); } sound.play(); // Update UI const cooldownSpan = knifeUI.querySelector('.cooldown'); cooldownSpan.textContent = 'Cooldown'; knifeUI.style.opacity = '0.5'; // Get the left arm and the knife const leftArm = character.children.find(child => child.position.x < -1 && child.position.y > 0); const knife = leftArm.children[0]; // Store the original rotations const originalKnifeRotation = knife.rotation.clone(); const originalArmRotation = leftArm.rotation.clone(); // Swing animation const swingDuration = 0.3; // seconds const swingAngle = Math.PI / 2; // 90 degrees const armRaiseAngle = Math.PI / 2; // Raise arm by 90 degrees (straight up) const swingTween = new TWEEN.Tween({ angle: 0, armAngle: 0 }) .to({ angle: swingAngle, armAngle: armRaiseAngle }, swingDuration * 1000) .easing(TWEEN.Easing.Cubic.Out) .onUpdate(function(obj) { knife.rotation.z = originalKnifeRotation.z - obj.angle; leftArm.rotation.x = originalArmRotation.x - obj.armAngle; // Note the minus sign // Check for collision with NPC at the peak of the swing if (obj.angle >= swingAngle / 2) { checkNPCHit(); } }) .onComplete(function() { // Return swing new TWEEN.Tween({ angle: swingAngle, armAngle: armRaiseAngle }) .to({ angle: 0, armAngle: 0 }, swingDuration * 1000) .easing(TWEEN.Easing.Cubic.In) .onUpdate(function(obj) { knife.rotation.z = originalKnifeRotation.z - obj.angle; leftArm.rotation.x = originalArmRotation.x - obj.armAngle; // Note the minus sign }) .onComplete(function() { isSwinging = false; // Reset UI const cooldownSpan = knifeUI.querySelector('.cooldown'); cooldownSpan.textContent = ''; knifeUI.style.opacity = '1'; }) .start(); }) .start(); } function checkNPCHit() { if (!character || !character.position) return; const characterPosition = character.position.clone(); // Check campground NPCs const campgroundNPCs = [maleNPC, femaleNPC]; campgroundNPCs.forEach(npc => { if (npc && npc.mesh && npc.mesh.position && !npc.isDead) { const npcPosition = npc.mesh.position.clone(); const distance = characterPosition.distanceTo(npcPosition); if (distance < 5) { // Adjust this value based on your scene scale damageNPC(npc, 20); // Damage amount per hit for campground NPCs } } }); // Check house NPC if (houseNPCMesh && houseNPCMesh.position && !npcIsDead) { const houseNPCPosition = houseNPCMesh.position.clone(); const distance = characterPosition.distanceTo(houseNPCPosition); if (distance < 5) { // Adjust this value based on your scene scale damageHouseNPC(20); // Damage amount per hit } } } // Array to store police cars const policeCars = []; // Function to update police car positions function updatePoliceCars(deltaTime) { for (let i = policeCars.length - 1; i >= 0; i--) { const car = policeCars[i]; if (!car || !car.mesh || !car.body || !car.target) { console.warn('Invalid police car object, skipping update'); continue; } if (!car.hasReachedTarget) { const direction = new THREE.Vector3().subVectors(car.target, car.mesh.position).normalize(); const distanceToTarget = car.mesh.position.distanceTo(car.target); if (distanceToTarget > 1) { // Update the physics body position car.body.position.vadd(new CANNON.Vec3(direction.x, direction.y, direction.z).scale(car.speed * deltaTime), car.body.position); car.body.quaternion.setFromVectors(new CANNON.Vec3(0, 0, 1), new CANNON.Vec3(direction.x, direction.y, direction.z)); // Update the mesh position and rotation to match the physics body car.mesh.position.copy(car.body.position); car.mesh.quaternion.copy(car.body.quaternion); } else { car.hasReachedTarget = true; console.log("Police car has reached its target"); } } } } // Function to check if police should arrive function checkPoliceArrival() { if (policeHasBeenCalled && gameTime >= policeArrivalTime && policeCars.length === 0) { spawnPoliceCars(); console.log("Police cars arrived at:", gameTime); } if (gameTime >= policemenSpawnTime && !policemenHaveSpawned) { policeCars.forEach(car => { if (car.hasReachedTarget && !car.policemanDeployed) { deployPolicemen(car); car.policemanDeployed = true; } }); policemenHaveSpawned = true; console.log("Policemen deployed at:", gameTime); } if (policeExitTime && gameTime >= policeExitTime && !policeHaveExited) { // Add any exit behavior here if needed policeHaveExited = true; console.log("Police exited at:", gameTime); } } // Function to handle police being called function callPolice() { if (!policeHasBeenCalled) { policeHasBeenCalled = true; policeArrivalTime = gameTime + 10; // Police arrive 10 seconds after being called policemenSpawnTime = policeArrivalTime + 10; // Policemen spawn 10 seconds after police arrive policeExitTime = policemenSpawnTime + 15; // Police exit 15 seconds after policemen spawn if (!policeNotificationShown) { showNotification("The Police have been called!"); policeNotificationShown = true; } console.log("Police called at:", gameTime); console.log("Police will arrive at:", policeArrivalTime); console.log("Policemen will spawn at:", policemenSpawnTime); } } // Function to spawn police cars function spawnPoliceCars() { const maxPoliceCars = 2; const numberOfCarsToSpawn = Math.max(0, maxPoliceCars - policeCars.length); const spawnPoints = [ new THREE.Vector3(-100, 0, -100), new THREE.Vector3(100, 0, -100) ]; for (let i = 0; i < numberOfCarsToSpawn; i++) { setTimeout(() => { spawnPoliceCar(spawnPoints[i]); }, i * 500); // 0.5 second delay between spawns } if (numberOfCarsToSpawn > 0) { console.log(`${numberOfCarsToSpawn} police cars spawned.`); } else { console.log("No new police cars spawned. Maximum number of police cars already present."); } } // Function to spawn a police car function spawnPoliceCar(spawnPoint) { if (policeCars.length >= 2) return; // Limit to 2 police cars const car = createPoliceCar(); car.position.copy(spawnPoint); scene.add(car); // Calculate parking positions near the house but not inside it const parkingPositions = [ new THREE.Vector3(20, 0, -20), // In front of the house, adjusted for new orientation new THREE.Vector3(40, 0, -20) // Also in front, but to the side, adjusted for new orientation ]; const parkingPosition = parkingPositions[policeCars.length]; // Create a physics body for the police car const scale = 0.6; // Use the same scale factor as in createPoliceCar const carShape = new CANNON.Box(new CANNON.Vec3(4.8 * scale, 2.4 * scale, 2.4 * scale)); const carBody = new CANNON.Body({ mass: 1000, // Reduced mass for the smaller car shape: carShape, position: new CANNON.Vec3(spawnPoint.x, spawnPoint.y, spawnPoint.z) }); world.addBody(carBody); // Create policemen NPCs around the car const policemanPositions = [ new THREE.Vector3(-3, 0, -1.5), // Left side of the car new THREE.Vector3(3, 0, -1.5) // Right side of the car ]; const policemen = policemanPositions.map(offset => { const position = spawnPoint.clone().add(offset); return createPolicemanNPC(position); }); // Add to the policeCars array policeCars.push({ mesh: car, body: carBody, target: parkingPosition, speed: 20 + Math.random() * 10, // Speed: Random between 20 and 30 hasReachedTarget: false, policemen: policemen }); // No need for a timer here, as policemen are already spawned around the car } // Function to create a policeman NPC function createPolicemanNPC(position) { const policemanGroup = new THREE.Group(); // Body const bodyGeometry = new THREE.BoxGeometry(1, 1.5, 0.5); const bodyMaterial = new THREE.MeshPhongMaterial({ color: 0x000080 }); // Navy blue const bodyMesh = new THREE.Mesh(bodyGeometry, bodyMaterial); bodyMesh.position.y = 0.75; policemanGroup.add(bodyMesh); // Head const headGeometry = new THREE.BoxGeometry(0.5, 0.5, 0.5); const headMaterial = new THREE.MeshPhongMaterial({ color: 0xFFD1DC }); // Light pink const headMesh = new THREE.Mesh(headGeometry, headMaterial); headMesh.position.y = 1.75; policemanGroup.add(headMesh); // Hat const hatGeometry = new THREE.BoxGeometry(0.6, 0.2, 0.6); const hatMaterial = new THREE.MeshPhongMaterial({ color: 0x000080 }); // Navy blue const hatMesh = new THREE.Mesh(hatGeometry, hatMaterial); hatMesh.position.y = 2.1; policemanGroup.add(hatMesh); // Arms and Legs const limbGeometry = new THREE.BoxGeometry(0.25, 0.75, 0.25); const limbMaterial = new THREE.MeshPhongMaterial({ color: 0x000080 }); // Navy blue const leftArm = new THREE.Mesh(limbGeometry, limbMaterial); leftArm.position.set(-0.625, 0.75, 0); policemanGroup.add(leftArm); const rightArm = new THREE.Mesh(limbGeometry, limbMaterial); rightArm.position.set(0.625, 0.75, 0); policemanGroup.add(rightArm); const leftLeg = new THREE.Mesh(limbGeometry, limbMaterial); leftLeg.position.set(-0.25, -0.375, 0); policemanGroup.add(leftLeg); const rightLeg = new THREE.Mesh(limbGeometry, limbMaterial); rightLeg.position.set(0.25, -0.375, 0); policemanGroup.add(rightLeg); policemanGroup.position.copy(position); policemanGroup.scale.set(2, 2, 2); scene.add(policemanGroup); // Create physics body for the policeman const policemanShape = new CANNON.Box(new CANNON.Vec3(0.5, 1.5, 0.25)); const policemanBody = new CANNON.Body({ mass: 80, shape: policemanShape, position: new CANNON.Vec3(position.x, position.y + 1.5, position.z), // Adjusted Y position material: characterPhysMaterial }); world.addBody(policemanBody); return { mesh: policemanGroup, body: policemanBody, isDeployed: false }; } // Function to deploy policemen from the car function deployPolicemen(policeCar) { if (policeCar.hasReachedTarget && !policeHaveExited) { policeCar.policemen.forEach((policeman, index) => { const offset = index === 0 ? -2 : 2; const exitPosition = policeCar.mesh.position.clone().add(new THREE.Vector3(offset, 0, 0)); // Animate policeman exiting the car new TWEEN.Tween(policeman.mesh.position) .to(exitPosition, 1000) .easing(TWEEN.Easing.Quadratic.Out) .start(); policeman.body.position.copy(exitPosition); policeman.isDeployed = true; }); policeCar.policemanDeployed = true; } } function spawnPoliceNPC(position) { const npcGeometry = new THREE.BoxGeometry(1, 2, 1); const npcMaterial = new THREE.MeshPhongMaterial({ color: 0x0000FF }); const npcMesh = new THREE.Mesh(npcGeometry, npcMaterial); npcMesh.position.copy(position); npcMesh.position.y += 1; // Raise the NPC above the ground scene.add(npcMesh); const npcBody = new CANNON.Body({ mass: 80, shape: new CANNON.Box(new CANNON.Vec3(0.5, 1, 0.5)), position: new CANNON.Vec3(position.x, position.y + 1, position.z), material: characterPhysMaterial }); world.addBody(npcBody); policeNPCs.push({ mesh: npcMesh, body: npcBody, lastShotTime: 0 }); } // Policemen waypoints const policeWaypoints = [ new THREE.Vector3(20, 3, -20), new THREE.Vector3(40, 3, -20), new THREE.Vector3(40, 3, -40), new THREE.Vector3(20, 3, -40) ]; function animatePoliceNPC(npcMesh, direction, speed) { // Simple leg movement const leftLeg = npcMesh.children.find(child => child.position.x < 0 && child.position.y < 0); const rightLeg = npcMesh.children.find(child => child.position.x > 0 && child.position.y < 0); if (leftLeg && rightLeg) { if (direction.length() > 0.01) { const animationSpeed = speed > 3 ? 0.04 : 0.02; // Faster animation for running const legAngle = Math.sin(Date.now() * animationSpeed) * 0.5; leftLeg.rotation.x = -legAngle; rightLeg.rotation.x = legAngle; } else { leftLeg.rotation.x = 0; rightLeg.rotation.x = 0; } } // Simple arm movement const leftArm = npcMesh.children.find(child => child.position.x < -0.5 && child.position.y > 0); const rightArm = npcMesh.children.find(child => child.position.x > 0.5 && child.position.y > 0); if (leftArm && rightArm) { if (direction.length() > 0.01) { const animationSpeed = speed > 3 ? 0.04 : 0.02; // Faster animation for running const armAngle = Math.sin(Date.now() * animationSpeed) * 0.5; leftArm.rotation.x = armAngle; rightArm.rotation.x = -armAngle; } else { leftArm.rotation.x = 0; rightArm.rotation.x = 0; } } } function updatePoliceNPCs(deltaTime) { if (!policemenHaveSpawned) return; // Don't update if policemen haven't spawned yet policeCars.forEach(car => { if (car.hasReachedTarget) { car.policemen.forEach(policeman => { if (!policeman.isDeployed) return; if (!character || !characterBody) return; const characterPosition = new THREE.Vector3().copy(characterBody.position); const policemanPosition = new THREE.Vector3().copy(policeman.body.position); const distanceToPlayer = policemanPosition.distanceTo(characterPosition); const detectionRadius = 30; // Increased detection radius for police let direction = new THREE.Vector3(); let targetPosition; if (distanceToPlayer <= detectionRadius) { // Chase the player more aggressively direction.subVectors(characterPosition, policemanPosition).normalize(); targetPosition = characterPosition; policeman.state = 'chasing'; } else { // Patrol with a wider search pattern policeman.state = 'searching'; if (!policeman.waypointIndex) policeman.waypointIndex = 0; targetPosition = policeWaypoints[policeman.waypointIndex]; direction.subVectors(targetPosition, policemanPosition).normalize(); // Check if reached waypoint if (policemanPosition.distanceTo(targetPosition) < 1) { policeman.waypointIndex = (policeman.waypointIndex + 1) % policeWaypoints.length; } } // Increase chase speed and make patrolling faster const speed = policeman.state === 'chasing' ? 8 : 5; // Apply the calculated velocity policeman.body.velocity.set( direction.x * speed, policeman.body.velocity.y, direction.z * speed ); // Update mesh position and rotation policeman.mesh.position.copy(policeman.body.position); if (direction.length() > 0.01) { const targetRotation = Math.atan2(direction.x, direction.z); policeman.mesh.rotation.y = targetRotation; } // Animate policeman animatePoliceNPC(policeman.mesh, direction, speed); // Attempt to shoot more frequently when chasing if (policeman.state === 'chasing') { if (policeman.lastShotTime === undefined) { policeman.lastShotTime = Date.now(); } if (Date.now() - policeman.lastShotTime > 1500) { // Reduced time between shots shootAtPlayer(policeman); policeman.lastShotTime = Date.now(); } } }); } }); } function shootAtPlayer(npc) { if (!character || !characterBody || !npc || !npc.body || !npc.mesh) return; const characterPosition = new THREE.Vector3(); const npcPosition = new THREE.Vector3(); if (characterBody.position) { characterPosition.copy(characterBody.position); } else { return; // Exit if characterBody.position is undefined } if (npc.body.position) { npcPosition.copy(npc.body.position); } else { return; // Exit if npc.body.position is undefined } const direction = new THREE.Vector3() .subVectors(characterPosition, npcPosition) .normalize(); const raycaster = new THREE.Raycaster(npcPosition, direction); const intersects = raycaster.intersectObject(character); if (intersects.length > 0 && intersects[0].distance < 20) { console.log("Player hit!"); // Here you can implement damage to the player // For example: damagePlayer(10); } // Play gunshot sound if (gunshot) { if (gunshot.isPlaying) { gunshot.stop(); } gunshot.play(); } } function damageNPC(npc, damage) { npc.health -= damage; if (npc.health <= 0) { npc.health = 0; npcDeath(npc); } else { // Visual feedback for damage (e.g., temporary color change) npc.mesh.traverse((child) => { if (child instanceof THREE.Mesh) { child.material.color.setHex(0xFF0000); // Red color setTimeout(() => { child.material.color.setHex(0xFFA500); // Reset to original color }, 200); } }); } } // Create a police car model using basic shapes function createPoliceCar() { const car = new THREE.Group(); const scale = 0.6; // Scale factor to make the car smaller const wheelHeight = 1.2 * scale; // Height of the wheels const bodyHeight = 2.4 * scale; // Adjust this value to set how high the body should be above the wheels // Car body const bodyGeometry = new THREE.BoxGeometry(9.6 * scale, 4.8 * scale, 4.8 * scale); const bodyMaterial = new THREE.MeshPhongMaterial({ color: 0x000080 }); // Dark blue const bodyMesh = new THREE.Mesh(bodyGeometry, bodyMaterial); bodyMesh.position.y = wheelHeight + bodyHeight; // Position body above wheels car.add(bodyMesh); // Car roof const roofGeometry = new THREE.BoxGeometry(4.8 * scale, 2.4 * scale, 4.8 * scale); const roofMaterial = new THREE.MeshPhongMaterial({ color: 0x000080 }); // Dark blue const roofMesh = new THREE.Mesh(roofGeometry, roofMaterial); roofMesh.position.y = wheelHeight + bodyHeight + (3.6 * scale); // Position roof above body car.add(roofMesh); // Wheels const wheelGeometry = new THREE.CylinderGeometry(1.2 * scale, 1.2 * scale, 0.96 * scale, 32); const wheelMaterial = new THREE.MeshPhongMaterial({ color: 0x1a1a1a }); // Dark grey const wheelPositions = [ [-3.6 * scale, wheelHeight / 2, 2.4 * scale], [3.6 * scale, wheelHeight / 2, 2.4 * scale], [-3.6 * scale, wheelHeight / 2, -2.4 * scale], [3.6 * scale, wheelHeight / 2, -2.4 * scale] ]; wheelPositions.forEach(position => { const wheelMesh = new THREE.Mesh(wheelGeometry, wheelMaterial); wheelMesh.rotation.x = Math.PI / 2; // Rotate wheels 90 degrees around x-axis wheelMesh.position.set(...position); car.add(wheelMesh); }); // Police lights const lightGeometry = new THREE.BoxGeometry(1.2 * scale, 0.48 * scale, 2.4 * scale); const redLightMaterial = new THREE.MeshPhongMaterial({ color: 0xff0000, emissive: 0xff0000 }); const blueLightMaterial = new THREE.MeshPhongMaterial({ color: 0x0000ff, emissive: 0x0000ff }); const redLight = new THREE.Mesh(lightGeometry, redLightMaterial); redLight.position.set(-1.2 * scale, wheelHeight + bodyHeight + (4.8 * scale), 0); redLight.rotation.y = Math.PI / 2; // Rotate red light 90 degrees around y-axis car.add(redLight); const blueLight = new THREE.Mesh(lightGeometry, blueLightMaterial); blueLight.position.set(1.2 * scale, wheelHeight + bodyHeight + (4.8 * scale), 0); blueLight.rotation.y = Math.PI / 2; // Rotate blue light 90 degrees around y-axis car.add(blueLight); // Make car cast and receive shadows car.traverse((object) => { if (object instanceof THREE.Mesh) { object.castShadow = true; object.receiveShadow = true; } }); // Elevate the entire car car.position.y = 1.2 * scale; // Adjust this value to set how high above the ground the car should be // Rotate the entire car 90 degrees around the y-axis car.rotation.y = Math.PI / 2; // Add flashing lights let isRedOn = true; setInterval(() => { isRedOn = !isRedOn; redLight.material.emissive.setHex(isRedOn ? 0xff0000 : 0x000000); blueLight.material.emissive.setHex(isRedOn ? 0x000000 : 0x0000ff); }, 500); // Change every 500ms (0.5 seconds) return car; } function npcDeath(npc) { npc.isDead = true; // Ensure the body is not static before death npc.body.type = CANNON.Body.DYNAMIC; // Reset velocity npc.body.velocity.set(0, 0, 0); npc.body.angularVelocity.set(0, 0, 0); // Rotate the NPC to lie flat on the ground const deathRotation = new CANNON.Quaternion(); deathRotation.setFromAxisAngle(new CANNON.Vec3(1, 0, 0), -Math.PI / 2); npc.body.quaternion = deathRotation; // Adjust the position to account for the new rotation npc.body.position.y = 1; // Adjust this value as needed // Update the mesh to match the body npc.mesh.quaternion.copy(npc.body.quaternion); npc.mesh.position.copy(npc.body.position); // Remove any constraints or forces that might be keeping it upright npc.body.fixedRotation = false; // Play death sound if (deathSound.isPlaying) { deathSound.stop(); } deathSound.play(); // Create blood pool const bloodPoolPosition = npc.mesh.position.clone(); bloodPoolPosition.y = 0.02; // Slightly above the ground createBloodPool(bloodPoolPosition); } function damageHouseNPC(damage) { houseNPCData.health -= damage; if (houseNPCData.health <= 0) { houseNPCData.health = 0; houseNPCDeath(); } else if (houseNPCMesh) { // Visual feedback for damage (e.g., temporary color change) houseNPCMesh.traverse((child) => { if (child instanceof THREE.Mesh) { child.material.color.setHex(0xFF0000); // Red color setTimeout(() => { child.material.color.setHex(0xFFA500); // Reset to original color }, 200); } }); } } function houseNPCDeath() { houseNPCData.isDead = true; if (houseNPCMesh && npcBody) { // Ensure the body is not static before death npcBody.type = CANNON.Body.DYNAMIC; // Reset velocity npcBody.velocity.set(0, 0, 0); npcBody.angularVelocity.set(0, 0, 0); // Rotate the NPC to lie flat on the ground const deathRotation = new CANNON.Quaternion(); deathRotation.setFromAxisAngle(new CANNON.Vec3(1, 0, 0), -Math.PI / 2); npcBody.quaternion = deathRotation; // Adjust the position to account for the new rotation npcBody.position.y = 1; // Adjust this value as needed // Update the mesh to match the body houseNPCMesh.quaternion.copy(npcBody.quaternion); houseNPCMesh.position.copy(npcBody.position); // Remove any constraints or forces that might be keeping it upright npcBody.fixedRotation = false; // Change color to indicate death houseNPCMesh.traverse((child) => { if (child instanceof THREE.Mesh) { child.material.color.setHex(0x888888); // Grey color } }); } // Play death sound if (deathSound.isPlaying) { deathSound.stop(); } deathSound.play(); // Create blood pool if (houseNPCMesh) { const bloodPoolPosition = houseNPCMesh.position.clone(); bloodPoolPosition.y = 0.02; // Slightly above the ground createBloodPool(bloodPoolPosition); } } window.addEventListener('keyup', (event) => { if (event.code === 'Space') { keysPressed.space = false; } else if (event.code === 'ShiftLeft' || event.code === 'ShiftRight') { keysPressed.shift = false; } else if (keysPressed.hasOwnProperty(event.key.toLowerCase())) { keysPressed[event.key.toLowerCase()] = false; } }); // Create a simple character made of rectangles and a custom head function createSimpleCharacter() { const group = new THREE.Group(); // Body (rectangle) const bodyGeometry = new THREE.BoxGeometry(2, 3, 1); const frontShirtTexture = textureLoader.load('https://play.rosebud.ai/assets/shirtfront.png?vPAz'); const backShirtTexture = textureLoader.load('https://play.rosebud.ai/assets/shirtback.png?8ONO'); const bodyMaterials = [ new THREE.MeshPhongMaterial({ color: 0xffffff }), // Right new THREE.MeshPhongMaterial({ color: 0xffffff }), // Left new THREE.MeshPhongMaterial({ color: 0xffffff }), // Top new THREE.MeshPhongMaterial({ color: 0xffffff }), // Bottom new THREE.MeshPhongMaterial({ map: frontShirtTexture }), // Front new THREE.MeshPhongMaterial({ map: backShirtTexture }) // Back ]; const bodyMesh = new THREE.Mesh(bodyGeometry, bodyMaterials); bodyMesh.position.y = 1.5; group.add(bodyMesh); // Head (custom geometry with face on front) const headGeometry = new THREE.BoxGeometry(1, 1, 1); const faceTexture = textureLoader.load('https://play.rosebud.ai/assets/theface.png?lY8Y'); const headMaterial = new THREE.MeshPhongMaterial({ color: 0xffffff // White to match the body }); const headMesh = new THREE.Mesh(headGeometry, headMaterial); headMesh.position.y = 3.5; // Create materials for each side of the head const materials = [ new THREE.MeshPhongMaterial({ color: 0xffffff }), // Right new THREE.MeshPhongMaterial({ color: 0xffffff }), // Left new THREE.MeshPhongMaterial({ color: 0xffffff }), // Top new THREE.MeshPhongMaterial({ color: 0xffffff }), // Bottom new THREE.MeshPhongMaterial({ map: faceTexture }), // Front new THREE.MeshPhongMaterial({ color: 0xffffff }) // Back ]; headMesh.material = materials; group.add(headMesh); // Add hair const hairMaterial = new THREE.MeshPhongMaterial({ color: 0x000000 }); // Black color for hair // Top hair const topHair = new THREE.Mesh(new THREE.BoxGeometry(1, 0.1, 1), hairMaterial); topHair.position.set(0, 0.55, 0); headMesh.add(topHair); // Left side hair const leftHair = new THREE.Mesh(new THREE.BoxGeometry(0.1, 1, 1), hairMaterial); leftHair.position.set(-0.55, 0, 0); headMesh.add(leftHair); // Right side hair const rightHair = new THREE.Mesh(new THREE.BoxGeometry(0.1, 1, 1), hairMaterial); rightHair.position.set(0.55, 0, 0); headMesh.add(rightHair); // Back hair const backHair = new THREE.Mesh(new THREE.BoxGeometry(1, 1, 0.1), hairMaterial); backHair.position.set(0, 0, -0.55); headMesh.add(backHair); // Arms (rectangles) const armGeometry = new THREE.BoxGeometry(0.5, 2, 0.5); const armMaterial = new THREE.MeshPhongMaterial({ color: 0xffffff // Changed to white }); const leftArm = new THREE.Mesh(armGeometry, armMaterial); leftArm.position.set(-1.25, 1.5, 0); leftArm.name = 'leftArm'; group.add(leftArm); const rightArm = new THREE.Mesh(armGeometry, armMaterial); rightArm.position.set(1.25, 1.5, 0); rightArm.name = 'rightArm'; group.add(rightArm); // Legs (rectangles) const legGeometry = new THREE.BoxGeometry(0.75, 2, 0.75); const legMaterial = new THREE.MeshPhongMaterial({ color: 0x000000 // Changed to black }); const leftLeg = new THREE.Mesh(legGeometry, legMaterial); leftLeg.position.set(-0.5, -1, 0); leftLeg.name = 'leftLeg'; group.add(leftLeg); const rightLeg = new THREE.Mesh(legGeometry, legMaterial); rightLeg.position.set(0.5, -1, 0); rightLeg.name = 'rightLeg'; group.add(rightLeg); group.traverse((child) => { if (child.isMesh) { child.castShadow = true; child.receiveShadow = true; } }); // Create a kitchen knife const knifeGroup = new THREE.Group(); // Knife blade const bladeGeometry = new THREE.BoxGeometry(0.1, 0.8, 0.02); const bladeMaterial = new THREE.MeshPhongMaterial({ color: 0xcccccc }); // Silver color const bladeMesh = new THREE.Mesh(bladeGeometry, bladeMaterial); bladeMesh.position.y = 0.4; // Position the blade knifeGroup.add(bladeMesh); // Knife handle const handleGeometry = new THREE.BoxGeometry(0.15, 0.4, 0.05); const handleMaterial = new THREE.MeshPhongMaterial({ color: 0x4d2926 }); // Dark brown color const handleMesh = new THREE.Mesh(handleGeometry, handleMaterial); handleMesh.position.y = -0.2; // Position the handle below the blade knifeGroup.add(handleMesh); // Position the knife in the left hand knifeGroup.position.set(-0.3, -0.6, 0.4); // Moved out more and slightly up knifeGroup.rotation.set(Math.PI / 2, 0, Math.PI / 8); // Rotated more forward leftArm.add(knifeGroup); // Ensure the knife moves with the left arm leftArm.add(knifeGroup); return group; } // Create the simple character character = createSimpleCharacter(); character.visible = false; // Set initial visibility to false scene.add(character); // 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, restitution: 0.0, // Set restitution to 0 to prevent bouncing }); const characterShape = new CANNON.Box(new CANNON.Vec3(1, 2.5, 0.5)); const shapeOffset = new CANNON.Vec3(0, 2.5, 0); characterBody.addShape(characterShape, shapeOffset); characterBody.position.set(0, characterConfig.startHeight, 0); // Reset to ground level outside the house characterBody.velocity.set(0, 0, 0); // Kept zero initial velocity 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; } }); 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; } } }); // Remove animation setup as we won't use complex animations for this simple character // Update character movement function updateCharacterMovement(deltaTime) { if (!character || !characterBody) return; // Get camera's forward and right vectors const cameraForward = new THREE.Vector3(); const cameraRight = new THREE.Vector3(); if (camera.getWorldDirection) { camera.getWorldDirection(cameraForward); cameraForward.y = 0; cameraForward.normalize(); cameraRight.crossVectors(new THREE.Vector3(0, 1, 0), cameraForward).normalize(); } else { console.error('Camera is not properly initialized'); return; } // 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); // Define maximum stamina and calculate threshold const MAX_STAMINA = 100; const STAMINA_THRESHOLD = MAX_STAMINA / 6; // Check if running (only allow if stamina is above threshold) isRunning = keysPressed.shift && playerStamina > STAMINA_THRESHOLD; // Handle stamina if (isRunning && moveDirection.length() > 0) { playerStamina = Math.max(0, playerStamina - characterConfig.staminaDrain * deltaTime); } else { playerStamina = Math.min(MAX_STAMINA, playerStamina + characterConfig.staminaRegen * deltaTime); } // Different handling for ground vs air movement if (isGrounded) { // Ground movement if (moveDirection.length() > 0) { // Calculate target velocity const speed = isRunning ? characterConfig.runSpeed : characterConfig.walkSpeed; const targetVelocity = new THREE.Vector2( moveDirection.x * speed, moveDirection.z * speed ); // Interpolate current velocity towards target currentVelocity.lerp(targetVelocity, characterConfig.acceleration * deltaTime); // Update character rotation if (moveDirection.length() > 0) { 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 simple character animation if (character && characterBody) { const verticalVelocity = characterBody.velocity.y; const horizontalSpeed = new THREE.Vector2(characterBody.velocity.x, characterBody.velocity.z).length(); // Find character parts const leftLeg = character.getObjectByName('leftLeg'); const rightLeg = character.getObjectByName('rightLeg'); const leftArm = character.getObjectByName('leftArm'); const rightArm = character.getObjectByName('rightArm'); // Simple leg movement if (leftLeg && rightLeg) { if (horizontalSpeed > 0.1) { // Walking/running animation const animationSpeed = 0.02 * (2 / 3); // Slowed down to 2/3 of original speed const legAngle = Math.sin(Date.now() * animationSpeed) * 0.5; leftLeg.rotation.x = -legAngle; rightLeg.rotation.x = legAngle; } else { // Reset legs when idle leftLeg.rotation.x = 0; rightLeg.rotation.x = 0; } } // Simple arm movement if (leftArm && rightArm) { if (!isGrounded) { // Arms up when jumping leftArm.rotation.x = -Math.PI / 4; rightArm.rotation.x = -Math.PI / 4; } else if (horizontalSpeed > 0.1) { // Arm swing when walking/running const animationSpeed = 0.02 * (2 / 3); // Slowed down to 2/3 of original speed const armAngle = Math.sin(Date.now() * animationSpeed) * 0.5; leftArm.rotation.x = armAngle; rightArm.rotation.x = -armAngle; } else { // Reset arms when idle leftArm.rotation.x = 0; rightArm.rotation.x = 0; } } } } // Update camera to follow the character function updateCamera() { if (!character) return; // Get character's position and current camera direction const characterPos = character.position.clone(); const cameraDir = new THREE.Vector3(); camera.getWorldDirection(cameraDir); // Calculate target position (character's upper body) let targetPosition = characterPos.clone().add(new THREE.Vector3(0, characterConfig.height / 2, 0)); // Get camera's current horizontal distance to character const cameraToCharacter = new THREE.Vector3(); cameraToCharacter.subVectors(camera.position, characterPos); cameraToCharacter.y = 0; // Ignore vertical distance const currentDistance = cameraToCharacter.length(); // Check if character is moving towards camera const movementTowardCamera = moveDirection.dot(cameraToCharacter.normalize()) < 0; // Adjust camera position if too close if (movementTowardCamera && currentDistance < cameraSettings.minFollowDistance) { const idealOffset = cameraToCharacter.normalize().multiplyScalar(cameraSettings.minFollowDistance); idealOffset.y = camera.position.y - characterPos.y; const newCameraPos = characterPos.clone().add(idealOffset); camera.position.lerp(newCameraPos, cameraSettings.smoothSpeed * 2); } // Update OrbitControls target controls.target.lerp(targetPosition, cameraSettings.smoothSpeed); // Update controls controls.update(); } // ========================= // End of Character Integration // ========================= // Create initial scene terrain = createTerrain(); // Function to create a campground undercover table with benches function createCampgroundTable() { const tableGroup = new THREE.Group(); // Table top const tableTopGeometry = new THREE.BoxGeometry(8, 0.3, 6); const tableTopMaterial = new THREE.MeshPhongMaterial({ color: 0x8B4513 }); const tableTop = new THREE.Mesh(tableTopGeometry, tableTopMaterial); tableTop.position.y = 2.5; tableGroup.add(tableTop); // Table legs const legGeometry = new THREE.BoxGeometry(0.3, 2.5, 0.3); const legMaterial = new THREE.MeshPhongMaterial({ color: 0x8B4513 }); for (let i = -1; i <= 1; i += 2) { for (let j = -1; j <= 1; j += 2) { const leg = new THREE.Mesh(legGeometry, legMaterial); leg.position.set(i * 3.85, 1.25, j * 2.85); tableGroup.add(leg); } } // Benches const benchGeometry = new THREE.BoxGeometry(8, 0.3, 1.5); const benchMaterial = new THREE.MeshPhongMaterial({ color: 0x8B4513 }); const bench1 = new THREE.Mesh(benchGeometry, benchMaterial); bench1.position.set(0, 1.4, 3.75); tableGroup.add(bench1); const bench2 = new THREE.Mesh(benchGeometry, benchMaterial); bench2.position.set(0, 1.4, -3.75); tableGroup.add(bench2); // Roof const roofGeometry = new THREE.ConeGeometry(7, 3, 4); const roofMaterial = new THREE.MeshPhongMaterial({ color: 0x8B4513 }); const roof = new THREE.Mesh(roofGeometry, roofMaterial); roof.position.y = 6; roof.rotation.y = Math.PI / 4; tableGroup.add(roof); // Make table cast and receive shadows tableGroup.traverse((object) => { if (object instanceof THREE.Mesh) { object.castShadow = true; object.receiveShadow = true; } }); return tableGroup; } // Create and add the campground table to the scene const campgroundTable = createCampgroundTable(); campgroundTable.position.set(-30, 0, 30); // Position the table in the scene scene.add(campgroundTable); // Function to create an NPC function createTableNPC(gender, position) { const npcGroup = new THREE.Group(); // NPC body const bodyGeometry = new THREE.BoxGeometry(1, 1.5, 0.5); const bodyMaterial = new THREE.MeshPhongMaterial({ color: gender === 'male' ? 0x0000FF : 0xFF69B4 }); const bodyMesh = new THREE.Mesh(bodyGeometry, bodyMaterial); bodyMesh.position.y = 0.75; npcGroup.add(bodyMesh); // NPC head const headGeometry = new THREE.BoxGeometry(0.5, 0.5, 0.5); const headMaterial = new THREE.MeshPhongMaterial({ color: 0xFFD1DC }); const headMesh = new THREE.Mesh(headGeometry, headMaterial); headMesh.position.y = 1.75; npcGroup.add(headMesh); // NPC limbs const limbGeometry = new THREE.BoxGeometry(0.25, 0.75, 0.25); const limbMaterial = new THREE.MeshPhongMaterial({ color: 0xFFD1DC }); // Arms const leftArm = new THREE.Mesh(limbGeometry, limbMaterial); leftArm.position.set(-0.625, 0.75, 0); npcGroup.add(leftArm); const rightArm = new THREE.Mesh(limbGeometry, limbMaterial); rightArm.position.set(0.625, 0.75, 0); npcGroup.add(rightArm); // Legs const leftLeg = new THREE.Mesh(limbGeometry, limbMaterial); leftLeg.position.set(-0.25, -0.375, 0); npcGroup.add(leftLeg); const rightLeg = new THREE.Mesh(limbGeometry, limbMaterial); rightLeg.position.set(0.25, -0.375, 0); npcGroup.add(rightLeg); npcGroup.position.copy(position); npcGroup.scale.set(2, 2, 2); // Create NPC physics body const npcShape = new CANNON.Box(new CANNON.Vec3(1, 2, 0.5)); const npcBody = new CANNON.Body({ mass: 5, shape: npcShape, position: new CANNON.Vec3(position.x, position.y, position.z), fixedRotation: true, material: characterPhysMaterial }); world.addBody(npcBody); return { mesh: npcGroup, body: npcBody, gender: gender, health: 100, isDead: false, hasScreamed: false, lastScreamTime: 0, lastSawPlayerTime: 0, isCallingPolice: false, lastScreamTime: 0, isBeingChased: false }; } // Create and add NPCs around the campground table const maleNPC = createTableNPC('male', new THREE.Vector3(-32, 3, 32)); const femaleNPC = createTableNPC('female', new THREE.Vector3(-28, 3, 28)); scene.add(maleNPC.mesh); scene.add(femaleNPC.mesh); // Define waypoints for campground NPCs const campgroundWaypoints = [ new THREE.Vector3(-32, 3, 32), new THREE.Vector3(-28, 3, 28), new THREE.Vector3(-30, 3, 30), new THREE.Vector3(-34, 3, 34), new THREE.Vector3(-26, 3, 26) ]; // Initialize waypoint indices for campground NPCs let maleNPCWaypointIndex = 0; let femaleNPCWaypointIndex = 2; // Start at a different waypoint // Function to create a detailed, enterable house function createDetailedHouse() { const house = new THREE.Group(); // Main structure const wallMaterial = new THREE.MeshPhongMaterial({ color: 0xF0E68C }); // Khaki color const floorMaterial = new THREE.MeshPhongMaterial({ color: 0x8B4513 }); // Dark wood color const roofMaterial = new THREE.MeshPhongMaterial({ color: 0x8B4513 }); // Brown roof // Floor const floorGeometry = new THREE.BoxGeometry(20, 0.5, 15); const floorMesh = new THREE.Mesh(floorGeometry, floorMaterial); floorMesh.position.y = 0.25; house.add(floorMesh); // Walls const wallHeight = 8; const frontWall = new THREE.Mesh(new THREE.BoxGeometry(20, wallHeight, 0.5), wallMaterial); frontWall.position.set(0, wallHeight / 2, 7.25); house.add(frontWall); const backWall = new THREE.Mesh(new THREE.BoxGeometry(20, wallHeight, 0.5), wallMaterial); backWall.position.set(0, wallHeight / 2, -7.25); house.add(backWall); const leftWall = new THREE.Mesh(new THREE.BoxGeometry(0.5, wallHeight, 15), wallMaterial); leftWall.position.set(-9.75, wallHeight / 2, 0); house.add(leftWall); const rightWall = new THREE.Mesh(new THREE.BoxGeometry(0.5, wallHeight, 15), wallMaterial); rightWall.position.set(9.75, wallHeight / 2, 0); house.add(rightWall); // Roof const roofGeometry = new THREE.ConeGeometry(15, 5, 4); const roofMesh = new THREE.Mesh(roofGeometry, roofMaterial); roofMesh.position.y = wallHeight + 2.5; roofMesh.rotation.y = Math.PI / 4; house.add(roofMesh); // Windows const windowMaterial = new THREE.MeshPhongMaterial({ color: 0x87CEEB, transparent: true, opacity: 0.7 }); const windowGeometry = new THREE.PlaneGeometry(3, 2); const frontWindow1 = new THREE.Mesh(windowGeometry, windowMaterial); frontWindow1.position.set(-5, 5, 7.51); house.add(frontWindow1); const frontWindow2 = new THREE.Mesh(windowGeometry, windowMaterial); frontWindow2.position.set(5, 5, 7.51); house.add(frontWindow2); // Front door const doorGeometry = new THREE.BoxGeometry(2, 4, 0.5); const doorMaterial = new THREE.MeshPhongMaterial({ color: 0x8B4513 }); const frontDoor = new THREE.Mesh(doorGeometry, doorMaterial); frontDoor.position.set(0, 2, 7.51); house.add(frontDoor); // Back patio const patioGeometry = new THREE.BoxGeometry(10, 0.5, 5); const patioMesh = new THREE.Mesh(patioGeometry, floorMaterial); patioMesh.position.set(0, 0.25, -10); house.add(patioMesh); // Glass sliding door const slidingDoorGeometry = new THREE.BoxGeometry(8, 4, 0.1); const glassMaterial = new THREE.MeshPhongMaterial({ color: 0xADD8E6, transparent: true, opacity: 0.5 }); const slidingDoor = new THREE.Mesh(slidingDoorGeometry, glassMaterial); slidingDoor.position.set(0, 2, -7.3); house.add(slidingDoor); // Fence const fencePostGeometry = new THREE.BoxGeometry(0.2, 2, 0.2); const fenceMaterial = new THREE.MeshPhongMaterial({ color: 0x8B4513 }); const fenceSegmentGeometry = new THREE.BoxGeometry(2, 0.5, 0.1); for (let i = -10; i <= 10; i += 2) { const fencePost = new THREE.Mesh(fencePostGeometry, fenceMaterial); fencePost.position.set(i, 1, -15); house.add(fencePost); if (i < 10) { const fenceSegment = new THREE.Mesh(fenceSegmentGeometry, fenceMaterial); fenceSegment.position.set(i + 1, 1.5, -15); house.add(fenceSegment); } } // Make house cast and receive shadows house.traverse((object) => { if (object instanceof THREE.Mesh) { object.castShadow = true; object.receiveShadow = true; } }); return house; } // Create and add the detailed house to the scene const house = createDetailedHouse(); house.position.set(30, 0, -30); // Position the house in the scene house.scale.set(2, 2, 2); // Increased scale to make the house even larger scene.add(house); // Create collision bodies for the house function createHouseCollision() { const wallMaterial = new CANNON.Material('wall'); // Back wall (with sliding door opening) const backWallLeft = new CANNON.Body({ mass: 0, material: wallMaterial }); backWallLeft.addShape(new CANNON.Box(new CANNON.Vec3(12, 8, 0.25).scale(2))); backWallLeft.position.set(18, 8, -44.5); world.addBody(backWallLeft); const backWallRight = new CANNON.Body({ mass: 0, material: wallMaterial }); backWallRight.addShape(new CANNON.Box(new CANNON.Vec3(12, 8, 0.25).scale(2))); backWallRight.position.set(42, 8, -44.5); world.addBody(backWallRight); // Left wall (shorter to leave door opening) const leftWall = new CANNON.Body({ mass: 0, material: wallMaterial }); leftWall.addShape(new CANNON.Box(new CANNON.Vec3(15, 8, 0.25).scale(2))); // Reduced length leftWall.quaternion.setFromAxisAngle(new CANNON.Vec3(0, 1, 0), Math.PI / 2); leftWall.position.set(10.5, 8, -35); // Moved back world.addBody(leftWall); // Right wall (shorter to leave door opening) const rightWall = new CANNON.Body({ mass: 0, material: wallMaterial }); rightWall.addShape(new CANNON.Box(new CANNON.Vec3(15, 8, 0.25).scale(2))); // Reduced length rightWall.quaternion.setFromAxisAngle(new CANNON.Vec3(0, 1, 0), Math.PI / 2); rightWall.position.set(49.5, 8, -35); // Moved back world.addBody(rightWall); // We're not adding a floor collision body to allow the character to enter the house // Add a large collision box for the entire house const houseBody = new CANNON.Body({ mass: 0, material: wallMaterial, type: CANNON.Body.STATIC, collisionFilterGroup: 2, // Assign to group 2 collisionFilterMask: 4 // Will only collide with group 4 (police cars) }); houseBody.addShape(new CANNON.Box(new CANNON.Vec3(20, 8, 15).scale(2))); houseBody.position.set(30, 8, -30); world.addBody(houseBody); } // Call the function to create house collision createHouseCollision(); /** * Variables for ball spawning */ const ballSpawnInterval = 1; // seconds between ball spawns let timeSinceLastBall = 0; const balls = []; const maxBalls = 20; // Limit the number of balls /** * Function to spawn a new bouncy ball with a random color */ function spawnBall() { // Remove oldest ball if we have reached maxBalls if (balls.length >= maxBalls) { const oldestBall = balls.shift(); scene.remove(oldestBall.mesh); world.removeBody(oldestBall.body); } // 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; // Initialize userData ballMesh.userData = {}; // Set initial position - spawn at a fixed height above the ground const x = Math.random() * 10 - 5; // Reduced spawn area const y = 5; // Fixed spawn height const z = Math.random() * 10 - 5; // Reduced spawn area ballMesh.position.set(x, y, z); scene.add(ballMesh); // Create physics body with the same size const ballShape = new CANNON.Sphere(radius); // Set light mass but keep dynamic behavior const mass = 1; const ballBody = new CANNON.Body({ mass: mass, shape: ballShape, material: ballPhysMaterial, position: new CANNON.Vec3(x, y, z), velocity: new CANNON.Vec3(0, -1, 0), // Initial downward velocity }); ballBody.type = CANNON.Body.DYNAMIC; // Reduce linear damping for more rolling effect ballBody.linearDamping = 0.01; ballBody.angularDamping = 0.01; // Initialize userData ballBody.userData = {}; // Link mesh and physics body ballMesh.userData.physicsBody = ballBody; ballBody.userData.mesh = ballMesh; // Add ball body to the world world.addBody(ballBody); // Store the balls in an array balls.push({ mesh: ballMesh, body: ballBody }); } function animate() { requestAnimationFrame(animate); const deltaTime = Math.min(clock.getDelta(), 0.1); TWEEN.update(); if (!gameStarted) { // Use cinematic camera movement for title screen updateCinematicCamera(deltaTime); } else if (assetsLoaded) { world.step(deltaTime); updateTime(deltaTime); updateLighting(); sky.material.uniforms.time.value += deltaTime; 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); character.position.y += 2; // Further increased positive offset to raise character even higher } // Update NPC updateNPC(deltaTime); // Update police cars updatePoliceCars(deltaTime); // Update police NPCs updatePoliceNPCs(deltaTime); // Check if police should arrive or exit checkPoliceArrival(); // Update player UI updatePlayerUI(); // Log police status for debugging console.log("Police status:", policeHasBeenCalled, policeArrivalTime, policeExitTime, gameTime); /** * Spawn balls every few seconds */ // Balls will no longer spawn // timeSinceLastBall += deltaTime; // if (timeSinceLastBall >= ballSpawnInterval) { // spawnBall(); // timeSinceLastBall = 0; // } timeSinceLastBall = 0; // Reset to prevent any accidental spawning // Update balls positions and remove those that fall off for (let i = balls.length - 1; i >= 0; i--) { const ball = balls[i]; // Update mesh position and rotation ball.mesh.position.copy(ball.body.position); ball.mesh.quaternion.copy(ball.body.quaternion); // Check if the ball has fallen below a certain Y position if (ball.body.position.y < -10) { // Remove the ball from the scene and physics world scene.remove(ball.mesh); world.removeBody(ball.body); // Remove the ball from the balls array balls.splice(i, 1); } } // No need to call controls.update() here as it's called in updateCamera() } composer.render(); } function updatePlayerUI() { const healthBar = document.getElementById('healthBar'); const staminaBar = document.getElementById('staminaBar'); healthBar.style.width = `${playerHealth}%`; staminaBar.style.width = `${playerStamina}%`; } // 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); // Add game start functionality document.getElementById('startButton').addEventListener('click', () => { // Transition camera from cinematic to gameplay new TWEEN.Tween(camera.position) .to(new THREE.Vector3(0, 15, 30), 2000) .easing(TWEEN.Easing.Quadratic.InOut) .start(); new TWEEN.Tween(controls.target) .to(new THREE.Vector3(0, 0, 0), 2000) .easing(TWEEN.Easing.Quadratic.InOut) .onComplete(() => { gameStarted = true; document.getElementById('titleScreen').style.display = 'none'; document.getElementById('uiContainer').style.display = 'flex'; document.getElementById('playerStatusUI').style.display = 'block'; if (titleMusic.isPlaying) { new TWEEN.Tween({ volume: titleMusic.getVolume() }) .to({ volume: 0 }, 1000) .onUpdate(v => titleMusic.setVolume(v.volume)) .onComplete(() => { titleMusic.stop(); startBackgroundMusic(); }) .start(); } else { startBackgroundMusic(); } if (character) { character.visible = true; // Make character visible when game starts } }) .start(); }); // Cinematic camera movement for title screen let cinematicCameraPosition = new THREE.Vector3(0, 15, 30); let cinematicCameraTarget = new THREE.Vector3(0, 0, 0); let cinematicT = 0; function updateCinematicCamera(deltaTime) { cinematicT += deltaTime * 0.1; // Adjust speed as needed // Calculate new camera position cinematicCameraPosition.x = Math.sin(cinematicT) * 50; cinematicCameraPosition.z = Math.cos(cinematicT) * 50; cinematicCameraPosition.y = 15 + Math.sin(cinematicT * 0.5) * 10; // Calculate new camera target cinematicCameraTarget.x = Math.sin(cinematicT * 0.25) * 20; cinematicCameraTarget.z = Math.cos(cinematicT * 0.25) * 20; // Update camera position and target camera.position.copy(cinematicCameraPosition); camera.lookAt(cinematicCameraTarget); } // Function to create a simple tree function createTree() { const tree = new THREE.Group(); // Tree trunk const trunkGeometry = new THREE.CylinderGeometry(0.4, 0.8, 4, 8); const trunkMaterial = new THREE.MeshPhongMaterial({ color: 0x8B4513 }); const trunk = new THREE.Mesh(trunkGeometry, trunkMaterial); trunk.position.y = 2; tree.add(trunk); // Tree leaves const leavesGeometry = new THREE.ConeGeometry(3, 6, 8); const leavesMaterial = new THREE.MeshPhongMaterial({ color: 0x228B22 }); const leaves = new THREE.Mesh(leavesGeometry, leavesMaterial); leaves.position.y = 6; tree.add(leaves); // Make tree cast and receive shadows tree.traverse((object) => { if (object instanceof THREE.Mesh) { object.castShadow = true; object.receiveShadow = true; } }); return tree; } // Function to place trees around the map edges function placeTrees() { const mapSize = 200; // Assuming the terrain size is 200x200 const treeCount = 150; // Increased number of trees const edgeOffset = 15; // Slightly increased distance from the edge of the map for (let i = 0; i < treeCount; i++) { const tree = createTree(); // Randomly choose which edge to place the tree const edge = Math.floor(Math.random() * 4); let x, z; switch (edge) { case 0: // Top edge x = Math.random() * (mapSize - 2 * edgeOffset) + edgeOffset - mapSize / 2; z = -mapSize / 2 + edgeOffset + Math.random() * 10; // Add some depth break; case 1: // Right edge x = mapSize / 2 - edgeOffset - Math.random() * 10; // Add some depth z = Math.random() * (mapSize - 2 * edgeOffset) + edgeOffset - mapSize / 2; break; case 2: // Bottom edge x = Math.random() * (mapSize - 2 * edgeOffset) + edgeOffset - mapSize / 2; z = mapSize / 2 - edgeOffset - Math.random() * 10; // Add some depth break; case 3: // Left edge x = -mapSize / 2 + edgeOffset + Math.random() * 10; // Add some depth z = Math.random() * (mapSize - 2 * edgeOffset) + edgeOffset - mapSize / 2; break; } tree.position.set(x, 0, z); // Add some randomness to tree size and rotation const scale = 2 + Math.random() * 1.5; tree.scale.set(scale, scale, scale); tree.rotation.y = Math.random() * Math.PI * 2; scene.add(tree); } } // Call placeTrees after creating the terrain placeTrees(); // Function to create a simple mountain // Start animation animate();