// ThreeJS revision: 152 // IMPORTS: import * as THREE from 'three'; import { OrbitControls } from 'three/addons/controls/OrbitControls.js'; import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js'; import { RenderPass } from 'three/addons/postprocessing/RenderPass.js'; import { UnrealBloomPass } from 'three/addons/postprocessing/UnrealBloomPass.js'; import { SMAAPass } from 'three/addons/postprocessing/SMAAPass.js'; import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js'; /* This is where external user components are loaded into scope. This seems like the simplest solution to this problem as it does not require modifications to the Script loader. This requires an export statement at the end of the user script with the desires export components added. Components can be removed from this import statement to completely remove them without having to modify the external script contents - meaning it can hold objects that aren't even used in this script for later use. */ import { BasicSkyShader, MaterialManager, LightingManager, MeshManager } from 'https://play.rosebud.ai/assets/ThreeJSScripts.js?hZgy'; const APP_SETTINGS = { renderer: { shadowMap: { enabled: true, type: THREE.PCFSoftShadowMap }, colorSpace: { output: THREE.SRGBColorSpace, toneMapping: THREE.ACESFilmicToneMapping, toneMappingExposure: 1.2 }, antialias: true, pixelRatio: window.devicePixelRatio }, world: { defaults: { skyColor: 0x4A6D8C, // Darker blue color groundColor: 0xE6F3FF // Very light blue, almost white }, }, physics: { gravity: { x: 0, y: -9.81, z: 0 }, defaultContactMaterial: { friction: 0.01, restitution: 0.6 }, solver: { iterations: 10, tolerance: 0.001 } }, camera: { fov: 75, near: 0.1, far: 1000, initialPosition: { x: 0, y: 50, z: 100 } }, gameplay: {}, lights: { sunlight: { color: 0xffffff, intensity: 1.5, position: { x: -50, y: 100, z: -50 }, castShadow: true, shadow: { mapSize: { width: 2048, height: 2048 }, camera: { near: 10, far: 1000, left: -100, right: 100, top: 100, bottom: -100 }, bias: -0.0001 } } } }; const TEXTURE_ASSETS = { normal: { 'terrain_nrm': 'https://develop.play.rosebud.ai/assets/Grass_04_Nrm.png?BQVT', // Add more normal maps as needed }, texture: { 'terrain': 'https://develop.play.rosebud.ai/assets/Grass_04.png?MBRT', // Add more textures as needed }, sprites: { 'TomeSprites': 'https://play.rosebud.ai/assets/Tomes32x32.png?meX8', // Add more sprite sheets as needed } }; // Components: function TextureManager() { class TextureManager { constructor() { this.textures = new Map(); this.loader = new THREE.TextureLoader(LoadingManager); this.texturesLoaded = false; this.loadTextures(); } load(key, url, onLoad = () => {}, onProgress = () => {}, onError = () => {}) { if (this.textures.has(key)) { onLoad(this.textures.get(key)); return Promise.resolve(this.textures.get(key)); } return new Promise((resolve, reject) => { this.loader.load( url, (texture) => { this.textures.set(key, texture); onLoad(texture); resolve(texture); }, onProgress, (error) => { onError(error); reject(error); } ); }); } loadTextures() { return new Promise((resolve, reject) => { const texturePromises = []; // Iterate through each category in TEXTURE_ASSETS for (const category in TEXTURE_ASSETS) { for (const textureName in TEXTURE_ASSETS[category]) { const textureUrl = TEXTURE_ASSETS[category][textureName]; const key = textureName; texturePromises.push( this.load( key, textureUrl, (texture) => { if (category === 'sprites') { texture.minFilter = THREE.NearestFilter; texture.magFilter = THREE.NearestFilter; texture.generateMipmaps = false; } console.log(`Loaded ${category} texture: ${key}`); } ) ); } } Promise.all(texturePromises) .then((loadedTextures) => { this.texturesLoaded = true; console.log('All textures loaded successfully'); console.log('Loaded textures:'); this.textures.forEach((texture, key) => { console.log(`- ${key}: ${texture.image.src}`); }); resolve(); }) .catch((error) => { console.error('Error loading textures:', error); reject(error); }); }); } getTexture(key) { const texture = this.textures.get(key); if (!texture) { console.warn(`Texture with key "${key}" not found.`); } return texture; } dispose(key) { if (this.textures.has(key)) { this.textures.get(key).dispose(); this.textures.delete(key); } } disposeAll() { for (let texture of this.textures.values()) { texture.dispose(); } this.textures.clear(); } } return new TextureManager(); } class Renderer { constructor() { this.postProcessing = null; this.renderer = new THREE.WebGLRenderer({ antialias: APP_SETTINGS.renderer.antialias, canvas: canvas, powerPreference: "high-performance" }); this.init(); } init() { this.renderer.setPixelRatio(APP_SETTINGS.renderer.pixelRatio); this.renderer.setSize(canvas.offsetWidth, canvas.offsetHeight); this.renderer.shadowMap.enabled = APP_SETTINGS.renderer.shadowMap.enabled; this.renderer.shadowMap.type = APP_SETTINGS.renderer.shadowMap.type; this.renderer.outputColorSpace = APP_SETTINGS.renderer.colorSpace.output; this.renderer.toneMapping = APP_SETTINGS.renderer.colorSpace.toneMapping; this.renderer.toneMappingExposure = APP_SETTINGS.renderer.colorSpace.toneMappingExposure; console.log('Renderer initialized with APP_SETTINGS parameters'); } initPostProcessing() { this.postProcessing = new PostProcessing(this.renderer, WorldScene, MainCamera); window.PostProcessing = this.postProcessing; } render() { if (this.postProcessing) { this.postProcessing.render(); } else { this.renderer.render(WorldScene, MainCamera); } } setSize(width, height) { this.renderer.setSize(width, height); if (this.postProcessing) { this.postProcessing.setSize(width, height); } } } class PostProcessing { constructor() { this.composer = null; this.bloomPass = null; this.smaaPass = null; this.initComposer(); } initComposer() { this.composer = new EffectComposer(GameRenderer.renderer); const renderPass = new RenderPass(WorldScene, MainCamera); this.composer.addPass(renderPass); this.bloomPass = new UnrealBloomPass( new THREE.Vector2(innerWidth, innerHeight), 0.2, // bloom strength 0.4, // radius 0.9 // threshold ); this.composer.addPass(this.bloomPass); this.smaaPass = new SMAAPass( innerWidth * GameRenderer.renderer.getPixelRatio(), innerHeight * GameRenderer.renderer.getPixelRatio() ); this.composer.addPass(this.smaaPass); } setSize(width, height) { this.composer.setSize(width, height); this.bloomPass.resolution.set(width, height); this.smaaPass.setSize(width, height); } render() { this.composer.render(); } } class SkyBox { constructor() { this.skyMesh = null; this.shaderMaterial = null; this.loadSkyboxModel(); } loadSkyboxModel() { const loader = new GLTFLoader(LoadingManager); loader.load('https://play.rosebud.ai/assets/SkyboxSphere.glb?BkJ1', (gltf) => { this.skyMesh = gltf.scene.children[0]; this.skyMesh.scale.set(1500, 1200, 1500); // Create and apply the new shader material const skyColor = new THREE.Color(APP_SETTINGS.world.defaults.skyColor); const groundColor = new THREE.Color(APP_SETTINGS.world.defaults.groundColor); this.shaderMaterial = BasicSkyShader(skyColor, groundColor); this.skyMesh.material = this.shaderMaterial.material; WorldScene.add(this.skyMesh); console.log('Skybox created with default colors:', skyColor, groundColor); this.updateSunPosition(); }); } update(deltaTime) { this.updateSunPosition(); } updateSunPosition() { if (this.shaderMaterial && Lights.getLight('sunLight')) { const sunLight = Lights.getLight('sunLight'); const sunDirection = new THREE.Vector3(); sunLight.getWorldDirection(sunDirection); this.shaderMaterial.setSunPosition(sunDirection); } } getSkyColor() { return this.shaderMaterial ? this.shaderMaterial.skyColor : new THREE.Color(0x87CEEB); } getGroundColor() { return this.shaderMaterial ? this.shaderMaterial.groundColor : new THREE.Color(0xFFFFFF); } setSkyColor(color) { if (this.shaderMaterial) { this.shaderMaterial.setSkyColor(color); } } setGroundColor(color) { if (this.shaderMaterial) { this.shaderMaterial.setGroundColor(color); } } } class WorldTime { constructor() { this.currentTime = 0; // Time in seconds this.timeScale = 1; // 1 second real time = 1 second game time this.tweening = false; this.tweenStartTime = 0; this.tweenEndTime = 0; this.tweenDuration = 0; } update(deltaTime) { if (this.tweening) { this.updateTween(deltaTime); } else { this.currentTime += deltaTime * this.timeScale; } } setTimeScale(scale) { this.timeScale = scale; } getHours() { return Math.floor(this.currentTime / 3600) % 24; } getMinutes() { return Math.floor((this.currentTime % 3600) / 60); } getSeconds() { return Math.floor(this.currentTime % 60); } getTimeString() { const hours = this.getHours().toString().padStart(2, '0'); const minutes = this.getMinutes().toString().padStart(2, '0'); const seconds = this.getSeconds().toString().padStart(2, '0'); return `${hours}:${minutes}:${seconds}`; } setTime(hours) { const targetTime = hours * 3600; // Convert hours to seconds this.tweenStartTime = this.currentTime; this.tweenEndTime = targetTime; this.tweenDuration = 2; // Duration of the tween in seconds this.tweening = true; } updateTween(deltaTime) { const elapsedTime = Math.min(deltaTime, this.tweenDuration); const progress = elapsedTime / this.tweenDuration; this.currentTime = this.tweenStartTime + (this.tweenEndTime - this.tweenStartTime) * progress; this.tweenDuration -= elapsedTime; if (this.tweenDuration <= 0) { this.currentTime = this.tweenEndTime; this.tweening = false; } } } class World { constructor() { window.WorldScene = new THREE.Scene(); this.skybox = new SkyBox(WorldScene); this.lights = {}; this.physicsWorld = new CANNON.World(); this.setupPhysicsWorld(); this.initCamera(); this.initRenderer(); this.initLights(); this.terrain = null; this.Time = new WorldTime(); this.player = null; this.enemy = null; this.navMesh = null; this.obstacle = null; this.createObstacle(); this.astar = null; this.testPath = null; } setupPhysicsWorld() { this.physicsWorld.gravity.set( APP_SETTINGS.physics.gravity.x, APP_SETTINGS.physics.gravity.y, APP_SETTINGS.physics.gravity.z ); this.physicsWorld.defaultContactMaterial.friction = APP_SETTINGS.physics.defaultContactMaterial.friction; this.physicsWorld.defaultContactMaterial.restitution = APP_SETTINGS.physics.defaultContactMaterial.restitution; this.physicsWorld.solver.iterations = APP_SETTINGS.physics.solver.iterations; this.physicsWorld.solver.tolerance = APP_SETTINGS.physics.solver.tolerance; this.groundPhysMaterial = new CANNON.Material('ground'); } initLights() { const defaultSkyColor = new THREE.Color(APP_SETTINGS.world.defaults.skyColor); const defaultGroundColor = new THREE.Color(APP_SETTINGS.world.defaults.groundColor); const sunlightSettings = APP_SETTINGS.lights.sunlight; Lights.createLight('sunLight', 'directional', { color: sunlightSettings.color, intensity: sunlightSettings.intensity, position: sunlightSettings.position, castShadow: sunlightSettings.castShadow, shadow: sunlightSettings.shadow }); Lights.createLight('hemiLight', 'hemisphere', { skyColor: defaultSkyColor, groundColor: defaultGroundColor, intensity: 0.6 }); console.log('Lights initialized with default colors:', defaultSkyColor, defaultGroundColor); } getLight(name) { return Lights.getLight(name); } calculateSunRotation(time) { const rotationSpeed = 0.1; // Adjust this value to change the orbit speed const angle = time * rotationSpeed; const radius = 100; // Adjust this value to change the orbit radius const x = Math.cos(angle) * radius; const z = Math.sin(angle) * radius; const baseHeight = 80; // Increased from 50 to 80 const verticalAmplitude = 30; // Increased from 20 to 30 const y = baseHeight + Math.sin(angle * 0.5) * verticalAmplitude; return new THREE.Vector3(x, y, z); } updateSunlight(playerPosition) { Lights.updateLight('sunLight', (sunLight) => { const offset = this.calculateSunRotation(this.Time.currentTime); sunLight.position.copy(playerPosition).add(offset); // Update the target if (!sunLight.target) { sunLight.target = new THREE.Object3D(); WorldScene.add(sunLight.target); } sunLight.target.position.copy(playerPosition); }); // Update the skybox sun position if (this.skybox) { this.skybox.updateSunPosition(); } } initCamera() { window.MainCamera = new THREE.PerspectiveCamera( 60, // Slightly wider FOV for better top-down view canvas.offsetWidth / canvas.offsetHeight, 0.1, 1000 ); // Set a default position and target // These will be updated when the player is created MainCamera.position.set(0, 20, 20); MainCamera.lookAt(0, 0, 0); console.log('Camera initialized with default position and target'); } initRenderer() { window.GameRenderer = new Renderer(MainCamera); GameRenderer.initPostProcessing(WorldScene); } createTerrain() { if (Meshes.getMesh('terrain')) { return Meshes.getMesh('terrain'); } const size = 30 const geometry = new THREE.PlaneGeometry(size, size); const materialParams = { color: APP_SETTINGS.world.defaults.groundColor, // Use the new very light blue color }; const material = Materials.create('terrainMaterial', 'basic', materialParams); const terrain = new THREE.Mesh(geometry, Materials.getMaterial('terrainMaterial')); terrain.rotation.x = -Math.PI / 2; terrain.receiveShadow = true; terrain.position.y = -20; // Keep the terrain at the same vertical position WorldScene.add(terrain); Meshes.add('terrain', terrain); terrain.userData.isRaycastable = true; // Mark the terrain as raycastable // Create NavMesh with increased density this.navMesh = new NavMesh(terrain, 1); // Grid size of 1 unit (halved from 2) // Removed: WorldScene.add(this.navMesh.getVisualization()); // Adjust the physics body to match the new terrain size const groundShape = new CANNON.Box(new CANNON.Vec3(size / 2, 0.1, size / 2)); const groundBody = new CANNON.Body({ mass: 0, material: this.groundPhysMaterial, collisionFilterGroup: 1, // Default group collisionFilterMask: -1 // Collide with everything }); groundBody.addShape(groundShape); groundBody.position.set(0, -20.1, 0); // Keep the physics body at the same position this.physicsWorld.addBody(groundBody); // Initialize AStar this.astar = new AStar(this.navMesh); return terrain; } createPlayer() { this.player = new Player(this); // Update camera to look at the player's initial position const playerPosition = this.player.mesh.position; MainCamera.position.set( playerPosition.x, playerPosition.y + 20, // Camera 20 units above the player playerPosition.z + 20 // Camera 20 units behind the player ); MainCamera.lookAt(playerPosition); // Update OrbitControls to target the player Input.controls.target.copy(playerPosition); Input.controls.update(); } createEnemy() { const enemyPosition = new THREE.Vector3(6, -19.5, 6); // Lowered Y position by 1 unit this.enemy = new Enemy(this, enemyPosition); } createObstacle() { const obstaclePosition = new THREE.Vector3(3, -18, 3); const obstacleSize = new THREE.Vector3(4, 2, 2); // Doubled the x component (length) this.obstacle = new Obstacle(this, obstaclePosition, obstacleSize); } update(deltaTime) { this.Time.update(deltaTime); this.physicsWorld.step(deltaTime); // Update sunlight position based on a fixed point (e.g., world origin) this.updateSunlight(new THREE.Vector3(0, 0, 0)); this.skybox.update(deltaTime); // Ensure NavMesh visualization stays visible if (this.navMesh) { this.navMesh.getVisualization().visible = true; } if (this.player) { this.player.update(deltaTime); } if (this.enemy) { this.enemy.update(deltaTime); } this.deltaTime = deltaTime; // Store deltaTime for use in other methods // Update bullets if (this.player && this.player.gun) { this.player.gun.update(deltaTime); } if (this.obstacle) { this.obstacle.update(); } GameRenderer.render(); } } class NavMesh { constructor(terrain, gridSize = 1) { this.terrain = terrain; this.gridSize = gridSize; this.grid = []; this.visualization = new THREE.Group(); this.skippedPoints = []; this.generateGrid(); this.createVisualization(); } isPointOverlappingObstacle(point) { if (GameWorld.obstacle) { const obstaclePosition = GameWorld.obstacle.mesh.position; const obstacleSize = GameWorld.obstacle.mesh.geometry.parameters; return ( point.x >= obstaclePosition.x - obstacleSize.width / 2 && point.x <= obstaclePosition.x + obstacleSize.width / 2 && point.z >= obstaclePosition.z - obstacleSize.depth / 2 && point.z <= obstaclePosition.z + obstacleSize.depth / 2 ); } return false; } generateGrid() { const terrainGeometry = this.terrain.geometry; const terrainSize = { width: terrainGeometry.parameters.width, height: terrainGeometry.parameters.height }; for (let x = -terrainSize.width / 2; x <= terrainSize.width / 2; x += this.gridSize) { for (let z = -terrainSize.height / 2; z <= terrainSize.height / 2; z += this.gridSize) { const y = this.terrain.position.y + 0.1; // Slightly above the terrain const point = new THREE.Vector3(x, y, z); if (!this.isPointOverlappingObstacle(point)) { this.grid.push(point); } else { this.skippedPoints.push(point); } } } console.log(`NavMesh: Generated ${this.grid.length} walkable points`); console.log(`NavMesh: Skipped ${this.skippedPoints.length} points due to obstacle overlap`); // Adjust visualization for increased density this.adjustVisualizationForDensity(); } adjustVisualizationForDensity() { // Reduce the size of visualization spheres const walkableSphereGeometry = new THREE.SphereGeometry(0.1); // Reduced from 0.2 const skippedSphereGeometry = new THREE.SphereGeometry(0.05); // Reduced from 0.1 // Update existing visualization this.visualization.children.forEach(child => { if (child instanceof THREE.Mesh) { if (child.geometry.type === 'SphereGeometry') { child.geometry = child.geometry.parameters.radius === 0.2 ? walkableSphereGeometry : skippedSphereGeometry; } } }); } createVisualization() { const walkableSphereGeometry = new THREE.SphereGeometry(0.2); const walkableSphereMaterial = new THREE.MeshBasicMaterial({ color: 0xff0000 }); const skippedSphereGeometry = new THREE.SphereGeometry(0.1); const skippedSphereMaterial = new THREE.MeshBasicMaterial({ color: 0x0000ff }); this.grid.forEach(point => { const sphere = new THREE.Mesh(walkableSphereGeometry, walkableSphereMaterial); sphere.position.copy(point); this.visualization.add(sphere); }); this.skippedPoints.forEach(point => { const sphere = new THREE.Mesh(skippedSphereGeometry, skippedSphereMaterial); sphere.position.copy(point); this.visualization.add(sphere); }); const lineMaterial = new THREE.LineBasicMaterial({ color: 0x00ff00 }); for (let i = 0; i < this.grid.length; i++) { const point = this.grid[i]; const nextHorizontal = this.grid[i + 1]; const nextVertical = this.grid[i + Math.sqrt(this.grid.length)]; if (nextHorizontal && Math.abs(nextHorizontal.x - point.x) <= this.gridSize) { const lineGeometry = new THREE.BufferGeometry().setFromPoints([point, nextHorizontal]); const line = new THREE.Line(lineGeometry, lineMaterial); this.visualization.add(line); } if (nextVertical) { const lineGeometry = new THREE.BufferGeometry().setFromPoints([point, nextVertical]); const line = new THREE.Line(lineGeometry, lineMaterial); this.visualization.add(line); } } // Note: We're not adding this.visualization to WorldScene anymore } getVisualization() { return this.visualization; } } class Bullet { constructor(position, direction) { this.mesh = this.createMesh(position); this.initialDirection = direction.clone().normalize(); this.speed = 20; // Units per second this.lifetime = 2; // Seconds } createMesh(position) { const radius = 0.10; const height = 0.3; const geometry = new THREE.CylinderGeometry(radius, radius, height, 8); const material = new THREE.MeshBasicMaterial({ color: 0x000000 // Black color }); const mesh = new THREE.Mesh(geometry, material); mesh.rotation.x = Math.PI / 2; mesh.position.copy(position); WorldScene.add(mesh); return mesh; } update(deltaTime) { const movement = this.initialDirection.clone().multiplyScalar(this.speed * deltaTime); this.mesh.position.add(movement); this.mesh.quaternion.setFromUnitVectors(new THREE.Vector3(0, 1, 0), this.initialDirection); this.lifetime -= deltaTime; } remove() { WorldScene.remove(this.mesh); } } class Gun { constructor() { this.mesh = new THREE.Group(); this.createGun(); this.bullets = []; this.lastFireTime = 0; this.fireRate = 0.25; // 4 bullets per second this.isFiring = false; } createGun() { // Create gun barrel const barrelGeometry = new THREE.BoxGeometry(0.1, 0.1, 0.5); const barrelMaterial = new THREE.MeshPhongMaterial({ color: 0x333333 }); const barrel = new THREE.Mesh(barrelGeometry, barrelMaterial); barrel.position.set(0, 0, 0.25); // Create gun body const bodyGeometry = new THREE.BoxGeometry(0.3, 0.3, 0.4); const bodyMaterial = new THREE.MeshPhongMaterial({ color: 0x666666 }); const body = new THREE.Mesh(bodyGeometry, bodyMaterial); body.position.set(0, -0.1, 0); // Create gun handle const handleGeometry = new THREE.BoxGeometry(0.15, 0.4, 0.1); const handleMaterial = new THREE.MeshPhongMaterial({ color: 0x8B4513 }); const handle = new THREE.Mesh(handleGeometry, handleMaterial); handle.position.set(0, -0.35, -0.15); // Add all parts to the gun mesh this.mesh.add(barrel); this.mesh.add(body); this.mesh.add(handle); // Rotate the gun to face forward this.mesh.rotation.y = Math.PI / 2; } setPosition(x, y, z) { this.mesh.position.set(x, y, z); } fire(playerPosition, playerDirection) { this.isFiring = true; } update(deltaTime) { const now = performance.now() / 1000; // Convert to seconds if (this.isFiring && now - this.lastFireTime >= this.fireRate) { const bulletPosition = new THREE.Vector3().copy(this.mesh.getWorldPosition(new THREE.Vector3())); bulletPosition.add(this.mesh.getWorldDirection(new THREE.Vector3()).multiplyScalar(1)); const bulletDirection = this.mesh.getWorldDirection(new THREE.Vector3()); const bullet = new Bullet(bulletPosition, bulletDirection); this.bullets.push(bullet); this.lastFireTime = now; } this.isFiring = false; // Reset firing state // Update existing bullets this.bullets = this.bullets.filter(bullet => { bullet.update(deltaTime); if (bullet.lifetime <= 0) { bullet.remove(); return false; } return true; }); } } class Player { constructor(world) { this.world = world; this.mesh = null; this.body = null; this.moveSpeed = 8; this.moveDirection = new CANNON.Vec3(0, 0, 0); this.facingDirection = new THREE.Vector3(1, 0, 0); this.createMesh(); this.createBody(); this.createGun(); } createGun() { this.gun = new Gun(); this.mesh.add(this.gun.mesh); // Attach the gun to the player's mesh // Initial position and rotation will be set in updateGunPosition this.updateGunPosition(); } updateGunPosition() { const gunDistance = 1; // Distance from player center const gunHeight = 0.5; // Height above player center // Set gun position this.gun.mesh.position.set( this.facingDirection.x * gunDistance, gunHeight, this.facingDirection.z * gunDistance ); // Set gun rotation this.gun.mesh.rotation.y = Math.atan2(this.facingDirection.x, this.facingDirection.z); } createMesh() { const geometry = new THREE.CapsuleGeometry(0.5, 1, 4, 8); const material = Materials.create('playerMaterial', 'standard', { color: 0xFF6B8A, // Pinkish red color roughness: 0.7, metalness: 0.3 }); this.mesh = new THREE.Mesh(geometry, material); this.mesh.castShadow = true; this.mesh.position.set(0, -18.5, 0); // Position the player 1.5 units above the terrain WorldScene.add(this.mesh); console.log('Player mesh created. Position:', this.mesh.position.toArray()); } createBody() { const shape = new CANNON.Cylinder(0.5, 0.5, 2, 8); const playerMaterial = new CANNON.Material('player'); this.body = new CANNON.Body({ mass: 80, // Increase mass for more stability shape: shape, material: playerMaterial, linearDamping: 0.95, // Increase linear damping for smoother movement angularDamping: 0.99, // Increase angular damping to reduce rotation collisionFilterGroup: 1, // Player collision group collisionFilterMask: 1 | 2 // Collide with default group (1) and obstacle group (2), but not enemy group }); this.body.position.set(0, -17.5, 0); // Position the physics body 2.5 units above the terrain (1 unit higher) this.body.fixedRotation = true; // Lock rotation to keep the player upright this.body.updateMassProperties(); // Update mass properties after changing rotation constraints this.world.physicsWorld.addBody(this.body); // Create contact material between player and ground const playerGroundContact = new CANNON.ContactMaterial( playerMaterial, this.world.groundPhysMaterial, { friction: 0.5, restitution: 0 // Zero restitution to remove bounciness } ); this.world.physicsWorld.addContactMaterial(playerGroundContact); console.log('Player body created. Position:', this.body.position.toArray()); } update(deltaTime) { // Ensure deltaTime is a valid number deltaTime = isNaN(deltaTime) ? 0 : Math.max(0, Math.min(deltaTime, 0.1)); // Calculate movement direction based on key states this.moveDirection.set( (Input.keys.d ? 1 : 0) - (Input.keys.a ? 1 : 0), 0, (Input.keys.s ? 1 : 0) - (Input.keys.w ? 1 : 0) ); // Normalize the movement direction if it's not zero if (this.moveDirection.lengthSquared() > 0) { this.moveDirection.normalize(); } // Calculate movement const movement = this.moveDirection.scale(this.moveSpeed * deltaTime); // Use default values if movement becomes NaN if (isNaN(movement.x) || isNaN(movement.y) || isNaN(movement.z)) { movement.set(0, 0, 0); } // Apply movement to the physics body const newPosition = this.body.position.vadd(movement); this.body.position.copy(newPosition); // Update mesh position to match physics body, with an offset this.mesh.position.copy(this.body.position).sub(new THREE.Vector3(0, -.5, 0)); this.mesh.quaternion.copy(this.body.quaternion); // Update the gun position and rotation this.updateGunPosition(); // Fire only when mouse is down if (Input.mouseDown) { this.gun.fire(this.mesh.position, this.facingDirection); } this.gun.update(deltaTime); } createDebugLine() { const geometry = new THREE.BufferGeometry().setFromPoints([ new THREE.Vector3(0, 0, 0), new THREE.Vector3(0, 0, 5) ]); const material = new THREE.LineBasicMaterial({ color: 0xff0000 }); this.debugLine = new THREE.Line(geometry, material); this.debugLine.position.copy(this.mesh.position); WorldScene.add(this.debugLine); } updateFacingDirection(cursorPosition) { this.facingDirection.copy(cursorPosition).sub(this.mesh.position).normalize(); this.facingDirection.y = 0; // Keep the facing direction in the XZ plane const angle = Math.atan2(this.facingDirection.x, this.facingDirection.z); this.mesh.rotation.y = angle; // Update the gun position and rotation this.updateGunPosition(); } updateDebugLine() { // Update the start point of the line to match the player's position this.debugLine.position.copy(this.mesh.position); // Calculate the end point of the line using the facing direction const endPoint = new THREE.Vector3() .copy(this.facingDirection) .multiplyScalar(5) // Length of the debug line .add(this.mesh.position); // Update the geometry of the debug line this.debugLine.geometry.setFromPoints([ new THREE.Vector3(0, 0, 0), // Start point (relative to the line's position) endPoint.sub(this.mesh.position) // End point (relative to the line's position) ]); // Update the line's geometry this.debugLine.geometry.verticesNeedUpdate = true; } } class Enemy { constructor(world, position) { this.world = world; this.mesh = null; this.body = null; this.createMesh(position); this.createBody(position); this.pathUpdateInterval = 0.5; // Update path every 0.5 seconds this.lastPathUpdateTime = 0; this.currentPath = null; this.moveSpeed = 5; // Units per second this.currentPathIndex = 0; } createMesh(position) { const geometry = new THREE.CapsuleGeometry(0.5, 1, 4, 8); const material = Materials.create('enemyMaterial', 'standard', { color: 0x00FF00, // Green color roughness: 0.7, metalness: 0.3 }); this.mesh = new THREE.Mesh(geometry, material); this.mesh.castShadow = true; this.mesh.position.copy(position); WorldScene.add(this.mesh); } createBody(position) { const shape = new CANNON.Cylinder(0.5, 0.5, 2, 8); const enemyMaterial = new CANNON.Material('enemy'); this.body = new CANNON.Body({ mass: 80, shape: shape, material: enemyMaterial, position: new CANNON.Vec3(position.x, position.y, position.z), // Use the provided position directly fixedRotation: true, collisionFilterGroup: 4, // Enemy collision group collisionFilterMask: 1 | 2, // Collide with default group (1) and obstacle group (2), but not player group linearDamping: 0.1, // Reduced from default (usually 0.01) angularDamping: 0.1 // Reduced from default (usually 0.01) }); // Create contact material between enemy and ground const enemyGroundContact = new CANNON.ContactMaterial( enemyMaterial, this.world.groundPhysMaterial, { friction: 0.001, // Further reduced friction restitution: 0, // Zero restitution to remove bounciness contactEquationStiffness: 1e8, // Increased stiffness for less penetration contactEquationRelaxation: 3 // Lowered relaxation for quicker stabilization } ); this.world.physicsWorld.addContactMaterial(enemyGroundContact); // Set the collision response to the body this.body.collisionResponse = 1; // Ensure collision response is enabled this.world.physicsWorld.addBody(this.body); } update(deltaTime) { this.mesh.position.copy(this.body.position).sub(new THREE.Vector3(0, -.5, 0)); this.mesh.quaternion.copy(this.body.quaternion); this.lastPathUpdateTime += deltaTime; if (this.lastPathUpdateTime >= this.pathUpdateInterval) { this.calculatePathToPlayer(); this.lastPathUpdateTime = 0; this.currentPathIndex = 0; } this.moveAlongPath(deltaTime); } calculatePathToPlayer() { if (!this.world.player || !this.world.navMesh || !this.world.astar) { return; } const startNode = this.world.astar.findNearestNode(this.mesh.position); const goalNode = this.world.astar.findNearestNode(this.world.player.mesh.position); if (!startNode || !goalNode) { return; } this.currentPath = this.world.astar.findPath(startNode, goalNode); } moveAlongPath(deltaTime) { if (!this.currentPath || this.currentPathIndex >= this.currentPath.length) { return; } const targetPosition = this.currentPath[this.currentPathIndex]; const direction = new CANNON.Vec3() .copy(targetPosition) .vsub(this.body.position) .unit(); const desiredVelocity = direction.scale(this.moveSpeed); this.body.velocity.set(desiredVelocity.x, this.body.velocity.y, desiredVelocity.z); if (this.body.position.distanceTo(new CANNON.Vec3(targetPosition.x, this.body.position.y, targetPosition.z)) < 0.5) { this.currentPathIndex++; if (this.currentPathIndex >= this.currentPath.length) { this.body.velocity.setZero(); this.calculatePathToPlayer(); // Recalculate path when reaching the end } } } } class Obstacle { constructor(world, position, size) { this.world = world; this.mesh = null; this.body = null; this.createMesh(position, size); this.createBody(position, size); } createMesh(position, size) { const geometry = new THREE.BoxGeometry(size.x, size.y, size.z); const material = Materials.create('obstacleMaterial', 'standard', { color: 0x808080, // Grey color roughness: 0.7, metalness: 0.3 }); this.mesh = new THREE.Mesh(geometry, material); this.mesh.castShadow = true; this.mesh.receiveShadow = true; this.mesh.position.copy(position); WorldScene.add(this.mesh); console.log('Obstacle mesh created. Position:', this.mesh.position.toArray()); } createBody(position, size) { const shape = new CANNON.Box(new CANNON.Vec3(size.x / 2, size.y / 2, size.z / 2)); const obstacleMaterial = new CANNON.Material('obstacle'); this.body = new CANNON.Body({ mass: 0, // Static body shape: shape, material: obstacleMaterial, position: position }); this.world.physicsWorld.addBody(this.body); console.log('Obstacle body created. Position:', this.body.position.toArray()); } update() { // Update mesh position to match physics body this.mesh.position.copy(this.body.position); this.mesh.quaternion.copy(this.body.quaternion); } } class AStar { constructor(navMesh) { this.navMesh = navMesh; } findNearestNode(position) { let nearestNode = null; let minDistance = Infinity; for (const node of this.navMesh.grid) { const distance = position.distanceTo(node); if (distance < minDistance) { minDistance = distance; nearestNode = node; } } return nearestNode; } heuristic(a, b) { return a.distanceTo(b); } getNeighbors(node) { return this.navMesh.grid.filter(neighbor => Math.abs(neighbor.x - node.x) <= this.navMesh.gridSize && Math.abs(neighbor.z - node.z) <= this.navMesh.gridSize && neighbor !== node ); } findPath(start, goal) { const openSet = [start]; const cameFrom = new Map(); const gScore = new Map(); const fScore = new Map(); gScore.set(start, 0); fScore.set(start, this.heuristic(start, goal)); while (openSet.length > 0) { const current = openSet.reduce((a, b) => fScore.get(a) < fScore.get(b) ? a : b); if (current.equals(goal)) { return this.reconstructPath(cameFrom, current); } openSet.splice(openSet.indexOf(current), 1); for (const neighbor of this.getNeighbors(current)) { const tentativeGScore = gScore.get(current) + current.distanceTo(neighbor); if (!gScore.has(neighbor) || tentativeGScore < gScore.get(neighbor)) { cameFrom.set(neighbor, current); gScore.set(neighbor, tentativeGScore); fScore.set(neighbor, gScore.get(neighbor) + this.heuristic(neighbor, goal)); if (!openSet.includes(neighbor)) { openSet.push(neighbor); } } } } return null; // No path found } reconstructPath(cameFrom, current) { const path = [current]; while (cameFrom.has(current)) { current = cameFrom.get(current); path.unshift(current); } return path; } visualizePath(path) { // Create a tube geometry for a consistently thick line const tubeGeometry = new THREE.TubeGeometry( new THREE.CatmullRomCurve3(path), path.length * 10, // number of tube segments 0.1, // tube radius 8, // number of radial segments false // closed curve ); const tubeMaterial = new THREE.MeshBasicMaterial({ color: 0x0000ff // Blue color }); const tubeMesh = new THREE.Mesh(tubeGeometry, tubeMaterial); tubeMesh.position.y = 0.2; // Slightly above the ground WorldScene.add(tubeMesh); return tubeMesh; } } class InputHandler { constructor() { this.controls = new OrbitControls(MainCamera, GameRenderer.renderer.domElement); this.initControls(); this.keys = { w: false, a: false, s: false, d: false }; this.mouseDown = false; this.initKeyboardListeners(); this.raycaster = new THREE.Raycaster(); this.mouse = new THREE.Vector2(); this.initMouseListeners(); } initControls() { this.controls.enableDamping = true; this.controls.dampingFactor = 0.25; this.controls.screenSpacePanning = false; this.controls.maxPolarAngle = Math.PI / 3; // Limit vertical rotation this.controls.minPolarAngle = Math.PI / 4; // Increase minimum angle for a more top-down view this.controls.maxDistance = 40; // Limit how far the camera can zoom out this.controls.minDistance = 15; // Decrease minimum distance for the new camera position this.controls.target.set(0, 0, 0); // Initially set the focus point to the world center this.controls.enableRotate = false; // Disable rotation for strict top-down view } initKeyboardListeners() { document.addEventListener('keydown', (event) => this.onKeyDown(event)); document.addEventListener('keyup', (event) => this.onKeyUp(event)); } onKeyDown(event) { if (event.key in this.keys) { this.keys[event.key] = true; } } onKeyUp(event) { if (event.key in this.keys) { this.keys[event.key] = false; } } update() { this.controls.update(); this.updateRaycaster(); } initMouseListeners() { GameRenderer.renderer.domElement.addEventListener('mousemove', (event) => this.onMouseMove(event)); GameRenderer.renderer.domElement.addEventListener('mousedown', () => this.mouseDown = true); GameRenderer.renderer.domElement.addEventListener('mouseup', () => this.mouseDown = false); GameRenderer.renderer.domElement.addEventListener('mouseleave', () => this.mouseDown = false); } onMouseMove(event) { const rect = GameRenderer.renderer.domElement.getBoundingClientRect(); this.mouse.x = ((event.clientX - rect.left) / rect.width) * 2 - 1; this.mouse.y = -((event.clientY - rect.top) / rect.height) * 2 + 1; } updateRaycaster() { this.raycaster.setFromCamera(this.mouse, MainCamera); const terrain = Meshes.getMesh('terrain'); if (terrain) { const intersects = this.raycaster.intersectObject(terrain); if (intersects.length > 0) { const intersectionPoint = intersects[0].point; // Update player facing direction if (GameWorld.player) { GameWorld.player.updateFacingDirection(intersectionPoint); } } } } } class App { constructor() { this.createRenderDivs(); this.clock = new THREE.Clock(); this.initialLoadingComplete = false; this.spriteSheet = null; this.deltaTime = 0; this.init(); } init() { window.LoadingManager = new THREE.LoadingManager(); this.setupLoadingManager(); window.Textures = TextureManager(); window.Materials = MaterialManager(); window.Meshes = MeshManager(); window.Lights = LightingManager(); window.GameWorld = new World(); window.Input = new InputHandler(); // Create the player GameWorld.createPlayer(); // Create the enemy GameWorld.createEnemy(); // Wait for textures to load before creating UI elements this.waitForTexturesAndInitUI(); this.addEventListeners(); } waitForTexturesAndInitUI() { Textures.loadTextures().then(() => { console.log('All textures loaded successfully'); GameWorld.createTerrain(); // Initialize other UI elements here if needed }).catch(error => { console.error('Error loading textures:', error); }); } setupLoadingManager() { LoadingManager.onProgress = (url, itemsLoaded, itemsTotal) => { const progress = (itemsLoaded / itemsTotal * 100).toFixed(0); loadingScreen.innerHTML = `Loading... ${progress}%`; }; LoadingManager.onLoad = () => { this.initialLoadingComplete = true; loadingScreen.style.display = 'none'; if (GameWorld) { // Check if the skybox has been loaded if (GameWorld.skybox.skyMesh) { console.log("Skybox loaded successfully"); } else { console.warn("Skybox not loaded yet"); } } }; LoadingManager.onError = (url) => { console.error('Error loading:', url); }; } addEventListeners() { addEventListener('resize', this.onWindowResize.bind(this)); const resizeObserver = new ResizeObserver(this.onWindowResize.bind(this)); resizeObserver.observe(parentDiv); } onWindowResize() { const width = parentDiv.clientWidth; const height = parentDiv.clientHeight; if (GameWorld) { MainCamera.aspect = width / height; MainCamera.updateProjectionMatrix(); GameRenderer.setSize(width, height); } } animate() { requestAnimationFrame(this.animate.bind(this)); this.deltaTime = Math.min(this.clock.getDelta(), 0.1); if (this.initialLoadingComplete) { GameWorld.update(this.deltaTime); Input.update(); if (GameWorld.player) { GameWorld.player.update(); } if (this.worldClock) { this.worldClock.update(GameWorld.Time); } else { //console.warn('WorldClock not initialized'); } Input.updateRaycaster(); // Update the raycaster in each frame } } start() { this.animate(); } createRenderDivs() { // Can create global variables by assigning them to window.variableName. window.parentDiv = document.getElementById('renderDiv'); window.canvas = document.getElementById('threeRenderCanvas'); window.loadingScreen = document.createElement('div'); if (!canvas) { canvas = document.createElement('canvas'); canvas.id = 'threeRenderCanvas'; parentDiv.appendChild(canvas); } // Create loading screen 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); window.uiDiv = document.createElement('div'); uiDiv.id = 'uiDiv'; uiDiv.style.position = 'absolute'; uiDiv.style.top = '0'; uiDiv.style.left = '0'; uiDiv.style.width = '100%'; uiDiv.style.height = '100%'; uiDiv.style.pointerEvents = 'none'; // Set to 'none' to allow events to pass through uiDiv.style.userSelect = 'none'; // Disable text selection uiDiv.style.webkitUserSelect = 'none'; // For Safari uiDiv.style.msUserSelect = 'none'; // For IE/Edge // Apply the same styles to parentDiv parentDiv.style.userSelect = 'none'; parentDiv.style.webkitUserSelect = 'none'; parentDiv.style.msUserSelect = 'none'; parentDiv.appendChild(uiDiv); } } window.Game = new App(); Game.start();