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?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'; displayNarrativeIntroduction(); }; function displayNarrativeIntroduction() { const narrativeText = ` Your journey begins as the sun rises over the vibrant city. You are a stock speculator looking for profitable investment opportunities hidden in the cityscape. Today, you discover a rare "elf" investment event at your local park that promises high returns, but comes with significant risks. That's when a surprise government announcement flooded the market, changing the financial landscape. It's time to decide your strategy. As the sun hits the park, you, the stock speculator, discover a rare investment opportunity: a tech startup booth nestled among the trees. Suddenly, a notification rings on your phone—unexpected government funds are being distributed, causing stock prices to skyrocket! The atmosphere is electric, with traders buzzing and buying and selling frantically. Do you dive in or play it safe? Your choices may bring fortune or disaster. `; const narrativeDiv = document.createElement('div'); narrativeDiv.style.position = 'absolute'; narrativeDiv.style.top = '50%'; narrativeDiv.style.left = '50%'; narrativeDiv.style.transform = 'translate(-50%, -50%)'; narrativeDiv.style.backgroundColor = 'rgba(0, 0, 0, 0.8)'; narrativeDiv.style.color = 'white'; narrativeDiv.style.padding = '20px'; narrativeDiv.style.borderRadius = '10px'; narrativeDiv.style.maxWidth = '600px'; narrativeDiv.style.textAlign = 'center'; narrativeDiv.style.fontFamily = 'Arial, sans-serif'; narrativeDiv.style.zIndex = '1000'; narrativeDiv.innerHTML = narrativeText.replace(/\n/g, '
'); const closeButton = document.createElement('button'); closeButton.textContent = 'Start Your Journey'; closeButton.style.marginTop = '20px'; closeButton.style.padding = '10px 20px'; closeButton.style.fontSize = '16px'; closeButton.style.cursor = 'pointer'; closeButton.onclick = function() { parentDiv.removeChild(narrativeDiv); }; narrativeDiv.appendChild(closeButton); parentDiv.appendChild(narrativeDiv); } function showVictoryScreen() { 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 = '🏆 VICTORY! 🏆'; 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 = ` Incredible jump! You've conquered the golden platform and claimed your victory!

Your perfect timing and precise control have led you to this moment of triumph.

The majestic cup awaits above, a testament to your mastery of the challenge! `; victoryMessage.style.fontSize = '20px'; victoryMessage.style.lineHeight = '1.6'; victoryMessage.style.marginBottom = '30px'; const playAgainButton = document.createElement('button'); playAgainButton.textContent = 'Play Again'; 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() { location.reload(); }; victoryDiv.appendChild(victoryTitle); victoryDiv.appendChild(victoryMessage); victoryDiv.appendChild(playAgainButton); parentDiv.appendChild(victoryDiv); // Prevent further character movement keysPressed.w = false; keysPressed.a = false; keysPressed.s = false; keysPressed.d = false; keysPressed.space = false; } loadingManager.onError = function(url) { console.error('Error loading:', url); }; // Initialize the scene const scene = new THREE.Scene(); const world = new CANNON.World(); world.gravity.set(0, -20, 0); world.defaultContactMaterial.friction = 0.01; // Reduced global friction world.defaultContactMaterial.restitution = 0; // No bounce by default world.solver.iterations = 10; world.solver.tolerance = 0.001; function randomBetween(min, max) { return Math.random() * (max - min) + min; } // Define physics materials const groundPhysMaterial = new CANNON.Material('ground'); 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); // Modify OrbitControls setup const controls = new OrbitControls(camera, renderer.domElement); controls.enableDamping = true; controls.dampingFactor = 0.05; controls.screenSpacePanning = false; controls.minPolarAngle = cameraSettings.minPolarAngle; controls.maxPolarAngle = cameraSettings.maxPolarAngle; controls.minDistance = cameraSettings.minDistance; controls.maxDistance = cameraSettings.maxDistance; controls.target = new THREE.Vector3(0, 2, 0); // Create flat terrain function createTerrain() { const size = 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: 30, airSpeed: 25, groundDamping: 0.1, airDamping: 0.1, acceleration: 20, turnSpeed: 8, jumpForce: 20, jumpCooldown: 0.1, maxJumps: 1, // 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 window.addEventListener('keydown', (event) => { 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 && isGrounded && currentJumps < characterConfig.maxJumps) { const now = performance.now(); if (now - lastJumpTime > characterConfig.jumpCooldown * 1000) { characterBody.velocity.y = characterConfig.jumpForce; currentJumps++; lastJumpTime = now; isGrounded = false; } } } // Update camera to follow the character function updateCamera() { if (!character) return; // Get character's position and current camera direction const characterPos = character.position.clone(); const cameraDir = new THREE.Vector3(); camera.getWorldDirection(cameraDir); // Calculate target position (character's upper body) let targetPosition = characterPos.clone().add(new THREE.Vector3(0, characterConfig.height / 2, 0)); // Get camera's current horizontal distance to character const cameraToCharacter = new THREE.Vector3(); cameraToCharacter.subVectors(camera.position, characterPos); cameraToCharacter.y = 0; // Ignore vertical distance const currentDistance = cameraToCharacter.length(); // Check if character is moving towards camera const movementTowardCamera = moveDirection.dot(cameraToCharacter.normalize()) < 0; // Adjust camera position if too close if (movementTowardCamera && currentDistance < cameraSettings.minFollowDistance) { const idealOffset = cameraToCharacter.normalize().multiplyScalar(cameraSettings.minFollowDistance); idealOffset.y = camera.position.y - characterPos.y; const newCameraPos = characterPos.clone().add(idealOffset); camera.position.lerp(newCameraPos, cameraSettings.smoothSpeed * 2); } // Update OrbitControls target controls.target.lerp(targetPosition, cameraSettings.smoothSpeed); // Update controls controls.update(); } // ========================= // End of Character Integration // ========================= // Create initial scene // 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 }); 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 }); 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 const platformNeg4 = createPlatformNeg4(); // 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 }); 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 }); 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(); // 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 }); 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 }); 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(); // 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 }); 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 }); 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 }); 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 }); 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(); // 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 }); 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 }); 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(); // 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 }); 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(); // 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 }); 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(); // 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 }); 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(); // 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); }); // 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) { world.step(deltaTime); // 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 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) { showVictoryScreen(); } } // 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); // Start animation animate();