// Import necessary modules import * as THREE from 'three'; import { OrbitControls } from 'three/addons/controls/OrbitControls.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 loading manager const loadingManager = new THREE.LoadingManager(); const textureLoader = new THREE.TextureLoader(loadingManager); const gltfLoader = new GLTFLoader(loadingManager); let assetsLoaded = false; // 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?Ndg6'; } return url; }); const parentDiv = document.getElementById('renderDiv'); let canvas = document.getElementById('threeRenderCanvas'); if (!canvas) { canvas = document.createElement('canvas'); canvas.id = 'threeRenderCanvas'; parentDiv.appendChild(canvas); } // Create loading screen const loadingScreen = document.createElement('div'); loadingScreen.style.position = 'absolute'; loadingScreen.style.top = '0'; loadingScreen.style.left = '0'; loadingScreen.style.width = '100%'; loadingScreen.style.height = '100%'; loadingScreen.style.backgroundColor = 'rgba(0, 0, 0, 0.8)'; loadingScreen.style.color = 'white'; loadingScreen.style.display = 'flex'; loadingScreen.style.justifyContent = 'center'; loadingScreen.style.alignItems = 'center'; loadingScreen.style.fontSize = '24px'; loadingScreen.innerHTML = 'Loading... 0%'; parentDiv.appendChild(loadingScreen); // Loading manager events loadingManager.onProgress = function(url, itemsLoaded, itemsTotal) { const progress = ((itemsLoaded / itemsTotal) * 100).toFixed(0); loadingScreen.innerHTML = `Loading... ${progress}%`; }; loadingManager.onLoad = function() { assetsLoaded = true; loadingScreen.style.display = 'none'; }; loadingManager.onError = function(url) { console.error('Error loading:', url); }; // Initialize the scene const scene = new THREE.Scene(); const world = new CANNON.World(); world.gravity.set(0, -20, 0); world.defaultContactMaterial.friction = 0.01; world.defaultContactMaterial.restitution = 0; world.solver.iterations = 7; // Уменьшено количество итераций world.solver.tolerance = 0.01; // Увеличена толерантность world.broadphase = new CANNON.SAPBroadphase(world); // Оптимизация broad phase function randomBetween(min, max) { return Math.random() * (max - min) + min; } // Define physics materials const groundPhysMaterial = new CANNON.Material('ground'); // Define physics material for the ball const ballPhysMaterial = new CANNON.Material('ballMaterial'); // Create contact material between ball and ground const ballGroundContactMaterial = new CANNON.ContactMaterial( ballPhysMaterial, groundPhysMaterial, { friction: 0.05, // Lower friction for smoother rolling restitution: 0.95, // High restitution for bouncy balls } ); world.addContactMaterial(ballGroundContactMaterial); // 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); 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(0x87ceeb); // Bright sky blue const groundColor = new THREE.Color(0xffffff); // White ground reflection // Create sky dome with improved colors const vertexShader = ` varying vec3 vWorldPosition; void main() { vec4 worldPosition = modelMatrix * vec4( position, 1.0 ); vWorldPosition = worldPosition.xyz; gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 ); } `; const fragmentShader = ` uniform vec3 topColor; uniform vec3 bottomColor; uniform float offset; uniform float exponent; varying vec3 vWorldPosition; void main() { float h = normalize( vWorldPosition + offset ).y; gl_FragColor = vec4( mix( bottomColor, topColor, max( pow( max( h, 0.0 ), exponent ), 0.0 ) ), 1.0 ); } `; const uniforms = { topColor: { value: skyColor }, bottomColor: { value: groundColor }, offset: { value: 33 }, exponent: { value: 0.6 }, }; const skyGeo = new THREE.SphereGeometry(500, 32, 15); const skyMat = new THREE.ShaderMaterial({ uniforms: uniforms, vertexShader: vertexShader, fragmentShader: fragmentShader, side: THREE.BackSide, }); const sky = new THREE.Mesh(skyGeo, skyMat); scene.add(sky); // 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 infinite terrain const chunkSize = 200; const visibleChunks = 2; // Уменьшено количество видимых чанков const chunks = new Map(); function createTerrainChunk(x, z) { const chunkKey = `${x},${z}`; if (chunks.has(chunkKey)) return chunks.get(chunkKey); const geometry = new THREE.PlaneGeometry(chunkSize, chunkSize); const texture = textureLoader.load('https://play.rosebud.ai/assets/3D_playground_grass_diffuse.png?qoPW', undefined, undefined, function(err) { console.error('An error happened while loading the texture:', err); }); const normalMap = textureLoader.load('https://play.rosebud.ai/assets/3D_playground_grass_normal.png?1mYC', undefined, undefined, function(err) { console.error('An error happened while loading the normal map:', err); }); 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); // Optimize textures texture.minFilter = THREE.LinearFilter; normalMap.minFilter = THREE.LinearFilter; 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.position.set(x * chunkSize, 0, z * chunkSize); terrain.receiveShadow = true; scene.add(terrain); const groundShape = new CANNON.Box(new CANNON.Vec3(chunkSize / 2, 0.1, chunkSize / 2)); const groundBody = new CANNON.Body({ mass: 0, material: groundPhysMaterial, }); groundBody.addShape(groundShape); groundBody.position.set(x * chunkSize, -0.1, z * chunkSize); world.addBody(groundBody); chunks.set(chunkKey, { terrain, groundBody }); // Generate houses for this chunk generateHousesForChunk(x, z); // Generate roads for this chunk createRoadsForChunk(x, z); return { terrain, groundBody }; } function generateHousesForChunk(chunkX, chunkZ) { const houseCount = Math.floor(Math.random() * 3) + 1; // Уменьшено до 1-3 домов на чанк for (let i = 0; i < houseCount; i++) { const x = chunkX * chunkSize + Math.random() * chunkSize - chunkSize / 2; const z = chunkZ * chunkSize + Math.random() * chunkSize - chunkSize / 2; const housePosition = new THREE.Vector3(x, 0, z); const newHouse = createCozyHouse(housePosition); scene.add(newHouse.group); } } function updateVisibleChunks() { if (!character) return; const playerX = Math.floor(character.position.x / chunkSize); const playerZ = Math.floor(character.position.z / chunkSize); for (let x = playerX - visibleChunks; x <= playerX + visibleChunks; x++) { for (let z = playerZ - visibleChunks; z <= playerZ + visibleChunks; z++) { createTerrainChunk(x, z); } } } // Function to create a cozy house function createCozyHouse(position) { const houseGroup = new THREE.Group(); const houseWidth = 15; const houseDepth = 12; const houseHeight = 10; const wallThickness = 0.5; // Create walls const wallGeometry = new THREE.BoxGeometry(houseWidth, houseHeight, houseDepth); const wallMaterial = new THREE.MeshStandardMaterial({ color: 0xF5DEB3, side: THREE.DoubleSide }); const wallMesh = new THREE.Mesh(wallGeometry, wallMaterial); wallMesh.position.set(0, houseHeight / 2, 0); wallMesh.castShadow = true; wallMesh.receiveShadow = true; houseGroup.add(wallMesh); // Create roof const roofGeometry = new THREE.ConeGeometry(houseWidth * 0.7, houseHeight / 2, 4); const roofMaterial = new THREE.MeshStandardMaterial({ color: 0x8B4513, side: THREE.DoubleSide }); const roofMesh = new THREE.Mesh(roofGeometry, roofMaterial); roofMesh.position.set(0, houseHeight + houseHeight / 4, 0); roofMesh.castShadow = true; roofMesh.receiveShadow = true; houseGroup.add(roofMesh); // Create door const doorGeometry = new THREE.PlaneGeometry(3, 6); const doorMaterial = new THREE.MeshStandardMaterial({ color: 0x8B4513 }); const doorMesh = new THREE.Mesh(doorGeometry, doorMaterial); doorMesh.position.set(0, 3, houseDepth / 2 + 0.01); doorMesh.castShadow = true; doorMesh.receiveShadow = true; houseGroup.add(doorMesh); // Create windows const windowGeometry = new THREE.PlaneGeometry(2, 2); const windowMaterial = new THREE.MeshStandardMaterial({ color: 0x87CEEB }); const window1 = new THREE.Mesh(windowGeometry, windowMaterial); window1.position.set(-houseWidth / 4, houseHeight / 2, houseDepth / 2 + 0.01); houseGroup.add(window1); const window2 = new THREE.Mesh(windowGeometry, windowMaterial); window2.position.set(houseWidth / 4, houseHeight / 2, houseDepth / 2 + 0.01); houseGroup.add(window2); // Set the position of the entire house group houseGroup.position.copy(position); // Create a single physics body for the entire house // Create a compound shape for the house const houseBody = new CANNON.Body({ mass: 0, // Static body material: new CANNON.Material() }); // Main house shape const houseShape = new CANNON.Box(new CANNON.Vec3(houseWidth / 2, houseHeight / 2, houseDepth / 2)); houseBody.addShape(houseShape, new CANNON.Vec3(0, houseHeight / 2, 0)); // Roof shape const roofShape = new CANNON.Cylinder(0.1, houseWidth * 0.7 / 2, houseHeight / 2, 4); const roofQuaternion = new CANNON.Quaternion(); roofQuaternion.setFromAxisAngle(new CANNON.Vec3(1, 0, 0), -Math.PI / 2); houseBody.addShape(roofShape, new CANNON.Vec3(0, houseHeight + houseHeight / 4, 0), roofQuaternion); houseBody.position.copy(position); world.addBody(houseBody); return { group: houseGroup, body: houseBody }; } // Variables for house placement let isPlacingHouse = false; let housePlacementCursor; // Function to create house placement cursor function createHousePlacementCursor() { const geometry = new THREE.BoxGeometry(15, 10, 12); const material = new THREE.MeshBasicMaterial({ color: 0x00ff00, opacity: 0.5, transparent: true }); housePlacementCursor = new THREE.Mesh(geometry, material); scene.add(housePlacementCursor); } // Function to update house placement cursor position function updateHousePlacementCursor() { if (!isPlacingHouse || !housePlacementCursor) return; const raycaster = new THREE.Raycaster(); const mouse = new THREE.Vector2(); // Get mouse position mouse.x = (cursorPosition.x / window.innerWidth) * 2 - 1; mouse.y = -(cursorPosition.y / window.innerHeight) * 2 + 1; raycaster.setFromCamera(mouse, camera); const intersects = raycaster.intersectObjects(scene.children, true); if (intersects.length > 0) { const intersectionPoint = intersects[0].point; housePlacementCursor.position.copy(intersectionPoint); housePlacementCursor.position.y = 5; // Half of the house height // Make cursor visible housePlacementCursor.visible = true; } else { // Hide cursor if not intersecting with any object housePlacementCursor.visible = false; } } // Function to spawn a house at the cursor position function spawnHouseAtCursor() { if (!isPlacingHouse || !housePlacementCursor) return; const housePosition = housePlacementCursor.position.clone(); housePosition.y = 0; // Ensure the house is placed on the ground const newHouse = createCozyHouse(housePosition); scene.add(newHouse.group); console.log('House position:', newHouse.group.position); // Create physics body for the house const houseShape = new CANNON.Box(new CANNON.Vec3(7.5, 5, 6)); // Half-dimensions of the house const houseBody = new CANNON.Body({ mass: 100, // Give it mass so it can be destroyed shape: houseShape, position: new CANNON.Vec3(housePosition.x, housePosition.y + 5, housePosition.z) }); world.addBody(houseBody); // Link the house mesh and body newHouse.group.userData.physicsBody = houseBody; houseBody.userData = { group: newHouse.group }; // Stop placing house isPlacingHouse = false; scene.remove(housePlacementCursor); } // Setup improved lighting system const sunLight = new THREE.DirectionalLight(skyColor, 2.0); sunLight.position.set(-50, 100, -50); sunLight.castShadow = true; sunLight.shadow.mapSize.width = 2048; sunLight.shadow.mapSize.height = 2048; sunLight.shadow.camera.near = 10; sunLight.shadow.camera.far = 400; sunLight.shadow.camera.left = -100; sunLight.shadow.camera.right = 100; sunLight.shadow.camera.top = 100; sunLight.shadow.camera.bottom = -100; sunLight.shadow.bias = -0.001; scene.add(sunLight); // Add hemisphere light to simulate sky and ground bounce light const hemiLight = new THREE.HemisphereLight(skyColor, groundColor, 0.6); scene.add(hemiLight); // ========================= // Character Integration // ========================= // Variables for character let character = null; let characterBody = null; let mixer = null; let isGrounded = false; let currentJumps = 0; let lastJumpTime = 0; let moveDirection = new THREE.Vector3(); let isFirstPersonMode = false; let roads = []; let cars = []; let isGameOver = false; // Road configuration const roadConfig = { width: 15, length: chunkSize, material: new THREE.MeshStandardMaterial({ color: 0x333333, roughness: 0.8, metalness: 0.2 }) }; // Car configuration const carConfig = { width: 4, length: 8, height: 3, speed: 15, material: new THREE.MeshStandardMaterial({ color: 0x1E90FF }) }; let firstPersonCameraRotation = new THREE.Euler(0, 0, 0, 'YXZ'); let mouseSensitivity = 0.002; let cameraLerpFactor = 0.1; // Adjust this value to control smoothness (0.1 is quite smooth, increase for faster response) let targetCameraPosition = new THREE.Vector3(); let targetCameraRotation = new THREE.Euler(); let walkAction = null; let idleAction = null; let jumpAction = null; let fallAction = null; let contactNormal = new CANNON.Vec3(); let upAxis = new CANNON.Vec3(0, 1, 0); const keysPressed = { w: false, a: false, s: false, d: false, space: false, }; // Character configuration const characterConfig = { // Movement settings groundSpeed: 30, airSpeed: 25, groundDamping: 0.1, airDamping: 0.1, acceleration: 20, turnSpeed: 8, jumpForce: 12, jumpCooldown: 0.1, maxJumps: 1, // Physics settings radius: 2.5, // Collision shape radius height: 5, // Increased height to match model's visual height mass: 62, friction: 0.1, restitution: 0.0, linearDamping: 0.02, angularDamping: 0.9, // Visual and animation settings scale: 10, startHeight: 8, }; // Define physics materials for character const characterPhysMaterial = new CANNON.Material('character'); // Create contact material between character and ground const characterGroundContact = new CANNON.ContactMaterial( characterPhysMaterial, groundPhysMaterial, { friction: 0.01, restitution: 0.0, contactEquationStiffness: 1e8, contactEquationRelaxation: 3, } ); world.addContactMaterial(characterGroundContact); // Create contact material between ball and character const ballCharacterContactMaterial = new CANNON.ContactMaterial( ballPhysMaterial, characterPhysMaterial, { friction: 0.05, restitution: 0.9, } ); world.addContactMaterial(ballCharacterContactMaterial); // Add keyboard event listeners window.addEventListener('keydown', (event) => { switch (event.code) { case 'KeyW': keysPressed.w = true; break; case 'KeyA': keysPressed.a = true; break; case 'KeyS': keysPressed.s = true; break; case 'KeyD': keysPressed.d = true; break; case 'Space': keysPressed.space = true; break; case 'KeyE': if (!isPlacingHouse) { isPlacingHouse = true; createHousePlacementCursor(); } else { spawnHouseAtCursor(); } break; case 'KeyR': isFirstPersonMode = !isFirstPersonMode; if (isFirstPersonMode) { controls.enabled = false; if (character) character.visible = false; lockMouse(); // Set initial first-person camera rotation firstPersonCameraRotation.set(0, character.rotation.y, 0); camera.rotation.copy(firstPersonCameraRotation); } else { controls.enabled = true; controls.maxPolarAngle = cameraSettings.maxPolarAngle; controls.minDistance = cameraSettings.minDistance; controls.maxDistance = cameraSettings.maxDistance; if (character) character.visible = true; unlockMouse(); // Reset camera position for third-person view const behindPosition = new THREE.Vector3(0, characterConfig.height / 2, cameraSettings.minDistance); behindPosition.applyQuaternion(character.quaternion); camera.position.copy(characterBody.position).add(behindPosition); camera.lookAt(characterBody.position.x, characterBody.position.y + characterConfig.height / 2, characterBody.position.z); } break; } }); // Add mouse click listener for house placement window.addEventListener('click', (event) => { if (isPlacingHouse) { spawnHouseAtCursor(); } }); // Track cursor position const cursorPosition = { x: 0, y: 0 }; window.addEventListener('mousemove', (event) => { cursorPosition.x = event.clientX; cursorPosition.y = event.clientY; }); // Mouse lock functions function lockMouse() { canvas.requestPointerLock = canvas.requestPointerLock || canvas.mozRequestPointerLock; canvas.requestPointerLock(); } function unlockMouse() { document.exitPointerLock = document.exitPointerLock || document.mozExitPointerLock; document.exitPointerLock(); } // Mouse movement handler function onMouseMove(event) { if (isFirstPersonMode && document.pointerLockElement === canvas) { const movementX = event.movementX || event.mozMovementX || 0; const movementY = event.movementY || event.mozMovementY || 0; // Update first-person camera rotation firstPersonCameraRotation.y -= movementX * mouseSensitivity; firstPersonCameraRotation.x -= movementY * mouseSensitivity; // Clamp vertical rotation to prevent flipping firstPersonCameraRotation.x = Math.max(-Math.PI / 2, Math.min(Math.PI / 2, firstPersonCameraRotation.x)); // Update character rotation (only Y-axis) if (character) { character.rotation.y = firstPersonCameraRotation.y; } // Directly update camera rotation for immediate response camera.rotation.x = firstPersonCameraRotation.x; camera.rotation.y = firstPersonCameraRotation.y; } } // Add mouse movement listener document.addEventListener('mousemove', onMouseMove); window.addEventListener('keyup', (event) => { switch (event.code) { case 'KeyW': keysPressed.w = false; break; case 'KeyA': keysPressed.a = false; break; case 'KeyS': keysPressed.s = false; break; case 'KeyD': keysPressed.d = false; break; case 'Space': keysPressed.space = false; break; } }); // Load the character model const characterUrl = 'https://play.rosebud.ai/assets/3D_playground_character.glb?AW3M'; gltfLoader.load(characterUrl, (gltf) => { const model = gltf.scene; model.scale.set( characterConfig.scale, characterConfig.scale, characterConfig.scale ); // Apply rotation correction if needed model.rotation.y = Math.PI; // Correcting the model's rotation // Adjust model's position so feet are on the ground model.position.set(0, 0, 0); model.traverse((child) => { if (child.isMesh) { child.castShadow = true; child.receiveShadow = true; child.material.envMapIntensity = 1.0; } }); // Create character physics body characterBody = new CANNON.Body({ mass: characterConfig.mass, material: characterPhysMaterial, linearDamping: characterConfig.linearDamping, angularDamping: characterConfig.angularDamping, fixedRotation: true, type: CANNON.Body.DYNAMIC, }); const characterShape = new CANNON.Cylinder( characterConfig.radius, characterConfig.radius, characterConfig.height, 8 ); // Adjust shapeOffset to align collision shape with the character model const shapeOffset = new CANNON.Vec3(0, characterConfig.height / 2, 0); characterBody.addShape(characterShape, shapeOffset); characterBody.position.set(0, characterConfig.startHeight, 0); // Set initial character position to the ball spawn area const initialX = Math.random() * 20 - 10; const initialZ = Math.random() * 20 - 10; characterBody.position.set(initialX, characterConfig.startHeight, initialZ); world.addBody(characterBody); // Reset contact tracking isGrounded = false; let groundContactCount = 0; characterBody.addEventListener('collide', (event) => { const contact = event.contact; let otherBody; if (event.contact.bi === characterBody) { otherBody = event.contact.bj; contact.ni.negate(contactNormal); } else { otherBody = event.contact.bi; contactNormal.copy(contact.ni); } if (contactNormal.dot(upAxis) > 0.5) { groundContactCount++; isGrounded = true; currentJumps = 0; // Reset animations for ground state if (fallAction) { fallAction.stop(); fallAction.setEffectiveWeight(0); } if (jumpAction) { jumpAction.stop(); jumpAction.setEffectiveWeight(0); } } // Prevent character from getting stuck inside the house if (house && house.body && otherBody === house.body) { const penetrationVector = contact.ni.scale(contact.penetrationDepth); characterBody.position.vadd(penetrationVector, characterBody.position); } }); characterBody.addEventListener('endContact', (event) => { let otherBody; if (event.contact.bi === characterBody) { otherBody = event.contact.bj; event.contact.ni.negate(contactNormal); } else { otherBody = event.contact.bi; contactNormal.copy(event.contact.ni); } if (contactNormal.dot(upAxis) > 0.5) { groundContactCount = Math.max(0, groundContactCount - 1); if (groundContactCount === 0) { isGrounded = false; } } }); // Setup animations mixer = new THREE.AnimationMixer(model); const idleClip = gltf.animations.find((clip) => clip.name.toLowerCase().includes('idle')); const walkClip = gltf.animations.find((clip) => clip.name.toLowerCase().includes('walk')); const jumpClip = gltf.animations.find((clip) => clip.name.toLowerCase().includes('jump')); const fallClip = gltf.animations.find((clip) => clip.name.toLowerCase().includes('fall')); if (idleClip) { idleAction = mixer.clipAction(idleClip); idleAction.play(); idleAction.setEffectiveWeight(1); } if (walkClip) { walkAction = mixer.clipAction(walkClip); walkAction.play(); walkAction.setEffectiveWeight(0); } if (jumpClip) { jumpAction = mixer.clipAction(jumpClip); jumpAction.setLoop(THREE.LoopOnce); jumpAction.clampWhenFinished = true; jumpAction.setEffectiveWeight(0); } if (fallClip) { fallAction = mixer.clipAction(fallClip); fallAction.setLoop(THREE.LoopRepeat); fallAction.setEffectiveWeight(0); } character = model; scene.add(model); }); // Update character movement function updateCharacterMovement(deltaTime) { if (!character || !characterBody) return; // Get camera's forward and right vectors const cameraForward = new THREE.Vector3(0, 0, -1).applyQuaternion(camera.quaternion); const cameraRight = new THREE.Vector3(1, 0, 0).applyQuaternion(camera.quaternion); // Ensure these vectors are parallel to the ground cameraForward.y = 0; cameraRight.y = 0; cameraForward.normalize(); cameraRight.normalize(); // Calculate move direction relative to camera moveDirection.set(0, 0, 0); // Add movement input if (keysPressed.w) moveDirection.add(cameraForward); if (keysPressed.s) moveDirection.sub(cameraForward); if (keysPressed.a) moveDirection.sub(cameraRight); if (keysPressed.d) moveDirection.add(cameraRight); // Normalize movement direction if it exists if (moveDirection.length() > 0) { moveDirection.normalize(); } // Update character rotation if (!isFirstPersonMode) { 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; } } else { // In first-person mode, character rotation is handled by camera rotation character.rotation.y = firstPersonCameraRotation.y; } // Always update the physics body rotation to match the character characterBody.quaternion.setFromEuler(0, character.rotation.y, 0); // Get current horizontal velocity const currentVelocity = new THREE.Vector2(characterBody.velocity.x, characterBody.velocity.z); // Different handling for ground vs air movement if (isGrounded) { // Ground movement if (moveDirection.length() > 0) { // Calculate target velocity const targetVelocity = new THREE.Vector2( moveDirection.x * characterConfig.groundSpeed, moveDirection.z * characterConfig.groundSpeed ); // Interpolate current velocity towards target currentVelocity.lerp(targetVelocity, characterConfig.acceleration * deltaTime); // Update character rotation const targetAngle = Math.atan2(moveDirection.x, moveDirection.z); let currentAngle = character.rotation.y; // Calculate shortest rotation distance let angleDiff = targetAngle - currentAngle; if (angleDiff > Math.PI) angleDiff -= Math.PI * 2; if (angleDiff < -Math.PI) angleDiff += Math.PI * 2; // Smoothly rotate character character.rotation.y += angleDiff * characterConfig.turnSpeed * deltaTime; characterBody.quaternion.setFromEuler(0, character.rotation.y, 0); } else { // Apply ground damping when no input currentVelocity.multiplyScalar(1 - characterConfig.groundDamping * deltaTime); } } else { // Air movement if (moveDirection.length() > 0) { const airVelocity = new THREE.Vector2( moveDirection.x * characterConfig.airSpeed * deltaTime, moveDirection.z * characterConfig.airSpeed * deltaTime ); currentVelocity.add(airVelocity); // Clamp air speed const maxAirSpeed = characterConfig.airSpeed; if (currentVelocity.length() > maxAirSpeed) { currentVelocity.normalize().multiplyScalar(maxAirSpeed); } } else { // Apply air damping when no input currentVelocity.multiplyScalar(1 - characterConfig.airDamping * deltaTime); } } // Apply calculated velocity characterBody.velocity.x = currentVelocity.x; characterBody.velocity.z = currentVelocity.y; // Handle jumping if (keysPressed.space && isGrounded && currentJumps < characterConfig.maxJumps) { const now = performance.now(); if (now - lastJumpTime > characterConfig.jumpCooldown * 1000) { characterBody.velocity.y = characterConfig.jumpForce; currentJumps++; lastJumpTime = now; isGrounded = false; if (jumpAction) { jumpAction.reset(); jumpAction.setEffectiveWeight(1); jumpAction.play(); } } } // Update animations if (mixer && walkAction && idleAction && jumpAction && fallAction) { const verticalVelocity = characterBody.velocity.y; const horizontalSpeed = new THREE.Vector2(characterBody.velocity.x, characterBody.velocity.z).length(); if (!isGrounded) { // Air state walkAction.stop(); idleAction.stop(); if (verticalVelocity > 1) { // Rising fallAction.stop(); jumpAction.play(); jumpAction.setEffectiveWeight(1); } else { // Falling jumpAction.stop(); fallAction.play(); fallAction.setEffectiveWeight(1); } } else { // Ground state jumpAction.stop(); fallAction.stop(); if (horizontalSpeed > 0.1) { idleAction.stop(); walkAction.play(); walkAction.setEffectiveWeight(1); } else { walkAction.stop(); idleAction.play(); idleAction.setEffectiveWeight(1); } } } // Update animation mixer if (mixer) { mixer.update(deltaTime); } } // Update camera to follow the character function updateCamera() { if (!character || !characterBody) return; const characterPos = characterBody.position.clone(); if (isFirstPersonMode) { // First-person mode character.visible = false; // Hide character model const eyeHeight = characterConfig.height * 0.9; // Set camera position to character's eye level camera.position.set( characterPos.x, characterPos.y + eyeHeight, characterPos.z ); // Camera rotation is already updated in onMouseMove for immediate response // We don't need to interpolate it here // Ensure the character's Y rotation matches the camera's character.rotation.y = camera.rotation.y; // Disable orbit controls in first-person mode controls.enabled = false; } else { // Third-person mode (unchanged) character.visible = true; controls.enabled = true; const targetPosition = new THREE.Vector3( characterPos.x, characterPos.y + characterConfig.height / 2, characterPos.z ); controls.target.lerp(targetPosition, cameraSettings.smoothSpeed); controls.update(); } } // ========================= // End of Character Integration // ========================= // Create initial terrain chunks function createInitialTerrain() { for (let x = -1; x <= 1; x++) { for (let z = -1; z <= 1; z++) { createTerrainChunk(x, z); } } } // Initialize terrain and house createInitialTerrain(); let house = null; // Create initial cars // Initialize cars for each road roads.forEach(road => { spawnCar(road); }); function createRoad(startX, startZ, direction) { // Create main road const roadGeometry = new THREE.PlaneGeometry( direction === 'x' ? roadConfig.length : roadConfig.width, direction === 'z' ? roadConfig.length : roadConfig.width ); const roadTexture = textureLoader.load('https://play.rosebud.ai/assets/3D_playground_grass_diffuse.png?qoPW'); roadTexture.wrapS = roadTexture.wrapT = THREE.RepeatWrapping; roadTexture.repeat.set(direction === 'x' ? 50 : 5, direction === 'z' ? 50 : 5); const roadMaterial = new THREE.MeshStandardMaterial({ map: roadTexture, color: 0x333333, roughness: 0.8, metalness: 0.2 }); const road = new THREE.Mesh(roadGeometry, roadMaterial); road.rotation.x = -Math.PI / 2; road.position.set( startX + (direction === 'x' ? roadConfig.length / 2 : 0), 0.1, startZ + (direction === 'z' ? roadConfig.length / 2 : 0) ); road.receiveShadow = true; scene.add(road); // Create road sides (curbs) const curbGeometry = new THREE.BoxGeometry( direction === 'x' ? roadConfig.length : 1, 0.3, direction === 'z' ? roadConfig.length : 1 ); const curbMaterial = new THREE.MeshStandardMaterial({ color: 0x888888 }); const leftCurb = new THREE.Mesh(curbGeometry, curbMaterial); leftCurb.position.set( road.position.x + (direction === 'z' ? roadConfig.width / 2 + 0.5 : 0), 0.15, road.position.z - (direction === 'x' ? roadConfig.width / 2 + 0.5 : 0) ); scene.add(leftCurb); const rightCurb = new THREE.Mesh(curbGeometry, curbMaterial); rightCurb.position.set( road.position.x - (direction === 'z' ? roadConfig.width / 2 + 0.5 : 0), 0.15, road.position.z + (direction === 'x' ? roadConfig.width / 2 + 0.5 : 0) ); scene.add(rightCurb); roads.push({ mesh: road, direction: direction }); // Add decoration around the road addRoadDecoration(road.position, direction); } function addRoadDecoration(roadPosition, direction) { const treeGeometry = new THREE.ConeGeometry(2, 5, 8); const treeMaterial = new THREE.MeshStandardMaterial({ color: 0x228B22 }); const trunkGeometry = new THREE.CylinderGeometry(0.5, 0.5, 2); const trunkMaterial = new THREE.MeshStandardMaterial({ color: 0x8B4513 }); for (let i = 0; i < 5; i++) { const tree = new THREE.Group(); const treeTop = new THREE.Mesh(treeGeometry, treeMaterial); const trunk = new THREE.Mesh(trunkGeometry, trunkMaterial); treeTop.position.y = 3.5; tree.add(treeTop); tree.add(trunk); const side = i % 2 === 0 ? 1 : -1; const offset = (Math.random() - 0.5) * 10; tree.position.set( roadPosition.x + (direction === 'z' ? side * (roadConfig.width / 2 + 5 + Math.abs(offset)) : offset), 0, roadPosition.z + (direction === 'x' ? side * (roadConfig.width / 2 + 5 + Math.abs(offset)) : offset) ); scene.add(tree); } } function createRoadsForChunk(chunkX, chunkZ) { // Create only one road per chunk if (Math.random() < 0.5) { // 50% chance to create a road if (Math.random() < 0.5) { createRoad(chunkX * chunkSize, chunkZ * chunkSize + chunkSize / 2, 'x'); } else { createRoad(chunkX * chunkSize + chunkSize / 2, chunkZ * chunkSize, 'z'); } } } function createCar(road) { if (!road || !road.mesh || !road.direction) { console.warn('Invalid road object:', road); return null; } const carBody = new THREE.BoxGeometry(carConfig.length, carConfig.height, carConfig.width); const carMesh = new THREE.Mesh(carBody, carConfig.material); // Add windows const windowMaterial = new THREE.MeshStandardMaterial({ color: 0x87CEEB }); const frontWindow = new THREE.Mesh( new THREE.PlaneGeometry(carConfig.width * 0.8, carConfig.height * 0.4), windowMaterial ); frontWindow.position.set(carConfig.length * 0.3, carConfig.height * 0.2, 0); frontWindow.rotation.y = Math.PI / 2; carMesh.add(frontWindow); // Add wheels const wheelGeometry = new THREE.CylinderGeometry(carConfig.height * 0.2, carConfig.height * 0.2, carConfig.width * 0.2, 32); const wheelMaterial = new THREE.MeshStandardMaterial({ color: 0x1a1a1a }); const wheelPositions = [ [-carConfig.length * 0.3, -carConfig.height * 0.3, carConfig.width * 0.6], [-carConfig.length * 0.3, -carConfig.height * 0.3, -carConfig.width * 0.6], [carConfig.length * 0.3, -carConfig.height * 0.3, carConfig.width * 0.6], [carConfig.length * 0.3, -carConfig.height * 0.3, -carConfig.width * 0.6] ]; wheelPositions.forEach(position => { const wheel = new THREE.Mesh(wheelGeometry, wheelMaterial); wheel.position.set(...position); wheel.rotation.z = Math.PI / 2; carMesh.add(wheel); }); // Set initial position const roadStart = road.direction === 'x' ? road.mesh.position.x - roadConfig.length / 2 : road.mesh.position.z - roadConfig.length / 2; carMesh.position.set( road.direction === 'x' ? roadStart : road.mesh.position.x, carConfig.height / 2 + 0.1, road.direction === 'z' ? roadStart : road.mesh.position.z ); carMesh.castShadow = true; carMesh.receiveShadow = true; scene.add(carMesh); const direction = road.direction === 'x' ? new THREE.Vector3(1, 0, 0) : new THREE.Vector3(0, 0, 1); return { mesh: carMesh, direction: direction, road: road, forward: true }; } function spawnCar(road) { const newCar = createCar(road); if (newCar) { cars.push(newCar); // Schedule next car spawn setTimeout(() => spawnCar(road), carConfig.spawnInterval * 1000); } } function updateCars(deltaTime) { for (let i = cars.length - 1; i >= 0; i--) { const car = cars[i]; if (car && car.mesh && car.direction && car.road) { const movement = car.direction.clone().multiplyScalar(carConfig.speed * deltaTime); car.mesh.position.add(movement); // Check if the car has reached the end of the road const roadEnd = car.road.direction === 'x' ? car.road.mesh.position.x + roadConfig.length / 2 : car.road.mesh.position.z + roadConfig.length / 2; const carPosition = car.road.direction === 'x' ? car.mesh.position.x : car.mesh.position.z; if (carPosition > roadEnd) { // Remove the car scene.remove(car.mesh); cars.splice(i, 1); // Spawn a new car at the start of the road spawnCar(car.road); } } else { console.warn('Invalid car object:', car); cars.splice(i, 1); } } } function checkCarCollisions() { if (!characterBody || isGameOver) return; const playerPosition = new THREE.Vector3( characterBody.position.x, characterBody.position.y, characterBody.position.z ); cars.forEach(car => { const carPosition = car.mesh.position; const distance = playerPosition.distanceTo(carPosition); if (distance < (carConfig.width + characterConfig.radius)) { gameOver(); } }); } function gameOver() { isGameOver = true; console.log("Game Over! You were hit by a car!"); // Здесь можно добавить дополнительную логику завершения игры } /** * Variables for ball spawning */ const ballSpawnInterval = 2; // Увеличен интервал между появлением мячей let timeSinceLastBall = 0; const balls = []; const maxBalls = 10; // Уменьшено максимальное количество мячей const ballPool = []; // Пул объектов для мячей function createBallForPool() { const ballSize = randomBetween(1, 3); const ballGeometry = new THREE.SphereGeometry(ballSize, 16, 16); // Уменьшено количество сегментов const ballMaterial = new THREE.MeshStandardMaterial({ color: Math.random() * 0xffffff }); const ballMesh = new THREE.Mesh(ballGeometry, ballMaterial); const ballBody = new CANNON.Body({ mass: 10, shape: new CANNON.Sphere(ballSize), material: ballPhysMaterial, }); return { mesh: ballMesh, body: ballBody }; } /** * Function to spawn a new bouncy ball with a random color */ function spawnBall() { if (!scene || !world) { console.warn('Required objects not initialized. Cannot spawn ball.'); return; } let ball; if (ballPool.length > 0) { ball = ballPool.pop(); } else { ball = createBallForPool(); } const mapSize = chunkSize * visibleChunks; const x = Math.random() * mapSize - mapSize / 2; const y = 100 + Math.random() * 50; const z = Math.random() * mapSize - mapSize / 2; ball.mesh.position.set(x, y, z); ball.body.position.set(x, y, z); ball.body.velocity.set(0, 0, 0); ball.body.angularVelocity.set(0, 0, 0); scene.add(ball.mesh); world.addBody(ball.body); balls.push(ball); setTimeout(() => { const index = balls.indexOf(ball); if (index > -1) { balls.splice(index, 1); scene.remove(ball.mesh); world.removeBody(ball.body); ballPool.push(ball); } }, 10000); } let lastTime = performance.now(); function animate() { requestAnimationFrame(animate); const currentTime = performance.now(); const deltaTime = Math.min((currentTime - lastTime) / 1000, 0.1); lastTime = currentTime; if (assetsLoaded && !isGameOver) { world.step(deltaTime); updateCharacterMovement(deltaTime); updateCamera(); // Оптимизация обновления чанков if (currentTime % 1000 < 16) { // Обновляем каждую секунду updateVisibleChunks(); } updateHousePlacementCursor(); updateCars(deltaTime); checkCarCollisions(); if (character && characterBody) { character.position.copy(characterBody.position); } timeSinceLastBall += deltaTime; if (timeSinceLastBall >= ballSpawnInterval && balls.length < maxBalls) { spawnBall(); timeSinceLastBall = 0; } // Update balls and check for collisions for (let i = balls.length - 1; i >= 0; i--) { const ball = balls[i]; if (ball && ball.mesh && ball.body && ball.body.position && ball.body.quaternion) { ball.mesh.position.copy(ball.body.position); ball.mesh.quaternion.copy(ball.body.quaternion); // Check for collisions with houses if (world && world.bodies) { world.bodies.forEach(body => { if (body && body.userData && body.userData.group && body.mass > 0 && ball.body && body.position) { const distance = new CANNON.Vec3().copy(ball.body.position).vsub(body.position).length(); if (distance < 10) { // Adjust this value based on your house size // Remove the house if (scene && body.userData.group) { scene.remove(body.userData.group); } if (world && world.removeBody) { world.removeBody(body); } } } }); } } else { console.warn('Invalid ball object encountered:', ball); balls.splice(i, 1); // Remove invalid ball from the array } } } composer.render(); } // Handle window resize function onWindowResize() { const width = parentDiv.clientWidth; const height = parentDiv.clientHeight; // Update camera camera.aspect = width / height; camera.updateProjectionMatrix(); // Update renderer and composer renderer.setSize(width, height); composer.setSize(width, height); // Update post-processing passes bloomPass.resolution.set(width, height); smaaPass.setSize(width, height); } // Add event listeners window.addEventListener('resize', onWindowResize); const resizeObserver = new ResizeObserver(onWindowResize); resizeObserver.observe(parentDiv); // Start animation animate();