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; // Create audio context and sounds const audioContext = new(window.AudioContext || window.webkitAudioContext)(); let jumpSound = null; let lossSound = null; let winSound = null; let backgroundMusic = null; // Load sounds fetch('https://play.rosebud.ai/assets/jump.mp3?dnRK') .then(response => response.arrayBuffer()) .then(arrayBuffer => audioContext.decodeAudioData(arrayBuffer)) .then(audioBuffer => { jumpSound = audioBuffer; }); fetch('https://play.rosebud.ai/assets/Failed1.mp3?dImD') .then(response => response.arrayBuffer()) .then(arrayBuffer => audioContext.decodeAudioData(arrayBuffer)) .then(audioBuffer => { lossSound = audioBuffer; }); fetch('https://play.rosebud.ai/assets/Win.mp3?oOaC') .then(response => response.arrayBuffer()) .then(arrayBuffer => audioContext.decodeAudioData(arrayBuffer)) .then(audioBuffer => { winSound = audioBuffer; }); fetch('https://play.rosebud.ai/assets/muz.mp3?LqGQ') .then(response => response.arrayBuffer()) .then(arrayBuffer => audioContext.decodeAudioData(arrayBuffer)) .then(audioBuffer => { backgroundMusic = audioBuffer; }); // Functions to play sounds function playJumpSound() { if (jumpSound && audioContext.state === 'running') { const source = audioContext.createBufferSource(); source.buffer = jumpSound; source.connect(audioContext.destination); source.start(0); } } function playLossSound() { if (lossSound && audioContext.state === 'running') { const source = audioContext.createBufferSource(); source.buffer = lossSound; source.connect(audioContext.destination); source.start(0); } } function playWinSound() { if (winSound && audioContext.state === 'running') { const source = audioContext.createBufferSource(); source.buffer = winSound; source.connect(audioContext.destination); source.start(0); } } function playBackgroundMusic() { if (backgroundMusic && audioContext.state === 'running') { const source = audioContext.createBufferSource(); const gainNode = audioContext.createGain(); gainNode.gain.value = 1.0; // Set volume to maximum source.buffer = backgroundMusic; source.connect(gainNode); gainNode.connect(audioContext.destination); source.loop = true; // Enable looping source.start(0); return source; // Return the source for later control } return null; } // 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?9RtG'; } 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'; displayGameStartScreen(); }; function displayGameStartScreen() { const startScreen = document.createElement('div'); startScreen.style.position = 'absolute'; startScreen.style.top = '50%'; startScreen.style.left = '50%'; startScreen.style.transform = 'translate(-50%, -50%)'; startScreen.style.backgroundColor = 'rgba(0, 0, 0, 0.8)'; startScreen.style.color = 'white'; startScreen.style.padding = '20px'; startScreen.style.borderRadius = '10px'; startScreen.style.textAlign = 'center'; startScreen.style.zIndex = '1000'; startScreen.innerHTML = `

Привет это

Сладкий Паркур!

Жми пробел

`; parentDiv.appendChild(startScreen); // Add one-time event listener for space key const startGameHandler = (event) => { if (event.code === 'Space') { parentDiv.removeChild(startScreen); gameStarted = true; window.removeEventListener('keydown', startGameHandler); } }; window.addEventListener('keydown', startGameHandler); } function showLossScreen() { playLossSound(); const lossDiv = document.createElement('div'); lossDiv.style.position = 'absolute'; lossDiv.style.top = '50%'; lossDiv.style.left = '50%'; lossDiv.style.transform = 'translate(-50%, -50%)'; lossDiv.style.backgroundColor = 'rgba(0, 0, 0, 0.9)'; lossDiv.style.color = 'white'; lossDiv.style.padding = '40px'; lossDiv.style.borderRadius = '20px'; lossDiv.style.maxWidth = '800px'; lossDiv.style.textAlign = 'center'; lossDiv.style.fontFamily = 'Arial, sans-serif'; lossDiv.style.zIndex = '1000'; lossDiv.style.border = '3px solid #ff4444'; lossDiv.style.boxShadow = '0 0 30px rgba(255, 68, 68, 0.3)'; const lossTitle = document.createElement('h1'); lossTitle.textContent = '😢 Ты упал! 😢'; lossTitle.style.color = '#ff4444'; lossTitle.style.fontSize = '48px'; lossTitle.style.marginBottom = '20px'; lossTitle.style.textShadow = '0 0 10px rgba(255, 68, 68, 0.5)'; const lossMessage = document.createElement('p'); lossMessage.innerHTML = 'Как же так?

'; lossMessage.style.fontSize = '20px'; lossMessage.style.lineHeight = '1.6'; lossMessage.style.marginBottom = '30px'; const playAgainButton = document.createElement('button'); playAgainButton.textContent = 'Заново'; playAgainButton.style.marginTop = '20px'; playAgainButton.style.padding = '15px 40px'; playAgainButton.style.fontSize = '24px'; playAgainButton.style.cursor = 'pointer'; playAgainButton.style.backgroundColor = '#ff4444'; playAgainButton.style.color = '#fff'; playAgainButton.style.border = 'none'; playAgainButton.style.borderRadius = '10px'; playAgainButton.style.transition = 'all 0.3s ease'; playAgainButton.onmouseover = function() { this.style.backgroundColor = '#ff6666'; this.style.transform = 'scale(1.1)'; }; playAgainButton.onmouseout = function() { this.style.backgroundColor = '#ff4444'; this.style.transform = 'scale(1)'; }; playAgainButton.onclick = function() { // Stop current background music if it's playing if (currentBackgroundMusic) { currentBackgroundMusic.stop(); } gameOver = false; window.location.reload(); return false; }; lossDiv.appendChild(lossTitle); lossDiv.appendChild(lossMessage); lossDiv.appendChild(playAgainButton); parentDiv.appendChild(lossDiv); // Prevent further character movement keysPressed.w = false; keysPressed.a = false; keysPressed.s = false; keysPressed.d = false; keysPressed.space = false; } function showVictoryScreen() { // Keep character visible by not stopping physics/rendering gameOver = true; // Add this to prevent further player control const victoryDiv = document.createElement('div'); victoryDiv.style.position = 'absolute'; victoryDiv.style.top = '50%'; victoryDiv.style.left = '50%'; victoryDiv.style.transform = 'translate(-50%, -50%)'; victoryDiv.style.backgroundColor = 'rgba(0, 0, 0, 0.9)'; victoryDiv.style.color = 'white'; victoryDiv.style.padding = '40px'; victoryDiv.style.borderRadius = '20px'; victoryDiv.style.maxWidth = '800px'; victoryDiv.style.textAlign = 'center'; victoryDiv.style.fontFamily = 'Arial, sans-serif'; victoryDiv.style.zIndex = '1000'; victoryDiv.style.border = '3px solid #ffd700'; victoryDiv.style.boxShadow = '0 0 30px rgba(255, 215, 0, 0.3)'; const victoryTitle = document.createElement('h1'); victoryTitle.textContent = '🏆 Победа! 🏆'; victoryTitle.style.color = '#ffd700'; victoryTitle.style.fontSize = '48px'; victoryTitle.style.marginBottom = '20px'; victoryTitle.style.textShadow = '0 0 10px rgba(255, 215, 0, 0.5)'; const victoryMessage = document.createElement('p'); victoryMessage.innerHTML = ` Ты дошел до мороженного!

`; victoryMessage.style.fontSize = '20px'; victoryMessage.style.lineHeight = '1.6'; victoryMessage.style.marginBottom = '30px'; const playAgainButton = document.createElement('button'); playAgainButton.textContent = 'Заново'; playAgainButton.style.marginTop = '20px'; playAgainButton.style.padding = '15px 40px'; playAgainButton.style.fontSize = '24px'; playAgainButton.style.cursor = 'pointer'; playAgainButton.style.backgroundColor = '#ffd700'; playAgainButton.style.color = '#000'; playAgainButton.style.border = 'none'; playAgainButton.style.borderRadius = '10px'; playAgainButton.style.transition = 'all 0.3s ease'; playAgainButton.onmouseover = function() { this.style.backgroundColor = '#fff'; this.style.transform = 'scale(1.1)'; }; playAgainButton.onmouseout = function() { this.style.backgroundColor = '#ffd700'; this.style.transform = 'scale(1)'; }; playAgainButton.onclick = function() { // Stop current background music if it's playing if (currentBackgroundMusic) { currentBackgroundMusic.stop(); } victoryAchieved = false; location.reload(); }; victoryDiv.appendChild(victoryTitle); victoryDiv.appendChild(victoryMessage); victoryDiv.appendChild(playAgainButton); parentDiv.appendChild(victoryDiv); // Disable player controls but keep physics running keysPressed.w = false; keysPressed.a = false; keysPressed.s = false; keysPressed.d = false; keysPressed.space = false; // Let physics continue running for smooth landing characterBody.velocity.set(0, characterBody.velocity.y, 0); } loadingManager.onError = function(url) { console.error('Error loading:', url); }; // Game state tracking and audio let gameOver = false; let victoryAchieved = false; let currentBackgroundMusic = null; let firstJumpMade = false; // Freeze state tracking let platformFreezeTimer = 0; const platformFreezeInterval = 3; // 3 seconds between freezes let freezeDurationTimer = 0; const platformFreezeDuration = 10; // Changed to 10 seconds freeze duration let platformsFrozen = false; // Initialize the scene const scene = new THREE.Scene(); const world = new CANNON.World(); world.gravity.set(0, -20, 0); world.defaultContactMaterial.friction = 0.01; // Reduced global friction world.defaultContactMaterial.restitution = 0; // No bounce by default world.solver.iterations = 10; world.solver.tolerance = 0.001; function randomBetween(min, max) { return Math.random() * (max - min) + min; } // Define physics materials const groundPhysMaterial = new CANNON.Material('ground'); 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 // We will modify this to allow for sky color transitions let skyColor = new THREE.Color(0x87ceeb); // Initial sky color (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); // Setup mouse-controlled camera const controls = new OrbitControls(camera, renderer.domElement); controls.enableDamping = true; controls.dampingFactor = 0.05; controls.screenSpacePanning = false; controls.minPolarAngle = Math.PI * 0.2; controls.maxPolarAngle = Math.PI * 0.5; controls.minDistance = 10; controls.maxDistance = 15; controls.rotateSpeed = 1.0; controls.enableZoom = false; controls.enablePan = false; controls.autoRotate = false; controls.listenToKeyEvents = null; // Disable keyboard controls controls.enableKeys = false; // Disable keyboard controls (deprecated but included for compatibility) controls.touches = { ONE: THREE.TOUCH.ROTATE, TWO: THREE.TOUCH.NONE }; controls.target = new THREE.Vector3(0, 2, 0); controls.update(); // Create flat terrain function createTerrain() { const size = 20; // 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?lRkK'); const normalMap = textureLoader.load('https://play.rosebud.ai/assets/3D_playground_grass_normal.png?Sqgx'); texture.wrapS = texture.wrapT = THREE.RepeatWrapping; texture.repeat.set(2, 2); texture.encoding = THREE.sRGBEncoding; normalMap.wrapS = normalMap.wrapT = THREE.RepeatWrapping; normalMap.repeat.set(2, 2); 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.y = -6; // Lower the visual terrain terrain.receiveShadow = true; scene.add(terrain); const groundShape = new CANNON.Box(new CANNON.Vec3(size / 2, 0.1, size / 2)); const groundBody = new CANNON.Body({ mass: 0, material: groundPhysMaterial, }); groundBody.addShape(groundShape); groundBody.position.set(0, -0, 0); // Lower the physics ground to match visual terrain world.addBody(groundBody); return terrain; } // 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 isGrounded = false; let currentJumps = 0; let lastJumpTime = 0; let moveDirection = new THREE.Vector3(); let contactNormal = new CANNON.Vec3(); let upAxis = new CANNON.Vec3(0, 1, 0); let facingRight = true; // New variable to track facing direction const keysPressed = { w: false, a: false, s: false, d: false, space: false, }; // Character configuration const characterConfig = { // Movement settings groundSpeed: 10, airSpeed: 20, groundDamping: 0.1, airDamping: 0.1, acceleration: 20, turnSpeed: 8, jumpForce: 35, jumpCooldown: 0.1, maxJumps: 2, // Physics settings radius: 0.5, // Adjusted collision shape radius height: 8, // Adjusted height to match desired character height mass: 62, friction: 0.1, restitution: 0.0, linearDamping: 0.02, angularDamping: 0.9, // Visual settings scale: 1, // Adjust this value to scale the character mesh startHeight: 0, // Starting height of the character at ground level }; // Define physics materials for character const characterPhysMaterial = new CANNON.Material('character'); // Create contact material between character and ground const characterGroundContact = new CANNON.ContactMaterial( characterPhysMaterial, groundPhysMaterial, { friction: 0.01, restitution: 0.0, contactEquationStiffness: 1e8, contactEquationRelaxation: 3, } ); world.addContactMaterial(characterGroundContact); // Add keyboard event listeners let gameStarted = false; window.addEventListener('keydown', (event) => { if (!gameStarted) return; if (event.code === 'Space') { keysPressed.space = true; } else if (keysPressed.hasOwnProperty(event.key.toLowerCase())) { keysPressed[event.key.toLowerCase()] = true; } }); window.addEventListener('keyup', (event) => { if (event.code === 'Space') { keysPressed.space = false; } else if (keysPressed.hasOwnProperty(event.key.toLowerCase())) { keysPressed[event.key.toLowerCase()] = false; } }); // Load the character model const burgerUrl = 'https://play.rosebud.ai/assets/burger.glb?oqi3'; const krolUrl = 'https://play.rosebud.ai/assets/krol.glb?ApnD'; // Load the burger model first gltfLoader.load(burgerUrl, (burgerGltf) => { const characterMesh = burgerGltf.scene; // Set the scale to 10x10x10 characterMesh.scale.set(20, 10, 20); // Enable shadows for banan characterMesh.traverse((child) => { if (child.isMesh) { child.castShadow = true; child.receiveShadow = true; } }); // Load krol and attach it on top of banan gltfLoader.load(krolUrl, (krolGltf) => { const krolMesh = krolGltf.scene; // Scale krol appropriately krolMesh.scale.set(1, 2, 1); // Position krol on top of banan krolMesh.position.set(0, 0.7, 0); // Enable shadows for krol krolMesh.traverse((child) => { if (child.isMesh) { child.castShadow = true; child.receiveShadow = true; } }); // Add krol as a child of banan characterMesh.add(krolMesh); }); // Set initial position on platformNeg5 characterMesh.position.set(0, 5, -300); // Set initial position on platformNeg5 characterMesh.position.set(0, 5, -300); // 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 ); // No shapeOffset needed if the body position is set correctly characterBody.addShape(characterShape); characterBody.position.set(0, 5, -300); 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; } } }); character = characterMesh; scene.add(characterMesh); }); // 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(); camera.getWorldDirection(cameraForward); cameraForward.y = 0; cameraForward.normalize(); cameraRight.crossVectors(new THREE.Vector3(0, 1, 0), cameraForward).normalize(); // Calculate move direction relative to camera moveDirection.set(0, 0, 0); // Add movement input if (keysPressed.w) moveDirection.add(cameraForward); if (keysPressed.s) moveDirection.sub(cameraForward); if (keysPressed.a) moveDirection.add(cameraRight); if (keysPressed.d) moveDirection.sub(cameraRight); // Normalize movement direction if it exists if (moveDirection.length() > 0) { moveDirection.normalize(); } // Get current horizontal velocity const currentVelocity = new THREE.Vector2(characterBody.velocity.x, characterBody.velocity.z); // Different handling for ground vs air movement if (isGrounded) { // Ground movement if (moveDirection.length() > 0) { // Calculate target velocity const targetVelocity = new THREE.Vector2( moveDirection.x * characterConfig.groundSpeed, moveDirection.z * characterConfig.groundSpeed ); // Interpolate current velocity towards target currentVelocity.lerp(targetVelocity, characterConfig.acceleration * deltaTime); // Rotate character based on movement direction if (moveDirection.length() > 0) { const targetRotation = Math.atan2(moveDirection.x, moveDirection.z); const currentRotation = character.rotation.y; const rotationDiff = targetRotation - currentRotation; // Normalize the rotation difference const normalizedDiff = Math.atan2(Math.sin(rotationDiff), Math.cos(rotationDiff)); // Smoothly interpolate the rotation character.rotation.y += normalizedDiff * characterConfig.turnSpeed * deltaTime; } } 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) { const now = performance.now(); if (now - lastJumpTime > characterConfig.jumpCooldown * 1000) { if (isGrounded) { characterBody.velocity.y = characterConfig.jumpForce; currentJumps = 1; lastJumpTime = now; isGrounded = false; playJumpSound(); // Start background music on first jump if (!firstJumpMade) { firstJumpMade = true; if (audioContext.state === 'suspended') { audioContext.resume().then(() => { currentBackgroundMusic = playBackgroundMusic(); }); } else { currentBackgroundMusic = playBackgroundMusic(); } } } else if (currentJumps < characterConfig.maxJumps) { characterBody.velocity.y = characterConfig.jumpForce * 0.8; currentJumps++; lastJumpTime = now; playJumpSound(); } } } } // Update camera to follow the character function updateCamera() { if (!character) return; // Get character's position const characterPos = character.position.clone(); // Add height offset for better view const targetPosition = characterPos.clone().add(new THREE.Vector3(0, characterConfig.height * 0.7, 0)); // Calculate ideal camera position const cameraOffset = new THREE.Vector3(0, 5, 12); // Slightly above and behind character // Update OrbitControls target to follow character controls.target.lerp(targetPosition, 0.1); // Handle camera collisions const raycaster = new THREE.Raycaster(); const direction = new THREE.Vector3().subVectors(camera.position, controls.target).normalize(); raycaster.set(controls.target, direction); // Check for obstacles between camera and target const obstacles = scene.children.filter(obj => obj.isMesh && obj !== character); const intersects = raycaster.intersectObjects(obstacles); if (intersects.length > 0 && intersects[0].distance < cameraOffset.length()) { // Move camera closer to avoid clipping through obstacles const newDistance = Math.max(intersects[0].distance * 0.8, controls.minDistance); camera.position.copy(controls.target).add(direction.multiplyScalar(newDistance)); } // Update controls controls.update(); } // ========================= // End of Character Integration // ========================= // Create initial scene // Load and place obl above platform-5 gltfLoader.load('https://play.rosebud.ai/assets/obl.glb?bALL', (gltf) => { const obl = gltf.scene; obl.scale.set(80, 80, 80); obl.position.set(0, -6, -315); // Position above platform-5 (z=-300) // Enable shadows obl.traverse((child) => { if (child.isMesh) { child.castShadow = true; child.receiveShadow = true; } }); scene.add(obl); }); // Create platform-5 (first platform in sequence) function createPlatformNeg5() { const platformSize = 20; const geometry = new THREE.PlaneGeometry(platformSize, platformSize); const material = new THREE.MeshStandardMaterial({ color: 0x808080, roughness: 0.8, metalness: 0.2, visible: false }); const platform = new THREE.Mesh(geometry, material); platform.rotation.x = -Math.PI / 2; platform.position.set(0, 5, -300); // At z=-300 platform.receiveShadow = true; scene.add(platform); const platformShape = new CANNON.Box(new CANNON.Vec3(platformSize / 2, 0.1, platformSize / 2)); const platformBody = new CANNON.Body({ mass: 0, material: groundPhysMaterial }); platformBody.addShape(platformShape); platformBody.position.set(0, 5, -300); world.addBody(platformBody); return platform; } // Create platform-5 const platformNeg5 = createPlatformNeg5(); // Create platform-4 function createPlatformNeg4() { const platformSize = 20; const geometry = new THREE.PlaneGeometry(platformSize, platformSize); const material = new THREE.MeshStandardMaterial({ color: 0x808080, roughness: 0.8, metalness: 0.2, visible: false }); const platform = new THREE.Mesh(geometry, material); platform.rotation.x = -Math.PI / 2; platform.position.set(0, 5, -240); // At z=-240 platform.receiveShadow = true; scene.add(platform); const platformShape = new CANNON.Box(new CANNON.Vec3(platformSize / 2, 0.1, platformSize / 2)); const platformBody = new CANNON.Body({ mass: 0, material: groundPhysMaterial }); platformBody.addShape(platformShape); platformBody.position.set(0, 5, -240); world.addBody(platformBody); return platform; } // Create platform-4 with oscillation properties const platformNeg4 = createPlatformNeg4(); // Add oscillation properties to the platform platformNeg4.userData.originalX = 0; platformNeg4.userData.originalZ = -240; platformNeg4.userData.moveDirection = 3; platformNeg4.userData.moveTimer = 0; platformNeg4.userData.moveInterval = 4; platformNeg4.userData.moveSpeed = 4; platformNeg4.userData.moveRange = 30; // Store reference to physics body platformNeg4.userData.physicsBody = world.bodies.find(body => Math.abs(body.position.z - (-240)) < 1); // Load and place shok above platform-4 gltfLoader.load('https://play.rosebud.ai/assets/shok.glb?llEb', (gltf) => { const shok = gltf.scene; shok.scale.set(40, 40, 40); shok.position.set(0, 1, -255); // Position above platform-4 // Enable shadows shok.traverse((child) => { if (child.isMesh) { child.castShadow = true; child.receiveShadow = true; } }); scene.add(shok); }); // Create platform-3 function createPlatformNeg3() { const platformSize = 20; const geometry = new THREE.PlaneGeometry(platformSize, platformSize); const material = new THREE.MeshStandardMaterial({ color: 0x808080, roughness: 0.8, metalness: 0.2, visible: false }); const platform = new THREE.Mesh(geometry, material); platform.rotation.x = -Math.PI / 2; platform.position.set(0, 5, -180); // At z=-180 platform.receiveShadow = true; scene.add(platform); const platformShape = new CANNON.Box(new CANNON.Vec3(platformSize / 2, 0.1, platformSize / 2)); const platformBody = new CANNON.Body({ mass: 0, material: groundPhysMaterial }); platformBody.addShape(platformShape); platformBody.position.set(0, 5, -180); world.addBody(platformBody); return platform; } // Create platform-3 const platformNeg3 = createPlatformNeg3(); // Load and place arb above platform-3 gltfLoader.load('https://play.rosebud.ai/assets/arb.glb?uHHX', (gltf) => { const arb = gltf.scene; arb.scale.set(60, 60, 60); arb.position.set(0, 1, -195); // Position above platform-3 // Enable shadows arb.traverse((child) => { if (child.isMesh) { child.castShadow = true; child.receiveShadow = true; } }); scene.add(arb); }); // Create platform-2 function createPlatformNeg2() { const platformSize = 20; const geometry = new THREE.PlaneGeometry(platformSize, platformSize); const material = new THREE.MeshStandardMaterial({ color: 0x808080, roughness: 0.8, metalness: 0.2, visible: false }); const platform = new THREE.Mesh(geometry, material); platform.rotation.x = -Math.PI / 2; platform.position.set(0, 5, -120); // At z=-120 platform.receiveShadow = true; scene.add(platform); const platformShape = new CANNON.Box(new CANNON.Vec3(platformSize / 2, 0.1, platformSize / 2)); const platformBody = new CANNON.Body({ mass: 0, material: groundPhysMaterial }); platformBody.addShape(platformShape); platformBody.position.set(0, 5, -120); world.addBody(platformBody); return platform; } // Create platform-2 const platformNeg2 = createPlatformNeg2(); // Add oscillation properties to platformNeg2 platformNeg2.userData.originalX = 0; platformNeg2.userData.originalZ = -120; platformNeg2.userData.moveDirection = -3; platformNeg2.userData.moveTimer = 0; platformNeg2.userData.moveInterval = 4; platformNeg2.userData.moveSpeed = 4; platformNeg2.userData.moveRange = 30; // Store reference to physics body platformNeg2.userData.physicsBody = world.bodies.find(body => Math.abs(body.position.z - (-120)) < 1); // Load and place apple above platform-2 gltfLoader.load('https://play.rosebud.ai/assets/apple.glb?sOkb', (gltf) => { const apple = gltf.scene; apple.scale.set(60, 60, 60); apple.position.set(0, -9, -135); // Position above platform-2 // Enable shadows apple.traverse((child) => { if (child.isMesh) { child.castShadow = true; child.receiveShadow = true; } }); scene.add(apple); }); // Create platform-1 function createPlatformNeg1() { const platformSize = 20; const geometry = new THREE.PlaneGeometry(platformSize, platformSize); const material = new THREE.MeshStandardMaterial({ color: 0x808080, roughness: 0.8, metalness: 0.2, visible: false }); const platform = new THREE.Mesh(geometry, material); platform.rotation.x = -Math.PI / 2; platform.position.set(0, 5, -60); // At z=-60 platform.receiveShadow = true; scene.add(platform); const platformShape = new CANNON.Box(new CANNON.Vec3(platformSize / 2, 0.1, platformSize / 2)); const platformBody = new CANNON.Body({ mass: 0, material: groundPhysMaterial }); platformBody.addShape(platformShape); platformBody.position.set(0, 5, -60); world.addBody(platformBody); return platform; } // Create platform-1 const platformNeg1 = createPlatformNeg1(); // Load and place tort1 above platform-1 gltfLoader.load('https://play.rosebud.ai/assets/tort1.glb?9iwz', (gltf) => { const tort1 = gltf.scene; tort1.scale.set(60, 60, 60); tort1.position.set(0, 10, -75); // Position above platform-1 // Enable shadows tort1.traverse((child) => { if (child.isMesh) { child.castShadow = true; child.receiveShadow = true; } }); scene.add(tort1); }); // Create platform0 before platform1 function createPlatform0() { const platformSize = 20; // Create visual platform const geometry = new THREE.PlaneGeometry(platformSize, platformSize); const material = new THREE.MeshStandardMaterial({ color: 0x808080, roughness: 0.8, metalness: 0.2, visible: true, transparent: true, opacity: 0.3 }); const platform = new THREE.Mesh(geometry, material); platform.rotation.x = -Math.PI / 2; platform.position.set(0, 5, 0); // First platform at z=0 platform.receiveShadow = true; scene.add(platform); // Create physics body for platform const platformShape = new CANNON.Box(new CANNON.Vec3(platformSize / 2, 0.1, platformSize / 2)); const platformBody = new CANNON.Body({ mass: 0, // Static body material: groundPhysMaterial }); platformBody.addShape(platformShape); platformBody.position.set(0, 5, 0); // Match visual position world.addBody(platformBody); return platform; } // Create platform0 const platform0 = createPlatform0(); // Add oscillation properties to platform0 platform0.userData.originalX = 0; platform0.userData.originalZ = 0; platform0.userData.moveDirection = 3; platform0.userData.moveTimer = 0; platform0.userData.moveInterval = 4; platform0.userData.moveSpeed = 4; platform0.userData.moveRange = 30; // Store reference to physics body platform0.userData.physicsBody = world.bodies.find(body => Math.abs(body.position.z - 0) < 1); // Load and place cuc above platform0 gltfLoader.load('https://play.rosebud.ai/assets/cuc.glb?EYzV', (gltf) => { const cuc = gltf.scene; cuc.scale.set(60, 60, 60); cuc.position.set(0, 1, -15); // Position above platform0 // Enable shadows cuc.traverse((child) => { if (child.isMesh) { child.castShadow = true; child.receiveShadow = true; } }); scene.add(cuc); }); // Create solid platform function createPlatform() { const platformSize = 20; // Create visual platform const geometry = new THREE.PlaneGeometry(platformSize, platformSize); const material = new THREE.MeshStandardMaterial({ color: 0x808080, roughness: 0.8, metalness: 0.2, visible: false }); const platform = new THREE.Mesh(geometry, material); platform.rotation.x = -Math.PI / 2; platform.position.set(0, 5, 60); // First platform at z=60 platform.receiveShadow = true; scene.add(platform); // Create physics body for platform const platformShape = new CANNON.Box(new CANNON.Vec3(platformSize / 2, 0.1, platformSize / 2)); const platformBody = new CANNON.Body({ mass: 0, // Static body material: groundPhysMaterial }); platformBody.addShape(platformShape); platformBody.position.set(0, 5, 60); // Match visual position world.addBody(platformBody); return platform; } // Create the platform const platform = createPlatform(); // Load and place shees above platform1 gltfLoader.load('https://play.rosebud.ai/assets/shees.glb?MOVB', (gltf) => { const shees = gltf.scene; shees.scale.set(30, 30, 30); shees.position.set(0, -3, 50); // Position above platform1 // Enable shadows shees.traverse((child) => { if (child.isMesh) { child.castShadow = true; child.receiveShadow = true; } }); scene.add(shees); }); // Create second platform further ahead function createPlatform2() { const platformSize = 20; // Create visual platform const geometry = new THREE.PlaneGeometry(platformSize, platformSize); const material = new THREE.MeshStandardMaterial({ color: 0x808080, roughness: 0.8, metalness: 0.2, visible: false }); const platform = new THREE.Mesh(geometry, material); platform.rotation.x = -Math.PI / 2; platform.position.set(0, 5, 120); // Second platform at z=120 platform.receiveShadow = true; scene.add(platform); // Create physics body for platform const platformShape = new CANNON.Box(new CANNON.Vec3(platformSize / 2, 0.1, platformSize / 2)); const platformBody = new CANNON.Body({ mass: 0, // Static body material: groundPhysMaterial }); platformBody.addShape(platformShape); platformBody.position.set(0, 5, 120); // Match visual position world.addBody(platformBody); return platform; } // Create the second platform const platform2 = createPlatform2(); // ===================================== // // Create third platform even further ahead function createPlatform3() { const platformSize = 20; // Create visual platform const geometry = new THREE.PlaneGeometry(platformSize, platformSize); const material = new THREE.MeshStandardMaterial({ color: 0x808080, roughness: 0.8, metalness: 0.2, visible: false }); const platform = new THREE.Mesh(geometry, material); platform.rotation.x = -Math.PI / 2; platform.position.set(0, 5, 180); // Third platform at z=180 platform.receiveShadow = true; scene.add(platform); // Create physics body for platform const platformShape = new CANNON.Box(new CANNON.Vec3(platformSize / 2, 0.1, platformSize / 2)); const platformBody = new CANNON.Body({ mass: 0, // Static body material: groundPhysMaterial }); platformBody.addShape(platformShape); platformBody.position.set(0, 5, 180); // Match visual position world.addBody(platformBody); return platform; } // Create the third platform const platform3 = createPlatform3(); // Create the fourth platform (30 units after platform3, at z=120) function createPlatform4() { const platformSize = 20; // Create visual platform const geometry = new THREE.PlaneGeometry(platformSize, platformSize); const material = new THREE.MeshStandardMaterial({ color: 0x808080, roughness: 0.8, metalness: 0.2, visible: false }); const platform = new THREE.Mesh(geometry, material); platform.rotation.x = -Math.PI / 2; platform.position.set(0, 5, 240); // Fourth platform at z=240 platform.receiveShadow = true; scene.add(platform); // Create physics body for platform const platformShape = new CANNON.Box(new CANNON.Vec3(platformSize / 2, 0.1, platformSize / 2)); const platformBody = new CANNON.Body({ mass: 0, // Static body material: groundPhysMaterial }); platformBody.addShape(platformShape); platformBody.position.set(0, 5, 240); // Match visual position world.addBody(platformBody); return platform; } // Create the fourth platform const platform4 = createPlatform4(); // Add oscillation properties to platform4 platform4.userData.originalX = 0; platform4.userData.originalZ = 240; platform4.userData.moveDirection = -3; platform4.userData.moveTimer = 0; platform4.userData.moveInterval = 4; platform4.userData.moveSpeed = 4; platform4.userData.moveRange = 30; // Store reference to physics body platform4.userData.physicsBody = world.bodies.find(body => Math.abs(body.position.z - 240) < 1); // Load and place cruas above platform4 gltfLoader.load('https://play.rosebud.ai/assets/cruas.glb?TX4O', (gltf) => { const cruas = gltf.scene; cruas.scale.set(60, 60, 60); cruas.position.set(0, 0, 110); // Position above platform4 // Enable shadows cruas.traverse((child) => { if (child.isMesh) { child.castShadow = true; child.receiveShadow = true; } }); scene.add(cruas); }); // Create the fifth platform (30 units after platform4, at z=150) function createPlatform5() { const platformSize = 20; // Create visual platform const geometry = new THREE.PlaneGeometry(platformSize, platformSize); const material = new THREE.MeshStandardMaterial({ color: 0x808080, roughness: 0.8, metalness: 0.2, visible: false }); const platform = new THREE.Mesh(geometry, material); platform.rotation.x = -Math.PI / 2; platform.position.set(0, 5, 300); // Fifth platform at z=300 platform.receiveShadow = true; scene.add(platform); // Create physics body for platform const platformShape = new CANNON.Box(new CANNON.Vec3(platformSize / 2, 0.1, platformSize / 2)); const platformBody = new CANNON.Body({ mass: 0, // Static body material: groundPhysMaterial }); platformBody.addShape(platformShape); platformBody.position.set(0, 5, 300); // Match visual position world.addBody(platformBody); return platform; } // Create the fifth platform const platform5 = createPlatform5(); // Create the sixth platform (30 units after platform5, at z=180) function createPlatform6() { const platformSize = 20; // Create visual platform const geometry = new THREE.PlaneGeometry(platformSize, platformSize); const material = new THREE.MeshStandardMaterial({ color: 0x808080, roughness: 0.8, metalness: 0.2, visible: false }); const platform = new THREE.Mesh(geometry, material); platform.rotation.x = -Math.PI / 2; platform.position.set(0, 5, 360); // Sixth platform at z=360 platform.receiveShadow = true; scene.add(platform); // Create physics body for platform const platformShape = new CANNON.Box(new CANNON.Vec3(platformSize / 2, 0.1, platformSize / 2)); const platformBody = new CANNON.Body({ mass: 0, // Static body material: groundPhysMaterial }); platformBody.addShape(platformShape); platformBody.position.set(0, 5, 360); // Match visual position world.addBody(platformBody); return platform; } // Create the sixth platform const platform6 = createPlatform6(); // Add oscillation properties to platform6 platform6.userData.originalX = 0; platform6.userData.originalZ = 360; platform6.userData.moveDirection = 3; platform6.userData.moveTimer = 0; platform6.userData.moveInterval = 4; platform6.userData.moveSpeed = 4; platform6.userData.moveRange = 30; // Store reference to physics body platform6.userData.physicsBody = world.bodies.find(body => Math.abs(body.position.z - 360) < 1); // Create the seventh platform (30 units after platform6, at z=210) function createPlatform7() { const platformSize = 20; // Create visual platform const geometry = new THREE.PlaneGeometry(platformSize, platformSize); const material = new THREE.MeshStandardMaterial({ color: 0x808080, roughness: 0.8, metalness: 0.2, visible: false }); const platform = new THREE.Mesh(geometry, material); platform.rotation.x = -Math.PI / 2; platform.position.set(0, 5, 420); // Seventh platform at z=420 platform.receiveShadow = true; scene.add(platform); // Create physics body for platform const platformShape = new CANNON.Box(new CANNON.Vec3(platformSize / 2, 0.1, platformSize / 2)); const platformBody = new CANNON.Body({ mass: 0, // Static body material: groundPhysMaterial }); platformBody.addShape(platformShape); platformBody.position.set(0, 5, 420); // Match visual position world.addBody(platformBody); return platform; } // Create the seventh platform const platform7 = createPlatform7(); // Add oscillation properties to platform7 platform7.userData.originalX = 0; platform7.userData.originalZ = 420; platform7.userData.moveDirection = -3; platform7.userData.moveTimer = 0; platform7.userData.moveInterval = 4; platform7.userData.moveSpeed = 4; platform7.userData.moveRange = 30; // Store reference to physics body platform7.userData.physicsBody = world.bodies.find(body => Math.abs(body.position.z - 420) < 1); // Create the eighth platform (30 units after platform7, at z=240) function createPlatform8() { const platformSize = 20; // Create visual platform const geometry = new THREE.PlaneGeometry(platformSize, platformSize); const material = new THREE.MeshStandardMaterial({ color: 0x808080, roughness: 0.8, metalness: 0.2, visible: false }); const platform = new THREE.Mesh(geometry, material); platform.rotation.x = -Math.PI / 2; platform.position.set(0, 5, 480); // Eighth platform at z=480 platform.receiveShadow = true; scene.add(platform); // Create physics body for platform const platformShape = new CANNON.Box(new CANNON.Vec3(platformSize / 2, 0.1, platformSize / 2)); const platformBody = new CANNON.Body({ mass: 0, // Static body material: groundPhysMaterial }); platformBody.addShape(platformShape); platformBody.position.set(0, 5, 480); // Match visual position world.addBody(platformBody); return platform; } // Create the eighth platform const platform8 = createPlatform8(); // Add oscillation properties to platform8 platform8.userData.originalX = 0; platform8.userData.originalZ = 480; platform8.userData.moveDirection = -3; platform8.userData.moveTimer = 0; platform8.userData.moveInterval = 4; platform8.userData.moveSpeed = 4; platform8.userData.moveRange = 30; // Store reference to physics body platform8.userData.physicsBody = world.bodies.find(body => Math.abs(body.position.z - 480) < 1); // Load and place mor above platform8 gltfLoader.load('https://play.rosebud.ai/assets/mor.glb?eN7m', (gltf) => { const mor = gltf.scene; mor.scale.set(80, 40, 80); mor.position.set(0, -5, 520); // Position above platform8 // Enable shadows mor.traverse((child) => { if (child.isMesh) { child.castShadow = true; child.receiveShadow = true; } }); scene.add(mor); }); // Create goal position using cup model function createGoalPosition() { let cupModel; // Load the cup model gltfLoader.load('https://play.rosebud.ai/assets/cup.glb?PW76', (gltf) => { cupModel = gltf.scene; cupModel.scale.set(30, 40, 30); cupModel.position.set(0, 30, 600); // Moved to final platform position cupModel.userData.rotationSpeed = 0.2; // Slower rotation speed for smoother animation cupModel.userData.rotationAxis = new THREE.Vector3(0, 1, 0); // Rotate around Y-axis cupModel.userData.initialY = cupModel.position.y; // Store initial Y position cupModel.userData.floatSpeed = 0.8; // Faster float speed cupModel.userData.floatHeight = 2; // Larger float height cupModel.userData.initialY = cupModel.position.y; cupModel.userData.floatSpeed = 0.5; cupModel.userData.floatHeight = 1; // Enable shadows cupModel.traverse((child) => { if (child.isMesh) { child.castShadow = true; child.receiveShadow = true; } }); scene.add(cupModel); }); return { cupModel }; } // Create the goal position const goalPosition = createGoalPosition(); // Create victory platform (final platform) function createVictoryPlatform() { const platformSize = 30; // Larger platform for victory // Create visual platform with special material const geometry = new THREE.PlaneGeometry(platformSize, platformSize); const material = new THREE.MeshStandardMaterial({ color: 0xffd700, // Gold color for victory platform roughness: 0.3, metalness: 0.8 }); const platform = new THREE.Mesh(geometry, material); platform.rotation.x = -Math.PI / 2; platform.position.set(0, 5, 600); // Final victory platform position platform.receiveShadow = true; scene.add(platform); // Create physics body for platform const platformShape = new CANNON.Box(new CANNON.Vec3(platformSize / 2, 0.1, platformSize / 2)); const platformBody = new CANNON.Body({ mass: 0, material: groundPhysMaterial }); platformBody.addShape(platformShape); platformBody.position.set(0, 5, 600); world.addBody(platformBody); return platform; } // Create the victory platform const victoryPlatform = createVictoryPlatform(); // Create the ninth platform (30 units after platform8, at z=270) function createPlatform9() { const platformSize = 20; // Create visual platform const geometry = new THREE.PlaneGeometry(platformSize, platformSize); const material = new THREE.MeshStandardMaterial({ color: 0x808080, roughness: 0.8, metalness: 0.2, visible: false }); const platform = new THREE.Mesh(geometry, material); platform.rotation.x = -Math.PI / 2; platform.position.set(0, 5, 540); // Ninth platform at z=540 platform.receiveShadow = true; scene.add(platform); // Create physics body for platform const platformShape = new CANNON.Box(new CANNON.Vec3(platformSize / 2, 0.1, platformSize / 2)); const platformBody = new CANNON.Body({ mass: 0, // Static body material: groundPhysMaterial }); platformBody.addShape(platformShape); platformBody.position.set(0, 5, 540); // Match visual position world.addBody(platformBody); return platform; } // Create the ninth platform const platform9 = createPlatform9(); // Add oscillation properties to platform9 platform9.userData.originalX = 0; platform9.userData.originalZ = 540; platform9.userData.moveDirection = -3; platform9.userData.moveTimer = 0; platform9.userData.moveInterval = 4; platform9.userData.moveSpeed = 4; platform9.userData.moveRange = 30; // Store reference to physics body platform9.userData.physicsBody = world.bodies.find(body => Math.abs(body.position.z - 540) < 1); // Create the tenth platform (30 units after platform9, at z=300) // Load and place banan above platform5 gltfLoader.load('https://play.rosebud.ai/assets/banan.glb?rcoO', (gltf) => { const banan = gltf.scene; banan.scale.set(60, 60, 60); banan.position.set(0, 0, 170); // Position above platform5 // Enable shadows banan.traverse((child) => { if (child.isMesh) { child.castShadow = true; child.receiveShadow = true; } }); scene.add(banan); }); // Load and place pon above platform6 gltfLoader.load('https://play.rosebud.ai/assets/pon.glb?Bjw1', (gltf) => { const pon = gltf.scene; pon.scale.set(60, 60, 60); pon.position.set(0, 1, 225); // Position above platform6 // Enable shadows pon.traverse((child) => { if (child.isMesh) { child.castShadow = true; child.receiveShadow = true; } }); scene.add(pon); }); // Load and place klub above platform7 gltfLoader.load('https://play.rosebud.ai/assets/klub.glb?H3QM', (gltf) => { const klub = gltf.scene; klub.scale.set(60, 60, 60); klub.position.set(-2, -3, 285); // Position above platform7 // Enable shadows klub.traverse((child) => { if (child.isMesh) { child.castShadow = true; child.receiveShadow = true; } }); scene.add(klub); }); // Load and place led above platform8 gltfLoader.load('https://play.rosebud.ai/assets/led.glb?NNfu', (gltf) => { const led = gltf.scene; led.scale.set(80, 40, 80); led.position.set(0, 4, 450); // Enable shadows led.traverse((child) => { if (child.isMesh) { child.castShadow = true; child.receiveShadow = true; } }); scene.add(led); }); // Load and place keks above platform9 gltfLoader.load('https://play.rosebud.ai/assets/keks.glb?V8yZ', (gltf) => { const keks = gltf.scene; keks.scale.set(60, 60, 60); keks.position.set(0, 0, 345); // Position above platform9 // Enable shadows keks.traverse((child) => { if (child.isMesh) { child.castShadow = true; child.receiveShadow = true; } }); scene.add(keks); }); // Create platform above keks function createPlatformAboveKeks() { const platformSize = 60; // 3x3 platform (20 * 3) const geometry = new THREE.PlaneGeometry(platformSize, platformSize); const material = new THREE.MeshStandardMaterial({ color: 0x808080, roughness: 0.8, metalness: 0.2, visible: false }); const platform = new THREE.Mesh(geometry, material); platform.rotation.x = -Math.PI / 2; platform.position.set(0, 5, 400); platform.receiveShadow = true; scene.add(platform); const platformShape = new CANNON.Box(new CANNON.Vec3(platformSize / 2, 0.1, platformSize / 2)); const platformBody = new CANNON.Body({ mass: 0, material: groundPhysMaterial }); platformBody.addShape(platformShape); platformBody.position.set(0, 5, 400); world.addBody(platformBody); return platform; } // Create the platform above keks const platformAboveKeks = createPlatformAboveKeks(); // Create platform above piz function createPlatformAbovePiz() { const platformSize = 60; // 3x3 platform (20 * 3) const geometry = new THREE.PlaneGeometry(platformSize, platformSize); const material = new THREE.MeshStandardMaterial({ color: 0x808080, roughness: 0.8, metalness: 0.2, visible: false }); const platform = new THREE.Mesh(geometry, material); platform.rotation.x = -Math.PI / 2; platform.position.set(5, 8, 403); platform.receiveShadow = true; scene.add(platform); const platformShape = new CANNON.Box(new CANNON.Vec3(platformSize / 2, 0.1, platformSize / 2)); const platformBody = new CANNON.Body({ mass: 0, material: groundPhysMaterial }); platformBody.addShape(platformShape); platformBody.position.set(5, 8, 403); world.addBody(platformBody); return platform; } // Create the platform above piz const platformAbovePiz = createPlatformAbovePiz(); // Load and place piz above platform10 gltfLoader.load('https://play.rosebud.ai/assets/piz.glb?dsnp', (gltf) => { const piz = gltf.scene; piz.scale.set(80, 60, 80); // Adjusted scale for better proportion piz.position.set(5, 5, 400); // Moved 5 units to the right on platform10 // Enable shadows piz.traverse((child) => { if (child.isMesh) { child.castShadow = true; child.receiveShadow = true; } }); scene.add(piz); }); // ===================================== function createRainbow() { const rainbowRadius = 120; // 24 * 5 = 120 for much larger radius const rainbowTube = 8; // 3 * 5 = 15 for thicker tube const radialSegments = 32; const tubularSegments = 100; const arc = Math.PI * 2; // Full circle const rainbowGeometry = new THREE.TorusGeometry(rainbowRadius, rainbowTube, radialSegments, tubularSegments, arc); // Create a custom shader material to create a rainbow gradient const rainbowMaterial = new THREE.ShaderMaterial({ uniforms: {}, vertexShader: ` varying vec2 vUv; void main() { vUv = uv; gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 ); } `, fragmentShader: ` varying vec2 vUv; void main() { float hue = vUv.x; vec3 color = vec3(1.0); color = vec3( sin(6.28318 * (hue + 0.0)), sin(6.28318 * (hue + 0.3333)), sin(6.28318 * (hue + 0.6666)) ); gl_FragColor = vec4(color, 1.0); } `, side: THREE.DoubleSide, }); const rainbow = new THREE.Mesh(rainbowGeometry, rainbowMaterial); // Position rainbow vertically over platform with led rainbow.position.set(0, 60, 450); // x=0 (centered), y=60 (high above), z=450 (matching led's position) rainbow.rotation.x = 0; // No rotation on X to keep it vertical rainbow.rotation.y = 0; // No rotation on Y rainbow.rotation.z = 0; // No rotation on Z rainbow.scale.set(1, 1, 1); // 0.8 * 5 = 4 for much larger scale // Add animation data to the rainbow object rainbow.userData.originalY = 10; rainbow.userData.amplitude = 2; // How much it moves up and down rainbow.userData.frequency = 0.5; // Speed of up/down movement scene.add(rainbow); return rainbow; // Return the rainbow object so we can animate it } createRainbow(); // Collection of collectible positions const collectiblePositions = [{ x: 10, y: 1, z: 10 }, { x: -10, y: 1, z: -10 }, { x: -10, y: 1, z: 10 }, { x: 10, y: 1, z: -10 }, { x: 0, y: 1, z: 15 }]; // Array to store collectible objects const collectibles = []; // Function to create collectible bananas function createCollectibles() { const collectibleUrl = 'https://play.rosebud.ai/assets/banan.glb?QlNq'; collectiblePositions.forEach(position => { gltfLoader.load(collectibleUrl, (gltf) => { const collectible = gltf.scene; // Scale the collectible appropriately collectible.scale.set(5, 5, 5); // Position the collectible collectible.position.set(position.x, position.y, position.z); // Add subtle rotation animation collectible.userData.rotationSpeed = 1; collectible.userData.floatSpeed = 0.5; collectible.userData.floatHeight = 0.5; collectible.userData.initialY = position.y; scene.add(collectible); collectibles.push(collectible); }); }); } // Create initial collectibles createCollectibles(); // ===================================== // Sky Color Transition Implementation // ===================================== // Define pastel rainbow colors in linear space const pastelRainbowColors = [ new THREE.Color(0xffc0cb).convertSRGBToLinear(), // Pink (Red) new THREE.Color(0xffd580).convertSRGBToLinear(), // Light Orange new THREE.Color(0xffffcc).convertSRGBToLinear(), // Light Yellow new THREE.Color(0xccffcc).convertSRGBToLinear(), // Light Green new THREE.Color(0xccffff).convertSRGBToLinear(), // Light Blue new THREE.Color(0xd1c4e9).convertSRGBToLinear(), // Lavender (Indigo) new THREE.Color(0xeccfff).convertSRGBToLinear(), // Light Violet ]; let skyColorIndex = 0; let skyTransitionTimer = 0; const skyTransitionInterval = 3; // Every 3 seconds function updateSkyColor(deltaTime) { skyTransitionTimer += deltaTime; if (skyTransitionTimer >= skyTransitionInterval) { skyTransitionTimer = 0; skyColorIndex = (skyColorIndex + 1) % pastelRainbowColors.length; } const nextColorIndex = (skyColorIndex + 1) % pastelRainbowColors.length; const t = skyTransitionTimer / skyTransitionInterval; const currentColor = pastelRainbowColors[skyColorIndex]; const nextColor = pastelRainbowColors[nextColorIndex]; // Interpolate in linear space const interpolatedColor = currentColor.clone().lerp(nextColor, t); // Update sky material uniforms (expects linear colors) uniforms.topColor.value.copy(interpolatedColor); // Convert to sRGB for lights const sRGBColor = interpolatedColor.clone().convertLinearToSRGB(); sunLight.color.copy(sRGBColor); hemiLight.color.copy(sRGBColor); } // ===================================== function animate() { requestAnimationFrame(animate); const deltaTime = Math.min(clock.getDelta(), 0.1); // Animate rainbow const rainbow = scene.getObjectByProperty('userData', { originalY: 10 }); if (rainbow) { // Make rainbow float up and down rainbow.position.y = rainbow.userData.originalY + Math.sin(performance.now() * 0.001 * rainbow.userData.frequency) * rainbow.userData.amplitude; } if (assetsLoaded) { // Handle platform-4 movement and platform-2 movement if (platformNeg4 && !platformsFrozen) { platformNeg4.userData.moveTimer += deltaTime; if (platformNeg4.userData.moveTimer >= platformNeg4.userData.moveInterval) { platformNeg4.userData.moveTimer = 0; platformNeg4.userData.moveDirection *= -1; // Reverse direction } // Calculate new horizontal position const moveAmount = platformNeg4.userData.moveSpeed * deltaTime * platformNeg4.userData.moveDirection; const newX = platformNeg4.position.x + moveAmount; // Check if within range if (Math.abs(newX - platformNeg4.userData.originalX) <= platformNeg4.userData.moveRange) { // Move visual platform horizontally only platformNeg4.position.x = newX; // Move physics body horizontally only if (platformNeg4.userData.physicsBody) { platformNeg4.userData.physicsBody.position.x = newX; } // Move associated shok model horizontally only scene.traverse((object) => { if (Math.abs(object.position.z - (-255)) < 1) { // This is the shok's approximate z-position object.position.x = newX; } }); } } // Handle platformNeg2 movement if (platformNeg2 && !platformsFrozen) { platformNeg2.userData.moveTimer += deltaTime; if (platformNeg2.userData.moveTimer >= platformNeg2.userData.moveInterval) { platformNeg2.userData.moveTimer = 0; platformNeg2.userData.moveDirection *= -1; // Reverse direction } // Calculate new horizontal position const moveAmount = platformNeg2.userData.moveSpeed * deltaTime * platformNeg2.userData.moveDirection; const newX = platformNeg2.position.x + moveAmount; // Check if within range if (Math.abs(newX - platformNeg2.userData.originalX) <= platformNeg2.userData.moveRange) { // Move visual platform horizontally only platformNeg2.position.x = newX; // Move physics body horizontally only if (platformNeg2.userData.physicsBody) { platformNeg2.userData.physicsBody.position.x = newX; } // Move associated apple model horizontally only scene.traverse((object) => { if (Math.abs(object.position.z - (-135)) < 1) { // This is the apple's approximate z-position object.position.x = newX; } }); } } // Handle platform0 movement if (platform0 && !platformsFrozen) { platform0.userData.moveTimer += deltaTime; if (platform0.userData.moveTimer >= platform0.userData.moveInterval) { platform0.userData.moveTimer = 0; platform0.userData.moveDirection *= -1; // Reverse direction } // Calculate new horizontal position const moveAmount = platform0.userData.moveSpeed * deltaTime * platform0.userData.moveDirection; const newX = platform0.position.x + moveAmount; // Check if within range if (Math.abs(newX - platform0.userData.originalX) <= platform0.userData.moveRange) { // Move visual platform horizontally only platform0.position.x = newX; // Move physics body horizontally only if (platform0.userData.physicsBody) { platform0.userData.physicsBody.position.x = newX; } // Move associated cuc model horizontally only scene.traverse((object) => { if (Math.abs(object.position.z - (-15)) < 1) { // This is the cuc's approximate z-position object.position.x = newX; } }); } } // Handle platform4 movement if (platform4 && !platformsFrozen) { platform4.userData.moveTimer += deltaTime; if (platform4.userData.moveTimer >= platform4.userData.moveInterval) { platform4.userData.moveTimer = 0; platform4.userData.moveDirection *= -1; // Reverse direction } // Calculate new horizontal position const moveAmount = platform4.userData.moveSpeed * deltaTime * platform4.userData.moveDirection; const newX = platform4.position.x + moveAmount; // Check if within range if (Math.abs(newX - platform4.userData.originalX) <= platform4.userData.moveRange) { // Move visual platform horizontally only platform4.position.x = newX; // Move physics body horizontally only if (platform4.userData.physicsBody) { platform4.userData.physicsBody.position.x = newX; } // Move associated cruas model horizontally only scene.traverse((object) => { if (Math.abs(object.position.z - 110) < 1) { // This is the cruas's approximate z-position object.position.x = newX; } }); } } // Handle platform6 movement if (platform6 && !platformsFrozen) { platform6.userData.moveTimer += deltaTime; if (platform6.userData.moveTimer >= platform6.userData.moveInterval) { platform6.userData.moveTimer = 0; platform6.userData.moveDirection *= -1; // Reverse direction } // Calculate new horizontal position const moveAmount = platform6.userData.moveSpeed * deltaTime * platform6.userData.moveDirection; const newX = platform6.position.x + moveAmount; // Check if within range if (Math.abs(newX - platform6.userData.originalX) <= platform6.userData.moveRange) { // Move visual platform horizontally only platform6.position.x = newX; // Move physics body horizontally only if (platform6.userData.physicsBody) { platform6.userData.physicsBody.position.x = newX; } // Move associated pon model horizontally only scene.traverse((object) => { if (Math.abs(object.position.z - 225) < 1) { // This is the pon's approximate z-position object.position.x = newX; } }); } } // Handle platform8 movement if (platform8 && !platformsFrozen) { platform8.userData.moveTimer += deltaTime; if (platform8.userData.moveTimer >= platform8.userData.moveInterval) { platform8.userData.moveTimer = 0; platform8.userData.moveDirection *= -1; // Reverse direction } // Calculate new horizontal position const moveAmount = platform8.userData.moveSpeed * deltaTime * platform8.userData.moveDirection; const newX = platform8.position.x + moveAmount; // Check if within range if (Math.abs(newX - platform8.userData.originalX) <= platform8.userData.moveRange) { // Move visual platform horizontally only platform8.position.x = newX; // Move physics body horizontally only if (platform8.userData.physicsBody) { platform8.userData.physicsBody.position.x = newX; } // Move associated mor model horizontally only scene.traverse((object) => { if (Math.abs(object.position.z - 520) < 1) { // This is the mor's approximate z-position object.position.x = newX; } }); } } // Handle platform9 movement if (platform9 && !platformsFrozen) { platform9.userData.moveTimer += deltaTime; if (platform9.userData.moveTimer >= platform9.userData.moveInterval) { platform9.userData.moveTimer = 0; platform9.userData.moveDirection *= -1; // Reverse direction } // Calculate new horizontal position const moveAmount = platform9.userData.moveSpeed * deltaTime * platform9.userData.moveDirection; const newX = platform9.position.x + moveAmount; // Check if within range if (Math.abs(newX - platform9.userData.originalX) <= platform9.userData.moveRange) { // Move visual platform horizontally only platform9.position.x = newX; // Move physics body horizontally only if (platform9.userData.physicsBody) { platform9.userData.physicsBody.position.x = newX; } // Move associated keks model horizontally only scene.traverse((object) => { if (Math.abs(object.position.z - 345) < 1) { // This is the keks's approximate z-position object.position.x = newX; } }); } } // Handle platform7 movement if (platform7 && !platformsFrozen) { platform7.userData.moveTimer += deltaTime; if (platform7.userData.moveTimer >= platform7.userData.moveInterval) { platform7.userData.moveTimer = 0; platform7.userData.moveDirection *= -1; // Reverse direction } // Calculate new horizontal position const moveAmount = platform7.userData.moveSpeed * deltaTime * platform7.userData.moveDirection; const newX = platform7.position.x + moveAmount; // Check if within range if (Math.abs(newX - platform7.userData.originalX) <= platform7.userData.moveRange) { // Move visual platform horizontally only platform7.position.x = newX; // Move physics body horizontally only if (platform7.userData.physicsBody) { platform7.userData.physicsBody.position.x = newX; } // Move associated led model horizontally only scene.traverse((object) => { if (Math.abs(object.position.z - 450) < 1) { // This is the led's approximate z-position object.position.x = newX; } }); } } world.step(deltaTime); world.step(deltaTime); // Handle platform freeze mechanics if (!platformsFrozen) { platformFreezeTimer += deltaTime; if (platformFreezeTimer >= platformFreezeInterval) { platformsFrozen = true; platformFreezeTimer = 0; freezeDurationTimer = 0; // Make all platforms visible and cyan when frozen scene.traverse((object) => { if (object.isMesh && object.material.transparent) { object.material.color.setHex(0x00ffff); object.material.opacity = 0.6; } }); } } else { freezeDurationTimer += deltaTime; if (freezeDurationTimer >= platformFreezeDuration) { platformsFrozen = false; // Return platforms to original state scene.traverse((object) => { if (object.isMesh && object.material.transparent) { object.material.color.setHex(0x808080); object.material.opacity = 0.3; } }); } } // Animate goal position (cup) - separated from victory logic scene.traverse((object) => { if (object.userData && object.userData.rotationSpeed === 0.2) { // Apply smooth rotation around Y-axis const rotationAngle = object.userData.rotationSpeed * deltaTime; object.rotateOnAxis(object.userData.rotationAxis, rotationAngle); // Add floating motion const floatOffset = Math.sin(performance.now() * 0.001 * object.userData.floatSpeed) * object.userData.floatHeight; object.position.y = object.userData.initialY + floatOffset; } }); // Animate collectibles collectibles.forEach(collectible => { // Rotate the collectible collectible.rotation.y += collectible.userData.rotationSpeed * deltaTime; // Float up and down const floatOffset = Math.sin(performance.now() * 0.001 * collectible.userData.floatSpeed) * collectible.userData.floatHeight; collectible.position.y = collectible.userData.initialY + floatOffset; // Check for collection if character is close enough if (character && character.position.distanceTo(collectible.position) < 2) { // Remove the collected collectible scene.remove(collectible); collectibles.splice(collectibles.indexOf(collectible), 1); // TODO: Add collection effects or scoring here } }); 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); // Update character rotation based on movement direction if (moveDirection.length() > 0) { const angle = Math.atan2(moveDirection.x, moveDirection.z); character.rotation.y = angle; } } // Check for fall detection and game restart if (character && characterBody && !gameOver) { // Check if character is below platforms if (characterBody.position.y < -10) { gameOver = true; showLossScreen(); } } // Check for victory condition - separate dedicated function if (character && characterBody) { const isInVictoryZone = ( Math.abs(character.position.x) < 15 && // Within platform width Math.abs(character.position.z - 600) < 15 // Near victory platform (z=600) ); const isJumpingUp = characterBody.velocity.y > 0; // Victory requires: in the zone, not grounded, and jumping up if (isInVictoryZone && !isGrounded && isJumpingUp && !victoryAchieved && !gameOver) { victoryAchieved = true; playWinSound(); showVictoryScreen(); // Don't stop physics simulation, let character land naturally } } // Update the sky color updateSkyColor(deltaTime); // No need to call controls.update() here as it's called in updateCamera() } 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); // Add mouse move handler let lastMouseX = 0; let lastMouseY = 0; const mouseSensitivity = 0.002; renderer.domElement.addEventListener('mousemove', (event) => { if (!gameStarted) return; const movementX = event.clientX - lastMouseX; const movementY = event.clientY - lastMouseY; // Update the camera's azimuthal and polar angles controls.getAzimuthalAngle() - movementX * mouseSensitivity; const polarAngle = controls.getPolarAngle() + movementY * mouseSensitivity; // Clamp the polar angle to avoid over-rotation const minPolarAngle = controls.minPolarAngle; const maxPolarAngle = controls.maxPolarAngle; const clampedPolarAngle = Math.max(minPolarAngle, Math.min(maxPolarAngle, polarAngle)); // Apply the rotation controls.target.sub(camera.position); controls.target.applyAxisAngle(new THREE.Vector3(0, 1, 0), -movementX * mouseSensitivity); controls.target.add(camera.position); lastMouseX = event.clientX; lastMouseY = event.clientY; // Force an update of the camera controls.update(); }); renderer.domElement.addEventListener('mouseenter', (event) => { lastMouseX = event.clientX; lastMouseY = event.clientY; }); // Start animation animate();