import * as THREE from 'three'; import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js'; import { FBXLoader } from 'three/addons/loaders/FBXLoader.js'; import { OrbitControls } from 'three/addons/controls/OrbitControls.js'; import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js'; import { RenderPass } from 'three/addons/postprocessing/RenderPass.js'; import { UnrealBloomPass } from 'three/addons/postprocessing/UnrealBloomPass.js'; import { SMAAPass } from 'three/addons/postprocessing/SMAAPass.js'; // Initialize game state and controls const keysPressed = { up: false, down: false, left: false, right: false, jump: false, sprint: false }; // Initialize loading manager const loadingManager = new THREE.LoadingManager(); const textureLoader = new THREE.TextureLoader(loadingManager); const gltfLoader = new GLTFLoader(loadingManager); const fbxLoader = new FBXLoader(loadingManager); let assetsLoaded = false; let fbxModel = null; // Store reference to FBX model // Setup audio listener and background music const listener = new THREE.AudioListener(); const backgroundMusic = new THREE.Audio(listener); const audioLoader = new THREE.AudioLoader(); audioLoader.load('https://play.rosebud.ai/assets/Strobotone - Cute Winter Game Theme 01.mp3?uHgI', function(buffer) { backgroundMusic.setBuffer(buffer); backgroundMusic.setLoop(true); backgroundMusic.setVolume(0.5); }); let handModel = null; // Store reference to hand model const modelSpeed = 0.5; // Base movement speed for the model // Audio setup const audioContext = new(window.AudioContext || window.webkitAudioContext)(); const oscillators = new Map(); // Store oscillators for each hand const gainNode = audioContext.createGain(); gainNode.connect(audioContext.destination); gainNode.gain.setValueAtTime(0.5, audioContext.currentTime); // Setup color flash variables const flashColors = [ new THREE.Color(1, 0, 0), // Red new THREE.Color(0, 0, 1), // Blue new THREE.Color(1, 1, 0) // Yellow ]; let flashIndex = 0; let lastFlashTime = 0; const flashInterval = 100; // Time in ms between color changes // Panel flashing colors and variables const panelColors = [ new THREE.Color(0x00ff00), // Green new THREE.Color(0xffa500), // Orange new THREE.Color(0x800080) // Purple ]; let panelFlashIndex = 0; let lastPanelFlashTime = 0; const panelFlashInterval = 500; // Slower flash rate for panels const sprintMultiplier = 5.0; // Speed multiplier when sprinting (doubled from 2.5) const mouseControl = { isLocked: false, sensitivity: 0.002, euler: new THREE.Euler(0, 0, 0, 'YXZ'), rotation: new THREE.Vector3() }; // Parameters for hand movement const handMovement = { time: 0, speed: 0.5, heightOffset: 10, rotationSpeed: 0.1, figureEightSize: 20, // Size of the figure-eight pattern figureEightSpeed: 0.5 // Speed of the figure-eight movement }; // Create start screen const startScreen = document.createElement('div'); startScreen.id = 'startScreen'; startScreen.innerHTML = `

GLITCH_surfer.exe

Click anywhere to start

`; // Add styles for the start screen const startScreenStyles = ` #startScreen { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.85); display: flex; justify-content: center; align-items: center; z-index: 1000; cursor: pointer; } .glitch-container { text-align: center; } .glitch { font-size: 48px; font-weight: bold; text-transform: uppercase; position: relative; text-shadow: 0.05em 0 0 #00fffc, -0.03em -0.04em 0 #fc00ff, 0.025em 0.04em 0 #fffc00; animation: glitch 725ms infinite; color: #fff; font-family: 'Courier New', monospace; } .glitch span { position: absolute; top: 0; left: 0; } .glitch::before, .glitch::after { content: attr(data-text); position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .glitch::before { left: 2px; text-shadow: -2px 0 #ff00ff; animation: glitch-2 0.3s infinite; clip: rect(44px, 450px, 56px, 0); } .glitch::after { left: -2px; text-shadow: -2px 0 #00fff9; animation: glitch-3 0.3s infinite; clip: rect(44px, 450px, 56px, 0); } .subtitle { color: #00fff9; font-family: 'Courier New', monospace; margin-top: 20px; font-size: 18px; opacity: 0.8; animation: blink 1s infinite; } @keyframes glitch { 0% { text-shadow: 0.05em 0 0 #00fffc, -0.03em -0.04em 0 #fc00ff, 0.025em 0.04em 0 #fffc00; } 15% { text-shadow: 0.05em 0 0 #00fffc, -0.03em -0.04em 0 #fc00ff, 0.025em 0.04em 0 #fffc00; } 16% { text-shadow: -0.05em -0.025em 0 #00fffc, 0.025em 0.035em 0 #fc00ff, -0.05em -0.05em 0 #fffc00; } 49% { text-shadow: -0.05em -0.025em 0 #00fffc, 0.025em 0.035em 0 #fc00ff, -0.05em -0.05em 0 #fffc00; } 50% { text-shadow: 0.05em 0.035em 0 #00fffc, 0.03em 0 0 #fc00ff, 0 -0.04em 0 #fffc00; } 99% { text-shadow: 0.05em 0.035em 0 #00fffc, 0.03em 0 0 #fc00ff, 0 -0.04em 0 #fffc00; } 100% { text-shadow: -0.05em 0 0 #00fffc, -0.025em -0.04em 0 #fc00ff, -0.04em -0.025em 0 #fffc00; } } @keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } } `; // Add the styles to the document const styleElement = document.createElement('style'); styleElement.textContent = startScreenStyles; document.head.appendChild(styleElement); // Get the parent div once at the start const parentDiv = document.getElementById('renderDiv'); parentDiv.appendChild(startScreen); // Handle start screen click let gameStarted = false; startScreen.addEventListener('click', () => { if (!gameStarted) { gameStarted = true; startScreen.style.display = 'none'; // Start the background music if (backgroundMusic.buffer) { backgroundMusic.play(); } } }); // Initialize canvas 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'; }; // Initialize the scene and physics world const scene = new THREE.Scene(); // Initialize Cannon.js physics world const world = new CANNON.World(); world.gravity.set(0, -9.82, 0); // Set gravity world.broadphase = new CANNON.NaiveBroadphase(); world.solver.iterations = 10; world.defaultContactMaterial = new CANNON.ContactMaterial( new CANNON.Material(), new CANNON.Material(), { friction: 0.3, restitution: 0.3, } ); // Clock for animation const clock = new THREE.Clock(); // Initialize the camera const camera = new THREE.PerspectiveCamera( 75, canvas.offsetWidth / canvas.offsetHeight, 0.1, 1000 ); camera.position.set(0, 50, 100); camera.lookAt(0, 0, 0); camera.add(listener); // Add audio listener to camera // Initialize the renderer with HDR const renderer = new THREE.WebGLRenderer({ antialias: true, canvas: canvas, powerPreference: 'high-performance', }); renderer.setPixelRatio(window.devicePixelRatio); renderer.setSize(canvas.offsetWidth, canvas.offsetHeight); renderer.shadowMap.enabled = true; renderer.shadowMap.type = THREE.PCFSoftShadowMap; renderer.outputEncoding = THREE.sRGBEncoding; renderer.toneMapping = THREE.ACESFilmicToneMapping; renderer.toneMappingExposure = 1.2; // Initialize post-processing const composer = new EffectComposer(renderer); // Regular scene render pass const renderPass = new RenderPass(scene, camera); composer.addPass(renderPass); // Add subtle bloom effect const bloomPass = new UnrealBloomPass( new THREE.Vector2(window.innerWidth, window.innerHeight), 0.2, // bloom strength 0.4, // radius 0.9 // threshold ); composer.addPass(bloomPass); // Add anti-aliasing const smaaPass = new SMAAPass( window.innerWidth * renderer.getPixelRatio(), window.innerHeight * renderer.getPixelRatio() ); composer.addPass(smaaPass); // Initialize composer size composer.setSize(parentDiv.clientWidth, parentDiv.clientHeight); // Define sky colors for environmental lighting const skyColor = new THREE.Color(0x87ceeb); // Bright sky blue const groundColor = new THREE.Color(0xffffff); // White ground reflection // Create sky dome with improved colors const vertexShader = ` varying vec3 vWorldPosition; void main() { vec4 worldPosition = modelMatrix * vec4( position, 1.0 ); vWorldPosition = worldPosition.xyz; gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 ); }`; const fragmentShader = ` uniform vec3 topColor; uniform vec3 bottomColor; uniform float offset; uniform float exponent; varying vec3 vWorldPosition; void main() { float h = normalize( vWorldPosition + offset ).y; gl_FragColor = vec4( mix( bottomColor, topColor, max( pow( max( h, 0.0 ), exponent ), 0.0 ) ), 1.0 ); }`; const uniforms = { topColor: { value: skyColor }, bottomColor: { value: groundColor }, offset: { value: 33 }, exponent: { value: 0.6 }, }; const skyGeo = new THREE.SphereGeometry(500, 32, 15); const skyMat = new THREE.ShaderMaterial({ uniforms: uniforms, vertexShader: vertexShader, fragmentShader: fragmentShader, side: THREE.BackSide, }); const sky = new THREE.Mesh(skyGeo, skyMat); scene.add(sky); // Remove OrbitControls as we're using custom camera following // const controls = new OrbitControls(camera, renderer.domElement); // Create flat terrain function createTerrain() { const size = 4000; // Double the size for an even larger playable area // Create simple flat plane for visuals const geometry = new THREE.PlaneGeometry(size, size); const texture = textureLoader.load('https://play.rosebud.ai/assets/redchip.png?s4tn'); texture.wrapS = texture.wrapT = THREE.RepeatWrapping; texture.repeat.set(400, 400); // Increased repeat for the larger area texture.encoding = THREE.sRGBEncoding; const material = new THREE.MeshStandardMaterial({ map: texture, roughness: 0.4, metalness: 0.6, envMapIntensity: 2.5, emissive: new THREE.Color(0xff0000), emissiveIntensity: 0.15, emissiveMap: texture }); // Enhance texture vibrancy texture.encoding = THREE.sRGBEncoding; texture.flipY = false; texture.minFilter = THREE.LinearFilter; texture.magFilter = THREE.LinearFilter; const terrain = new THREE.Mesh(geometry, material); terrain.rotation.x = -Math.PI / 2; terrain.receiveShadow = true; scene.add(terrain); 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); // Create initial scene const terrain = createTerrain(); // Create large floating cube with time texture function createTimeCube() { const size = 200; // Large cube size const geometry = new THREE.BoxGeometry(size, size, size); // Load and configure the time texture const timeTexture = textureLoader.load('https://play.rosebud.ai/assets/time.png?B8VW'); timeTexture.wrapS = timeTexture.wrapT = THREE.RepeatWrapping; timeTexture.repeat.set(4, 4); // 4x4 tiles on each face // Create material with time texture const material = new THREE.MeshStandardMaterial({ map: timeTexture, roughness: 0.3, metalness: 0.7, emissive: new THREE.Color(0xFFFFFF), emissiveMap: timeTexture, emissiveIntensity: 0.2 }); const cube = new THREE.Mesh(geometry, material); cube.position.set(0, 300, 0); // Position high in the air cube.castShadow = true; cube.receiveShadow = true; // Add slow rotation animation cube.userData.rotationSpeed = { x: 0.001, y: 0.002 }; return cube; } // Create and add the cube to the scene const timeCube = createTimeCube(); scene.add(timeCube); // Create floating circuit rectangles // Add score display const scoreDisplay = document.createElement('div'); scoreDisplay.id = 'scoreDisplay'; scoreDisplay.style.position = 'fixed'; scoreDisplay.style.top = '20px'; scoreDisplay.style.left = '50%'; scoreDisplay.style.transform = 'translateX(-50%)'; scoreDisplay.style.color = '#00ff00'; scoreDisplay.style.fontSize = '24px'; scoreDisplay.style.fontFamily = 'monospace'; scoreDisplay.style.textShadow = '0 0 5px #00ff00'; scoreDisplay.style.zIndex = '1000'; document.body.appendChild(scoreDisplay); // Initialize score let score = 0; function updateScore() { scoreDisplay.textContent = `CHIPS: ${score}`; } function createFloatingRectangles() { const rectangles = []; const circuitTexture = textureLoader.load('https://play.rosebud.ai/assets/circuit.jpg?TgAw'); circuitTexture.wrapS = circuitTexture.wrapT = THREE.RepeatWrapping; circuitTexture.repeat.set(1, 1); const material = new THREE.MeshStandardMaterial({ map: circuitTexture, metalness: 0.7, roughness: 0.2, emissive: new THREE.Color(0x444444), emissiveMap: circuitTexture, emissiveIntensity: 0.5, side: THREE.DoubleSide }); for (let i = 0; i < 21; i++) { // Increase number of chips const width = 20 + Math.random() * 10; // Random width between 20-30 const height = 30 + Math.random() * 15; // Random height between 30-45 const geometry = new THREE.PlaneGeometry(width, height); const rectangle = new THREE.Mesh(geometry, material.clone()); // Random position within bounds // Create a more spread out distribution using polar coordinates const radius = Math.random() * 1800; // Spread up to 1800 units from center const angle = Math.random() * Math.PI * 2; // Random angle rectangle.position.set( radius * Math.cos(angle), // X coordinate 0.1, // Y: barely above ground radius * Math.sin(angle) // Z coordinate ); // Random rotation rectangle.rotation.x = Math.random() * Math.PI * 2; rectangle.rotation.y = Math.random() * Math.PI * 2; rectangle.rotation.z = Math.random() * Math.PI * 2; // Add floating animation data rectangle.userData.floatOffset = Math.random() * Math.PI * 2; rectangle.userData.floatSpeed = 0.5 + Math.random() * 0.5; rectangle.userData.rotationSpeed = { x: (Math.random() - 0.5) * 0.01, y: (Math.random() - 0.5) * 0.01, z: (Math.random() - 0.5) * 0.01 }; rectangle.castShadow = true; rectangle.receiveShadow = true; rectangles.push(rectangle); scene.add(rectangle); } return rectangles; } // Create and store rectangles const floatingRectangles = createFloatingRectangles(); // Create large orb with circuit texture and physics const orbGeometry = new THREE.SphereGeometry(20, 64, 64); // Smaller radius for better gameplay // Create and configure circuit texture for both orb and panels const circuitTexture = textureLoader.load('https://play.rosebud.ai/assets/circuit.jpg?TgAw'); circuitTexture.wrapS = THREE.RepeatWrapping; circuitTexture.wrapT = THREE.RepeatWrapping; // Create a clone for the orb with different repeat settings const orbCircuitTexture = circuitTexture.clone(); orbCircuitTexture.repeat.set(4, 2); // Repeat settings for orb // Set repeat for panel texture circuitTexture.repeat.set(2, 3); // Repeat settings for panels const orbMaterial = new THREE.MeshStandardMaterial({ map: orbCircuitTexture, metalness: 0.5, roughness: 0.2, emissive: new THREE.Color(0x222222), emissiveMap: circuitTexture, emissiveIntensity: 0.5 }); const orb = new THREE.Mesh(orbGeometry, orbMaterial); orb.position.set(0, 50, 0); // Lower initial position orb.castShadow = true; orb.receiveShadow = true; scene.add(orb); // Create physics body for the orb const orbShape = new CANNON.Sphere(20); // Match the geometry size const orbBody = new CANNON.Body({ mass: 50, // Give it some weight material: new CANNON.Material({ friction: 0.3, restitution: 0.8 // Make it bouncy }) }); orbBody.addShape(orbShape); orbBody.position.set(0, 50, 0); // Match initial visual position world.addBody(orbBody); // Create the four large panels const panelGeometry = new THREE.PlaneGeometry(200, 300); const panelMaterial = new THREE.MeshStandardMaterial({ map: circuitTexture, side: THREE.DoubleSide, metalness: 0.5, roughness: 0.2, emissive: new THREE.Color(0x222222), emissiveMap: circuitTexture, emissiveIntensity: 0.5 }); // Create and position the panels const panels = []; const panelPositions = [{ pos: new THREE.Vector3(-500, 150, -500), rot: Math.PI / 4 }, // NW { pos: new THREE.Vector3(0, 150, -700), rot: 0 }, // N { pos: new THREE.Vector3(500, 150, -500), rot: -Math.PI / 4 }, // NE { pos: new THREE.Vector3(700, 150, 0), rot: -Math.PI / 2 }, // E { pos: new THREE.Vector3(500, 150, 500), rot: -Math.PI * 3 / 4 }, // SE { pos: new THREE.Vector3(0, 150, 700), rot: Math.PI }, // S { pos: new THREE.Vector3(-500, 150, 500), rot: Math.PI * 3 / 4 }, // SW { pos: new THREE.Vector3(-700, 150, 0), rot: Math.PI / 2 } // W ]; // Create a television in the corner function createTelevision() { // TV Frame const tvFrame = new THREE.Group(); // Main TV body const bodyGeometry = new THREE.BoxGeometry(120, 80, 10); const bodyMaterial = new THREE.MeshStandardMaterial({ color: 0xFFFFFF, metalness: 0.5, roughness: 0.2, emissive: 0xFFFFFF, emissiveIntensity: 0.2 }); const tvBody = new THREE.Mesh(bodyGeometry, bodyMaterial); // TV Screen const screenGeometry = new THREE.PlaneGeometry(100, 60); const screenMaterial = new THREE.MeshStandardMaterial({ color: 0x000000, metalness: 0.8, roughness: 0.2, emissive: 0x222222, emissiveIntensity: 0.5 }); const tvScreen = new THREE.Mesh(screenGeometry, screenMaterial); tvScreen.position.z = 0.6; // TV Stand const standGeometry = new THREE.BoxGeometry(40, 30, 20); const stand = new THREE.Mesh(standGeometry, bodyMaterial); stand.position.y = -55; stand.position.z = 5; // Add all parts to the TV frame tvFrame.add(tvBody); tvFrame.add(tvScreen); tvFrame.add(stand); // Position the TV in the corner tvFrame.position.set(-450, 150, -450); tvFrame.rotation.y = Math.PI / 4; // 45-degree angle // Add shadows tvFrame.traverse((child) => { if (child.isMesh) { child.castShadow = true; child.receiveShadow = true; } }); return tvFrame; } // Create and add the TV to the scene const television = createTelevision(); scene.add(television); panelPositions.forEach(({ pos, rot }) => { const panel = new THREE.Mesh(panelGeometry, panelMaterial.clone()); panel.position.copy(pos); panel.rotation.y = rot; panel.castShadow = true; panel.receiveShadow = true; panels.push(panel); scene.add(panel); }); // Load and add the 3D model gltfLoader.load('https://play.rosebud.ai/assets/model.glb?0iOH', (gltf) => { const model = gltf.scene; model.position.set(0, 10, 0); // Moved up by 10 units model.scale.set(1, 1, 1); // Adjust scale if needed // Enable shadows for the model and its children model.traverse((child) => { if (child.isMesh) { child.castShadow = true; child.receiveShadow = true; } }); scene.add(model); }); // Load and add the bionic man model gltfLoader.load('https://play.rosebud.ai/assets/bionic man.blx?NFmF', (gltf) => { const bionicMan = gltf.scene; bionicMan.position.set(20, 10, 20); // Position it away from other models bionicMan.scale.set(1, 1, 1); // Enable shadows for the model and its children bionicMan.traverse((child) => { if (child.isMesh) { child.castShadow = true; child.receiveShadow = true; } }); scene.add(bionicMan); }); // Load and add the FBX model fbxLoader.load('https://play.rosebud.ai/assets/body.fbx?Up0c', (fbx) => { fbx.position.set(10, 10, 0); fbx.scale.set(0.1, 0.1, 0.1); fbxModel = fbx; // Store reference to the model // Enable shadows for the model and its children fbx.traverse((child) => { if (child.isMesh) { child.castShadow = true; child.receiveShadow = true; // Create inverted skin texture const texture = textureLoader.load('https://play.rosebud.ai/assets/skin.png?bwEl'); const material = new THREE.ShaderMaterial({ uniforms: { mainTex: { value: texture }, roughness: { value: 0.8 }, metalness: { value: 0.1 } }, vertexShader: ` varying vec2 vUv; void main() { vUv = uv; gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); } `, fragmentShader: ` uniform sampler2D mainTex; uniform float roughness; uniform float metalness; varying vec2 vUv; void main() { vec4 texColor = texture2D(mainTex, vUv); // Invert the colors vec3 invertedColor = 1.0 - texColor.rgb; gl_FragColor = vec4(invertedColor, texColor.a); } ` }); child.material = material; } }); scene.add(fbx); }); // Load and add the hand model // Function to get random position within map bounds function getRandomPosition() { const mapSize = 1800; // Slightly smaller than terrain size for margin return { x: (Math.random() - 0.5) * mapSize, z: (Math.random() - 0.5) * mapSize }; } // Load and add multiple hand models fbxLoader.load('https://play.rosebud.ai/assets/hand.fbx?E5cW', (originalFbx) => { // Create 21 hands for (let i = 0; i < 21; i++) { const fbx = originalFbx.clone(); const pos = getRandomPosition(); fbx.position.set(pos.x, 10, pos.z); fbx.scale.set(0.1, 0.1, 0.1); fbx.rotation.y = Math.random() * Math.PI * 2; // Random rotation if (i === 0) handModel = fbx; // Store reference to first hand // Enable shadows for the model and its children fbx.traverse((child) => { if (child.isMesh) { child.castShadow = true; child.receiveShadow = true; // Generate a unique color for each hand // Create a cyberpunk-inspired color palette const palette = [ new THREE.Color(0xFF00FF), // Neon Pink new THREE.Color(0x00FFFF), // Cyan new THREE.Color(0xFF3366), // Hot Pink new THREE.Color(0x33FF33), // Neon Green new THREE.Color(0x3366FF), // Electric Blue new THREE.Color(0xFFFF00), // Yellow new THREE.Color(0xFF6600) // Neon Orange ]; const color = palette[i % palette.length]; const texture = textureLoader.load('https://play.rosebud.ai/assets/skin.png?Geck'); const material = new THREE.MeshStandardMaterial({ map: texture, roughness: 0.3, // More metallic look metalness: 0.7, // More metallic look color: color, emissive: color.clone().multiplyScalar(0.5), // Stronger glow emissiveIntensity: 0.8 // Increased glow intensity }); child.material = material; } }); scene.add(fbx); } }); // Animation loop function animate() { requestAnimationFrame(animate); // Animate floating rectangles and check for collection for (let i = floatingRectangles.length - 1; i >= 0; i--) { const rectangle = floatingRectangles[i]; // Skip if already collected if (rectangle.userData.collected) continue; // Floating motion // Remove floating motion to keep rectangles on ground // Rotation rectangle.rotation.x += rectangle.userData.rotationSpeed.x; rectangle.rotation.y += rectangle.userData.rotationSpeed.y; rectangle.rotation.z += rectangle.userData.rotationSpeed.z; // Check for collection if player model exists if (fbxModel) { const playerPos = new THREE.Vector3(); fbxModel.getWorldPosition(playerPos); const chipPos = new THREE.Vector3(); rectangle.getWorldPosition(chipPos); const collectionDistance = 15; // Collection radius if (playerPos.distanceTo(chipPos) < collectionDistance && !rectangle.userData.collected) { // Collection effect rectangle.userData.collected = true; score++; updateScore(); // Check if score reaches 13 if (score === 13) { // Create full screen video element // Create container for overlays const overlayContainer = document.createElement('div'); overlayContainer.style.position = 'fixed'; overlayContainer.style.top = '0'; overlayContainer.style.left = '0'; overlayContainer.style.width = '100%'; overlayContainer.style.height = '100%'; overlayContainer.style.backgroundColor = 'black'; overlayContainer.style.zIndex = '10000'; // Create time texture overlay const timeOverlay = document.createElement('div'); timeOverlay.style.position = 'absolute'; timeOverlay.style.top = '0'; timeOverlay.style.left = '0'; timeOverlay.style.width = '100%'; timeOverlay.style.height = '100%'; timeOverlay.style.backgroundImage = 'url("https://play.rosebud.ai/assets/time.png?B8VW")'; timeOverlay.style.backgroundSize = 'cover'; timeOverlay.style.backgroundPosition = 'center'; timeOverlay.style.opacity = '0.7'; timeOverlay.style.zIndex = '10001'; timeOverlay.style.mixBlendMode = 'overlay'; // Create video element const video = document.createElement('video'); video.src = 'https://play.rosebud.ai/assets/squiggle chair (1).mp4?J4Gk'; video.style.width = '100%'; video.style.height = '100%'; video.style.objectFit = 'contain'; video.style.position = 'absolute'; video.autoplay = true; video.style.zIndex = '10000'; // Add elements to container overlayContainer.appendChild(video); overlayContainer.appendChild(timeOverlay); document.body.appendChild(overlayContainer); // Remove overlays when video ends video.addEventListener('ended', () => { document.body.removeChild(overlayContainer); }); } // Simple scale animation const startScale = rectangle.scale.x; const startTime = Date.now(); const animationDuration = 300; // 300ms function animateCollection() { const currentTime = Date.now(); const elapsed = currentTime - startTime; const progress = Math.min(elapsed / animationDuration, 1); // Ease out cubic const scale = startScale * (1 - Math.pow(progress, 3)); rectangle.scale.set(scale, scale, scale); if (progress < 1) { requestAnimationFrame(animateCollection); } else { scene.remove(rectangle); floatingRectangles.splice(i, 1); } } animateCollection(); // Play collection sound const collectSound = new THREE.Audio(listener); const oscillator = audioContext.createOscillator(); const gainNode = audioContext.createGain(); oscillator.connect(gainNode); gainNode.connect(audioContext.destination); oscillator.frequency.setValueAtTime(880, audioContext.currentTime); // A5 note oscillator.frequency.exponentialRampToValueAtTime(440, audioContext.currentTime + 0.1); // Slide to A4 gainNode.gain.setValueAtTime(0.2, audioContext.currentTime); gainNode.gain.exponentialRampToValueAtTime(0.01, audioContext.currentTime + 0.1); oscillator.start(); oscillator.stop(audioContext.currentTime + 0.1); } } } // Rotate the time cube if (timeCube) { timeCube.rotation.x += timeCube.userData.rotationSpeed.x; timeCube.rotation.y += timeCube.userData.rotationSpeed.y; } // Update physics world world.step(1 / 60); // Update orb physics and visuals if (orb && orbBody) { // Update orb mesh position to match physics orb.position.copy(orbBody.position); orb.quaternion.copy(orbBody.quaternion); // Check for player collision with orb if (fbxModel) { const playerPos = new THREE.Vector3(); fbxModel.getWorldPosition(playerPos); const orbPos = new THREE.Vector3(); orb.getWorldPosition(orbPos); const distance = playerPos.distanceTo(orbPos); // If player is close enough, apply force to the orb if (distance < 25) { const direction = new THREE.Vector3() .subVectors(orbPos, playerPos) .normalize(); // Calculate force based on player movement and sprint state let force = 2000; if (keysPressed.sprint) { force *= 2; // Double the force when sprinting } // Apply the force orbBody.applyImpulse( new CANNON.Vec3(direction.x * force, direction.y * force + 1000, // Add upward force direction.z * force), orbBody.position ); } } } // Handle panel flashing const currentTime = Date.now(); if (currentTime - lastPanelFlashTime > panelFlashInterval) { const newColor = panelColors[panelFlashIndex]; panels.forEach(panel => { panel.material.color.copy(newColor); panel.material.emissive.copy(newColor); }); panelFlashIndex = (panelFlashIndex + 1) % panelColors.length; lastPanelFlashTime = currentTime; } // Handle color flashing during sprint if (keysPressed.sprint) { const currentTime = Date.now(); if (currentTime - lastFlashTime > flashInterval) { // Update scene background color scene.background = flashColors[flashIndex]; // Update uniforms for sky dome uniforms.topColor.value = flashColors[flashIndex]; uniforms.bottomColor.value = flashColors[flashIndex]; // Update index for next color flashIndex = (flashIndex + 1) % flashColors.length; lastFlashTime = currentTime; } } else { // Reset scene colors when not sprinting scene.background = null; uniforms.topColor.value = skyColor; uniforms.bottomColor.value = groundColor; } if (assetsLoaded && gameStarted) { // Only start gameplay elements after game has started if (backgroundMusic.buffer && !backgroundMusic.isPlaying) { backgroundMusic.play(); } applyControls(); // Apply camera and model controls // Keep hand in place with gentle bobbing motion if (handModel) { handMovement.time += 0.016; scene.traverse((object) => { // Apply figure-eight motion to all hand models if (object.isMesh && object.parent && object.parent.type === 'Object3D') { // Store initial position if not already stored if (!object.parent.userData.initialPosition) { object.parent.userData.initialPosition = { x: object.parent.position.x, y: object.parent.position.y, z: object.parent.position.z }; } const initial = object.parent.userData.initialPosition; const t = handMovement.time * handMovement.figureEightSpeed; // Calculate figure-eight pattern object.parent.position.x = initial.x + Math.sin(t) * handMovement.figureEightSize; object.parent.position.z = initial.z + Math.sin(t * 2) * handMovement.figureEightSize * 0.5; object.parent.position.y = initial.y + Math.cos(t) * 2; // Add slight vertical movement // Rotate hands to face movement direction const angleX = Math.cos(t) * handMovement.figureEightSize; const angleZ = Math.cos(t * 2) * handMovement.figureEightSize * 0.5; object.parent.rotation.y = Math.atan2(angleX, angleZ) + Math.PI; } }); } } 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); // Mouse control setup function setupMouseControls() { canvas.addEventListener('click', function() { if (!mouseControl.isLocked) { canvas.requestPointerLock(); } else { // Trigger jump on left click when pointer is locked keysPressed.jump = true; // Reset jump after a short delay setTimeout(() => { keysPressed.jump = false; }, 100); } }); document.addEventListener('pointerlockchange', function() { mouseControl.isLocked = document.pointerLockElement === canvas; }); document.addEventListener('mousemove', function(event) { if (mouseControl.isLocked) { mouseControl.rotation.x -= event.movementY * mouseControl.sensitivity; mouseControl.rotation.y -= event.movementX * mouseControl.sensitivity; // Limit vertical rotation mouseControl.rotation.x = Math.max(-Math.PI / 2, Math.min(Math.PI / 2, mouseControl.rotation.x)); // Apply rotation to camera mouseControl.euler.x = mouseControl.rotation.x; mouseControl.euler.y = mouseControl.rotation.y; camera.quaternion.setFromEuler(mouseControl.euler); } }); } // Initialize mouse controls setupMouseControls(); // Start animation animate(); // ========================= // Mobile Controls Integration // ========================= // Create a container for the D-pad const dpadContainer = document.createElement('div'); dpadContainer.id = 'dpadContainer'; document.body.appendChild(dpadContainer); // Create directional buttons const directions = ['up', 'down', 'left', 'right']; directions.forEach(direction => { const button = document.createElement('button'); button.id = `${direction}Button`; button.classList.add('dpad-button'); // Set the appropriate icon based on direction let iconUrl = ''; switch (direction) { case 'up': iconUrl = 'https://play.rosebud.ai/assets/up_chevron.png?CZrK'; break; case 'down': iconUrl = 'https://play.rosebud.ai/assets/down_chevron.png?O1Qo'; break; case 'left': iconUrl = 'https://play.rosebud.ai/assets/left_chevron.png?7IUY'; break; case 'right': iconUrl = 'https://play.rosebud.ai/assets/right_chevron.png?Kgtp'; break; } button.style.backgroundImage = `url('${iconUrl}')`; dpadContainer.appendChild(button); }); // Create a container for the Jump button const jumpContainer = document.createElement('div'); jumpContainer.id = 'jumpContainer'; document.body.appendChild(jumpContainer); // Create Jump button const jumpButton = document.createElement('button'); jumpButton.id = 'jumpButton'; jumpButton.classList.add('jump-button'); jumpButton.style.backgroundImage = `url('https://play.rosebud.ai/assets/Up-Arrow.png?jQPG')`; jumpContainer.appendChild(jumpButton); // Inject CSS styles dynamically const styles = ` /* D-Pad Container */ #dpadContainer { position: fixed; bottom: 150px; /* Moved up further */ left: 30px; /* Moved inward */ width: 150px; /* Increased size */ height: 150px; /* Increased size */ display: grid; grid-template-areas: ". up ." "left . right" ". down ."; grid-gap: 10px; /* Spacing between buttons */ z-index: 1000; } /* Positioning each button in the grid */ #upButton { grid-area: up; } #downButton { grid-area: down; } #leftButton { grid-area: left; } #rightButton { grid-area: right; } /* D-Pad Buttons */ .dpad-button { width: 50px; /* Consistent size */ height: 50px; /* Consistent size */ margin: 0; /* Remove margin as grid-gap handles spacing */ background-color: rgba(0, 0, 0, 0.5); /* Dark semi-transparent background */ background-size: 60%; /* Uniform icon size */ background-repeat: no-repeat; background-position: center; border: none; border-radius: 12px; /* Rounded corners */ opacity: 0.9; /* Higher opacity */ transition: opacity 0.2s, transform 0.1s, box-shadow 0.2s, filter 0.2s; /* Smooth transitions */ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3); /* Initial shadow */ } /* Active State for D-Pad Buttons */ .dpad-button:active { opacity: 1; transform: scale(0.95); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); /* Shadow becomes more pronounced */ filter: brightness(1.1); /* Slight brightness increase */ } /* Jump Button Container */ #jumpContainer { position: fixed; bottom: 150px; /* Moved up further */ right: 30px; /* Moved inward */ width: 80px; /* Maintained size */ height: 80px; /* Maintained size */ display: flex; justify-content: center; align-items: center; z-index: 1000; } /* Jump Button */ .jump-button { width: 70px; /* Increased size */ height: 70px; /* Increased size */ background-color: rgba(0, 0, 0, 0.5); /* Dark semi-transparent background */ background-size: 60%; /* Uniform icon size */ background-repeat: no-repeat; background-position: center; border: none; border-radius: 35px; /* Fully rounded */ opacity: 0.9; /* Higher opacity */ transition: opacity 0.2s, transform 0.1s, box-shadow 0.2s, filter 0.2s; /* Smooth transitions */ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3); /* Initial shadow */ background-image: url('https://play.rosebud.ai/assets/Up-Arrow.png?jQPG'); /* Jump button icon */ } /* Active State for Jump Button */ .jump-button:active { opacity: 1; transform: scale(0.95); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); /* Shadow becomes more pronounced */ filter: brightness(1.1); /* Slight brightness increase */ } /* Responsive Adjustments */ @media (max-width: 600px) { /* D-Pad Container */ #dpadContainer { bottom: 120px; /* Increased from 80px to move up on smaller screens */ left: 25px; width: 120px; height: 120px; } /* D-Pad Buttons */ .dpad-button { width: 40px; height: 40px; background-size: 60%; /* Ensure uniform size */ } /* Jump Button Container */ #jumpContainer { bottom: 120px; /* Increased from 80px */ right: 25px; width: 60px; height: 60px; } /* Jump Button */ .jump-button { width: 60px; height: 60px; background-size: 60%; /* Ensure uniform size */ } } `; // Append the styles to the head const styleSheet = document.createElement("style"); styleSheet.type = "text/css"; styleSheet.innerText = styles; document.head.appendChild(styleSheet); // Initialize control handlers // Helper functions to handle button presses function addButtonListeners(buttonId, key) { const button = document.getElementById(buttonId); if (!button) return; // Prevent default to avoid unwanted scrolling or other behaviors button.addEventListener('touchstart', (event) => { event.preventDefault(); keysPressed[key] = true; }, { passive: false }); button.addEventListener('touchend', (event) => { event.preventDefault(); keysPressed[key] = false; }, { passive: false }); // Also handle mouse events for desktop compatibility button.addEventListener('mousedown', (event) => { event.preventDefault(); keysPressed[key] = true; }); button.addEventListener('mouseup', (event) => { event.preventDefault(); keysPressed[key] = false; }); button.addEventListener('mouseleave', (event) => { event.preventDefault(); keysPressed[key] = false; }); } // Map buttons to standardized keys addButtonListeners('upButton', 'up'); addButtonListeners('downButton', 'down'); addButtonListeners('leftButton', 'left'); addButtonListeners('rightButton', 'right'); addButtonListeners('jumpButton', 'jump'); // ========================= // Keyboard Controls Integration // ========================= // Add event listeners for keyboard controls window.addEventListener('keydown', (event) => { switch (event.code) { case 'ArrowUp': case 'KeyW': keysPressed.up = true; break; case 'ArrowDown': case 'KeyS': keysPressed.down = true; break; case 'ArrowLeft': case 'KeyA': keysPressed.left = true; break; case 'ArrowRight': case 'KeyD': keysPressed.right = true; break; case 'Space': keysPressed.jump = true; break; case 'ShiftLeft': case 'ShiftRight': keysPressed.sprint = true; break; default: break; } }); window.addEventListener('keyup', (event) => { switch (event.code) { case 'ArrowUp': case 'KeyW': keysPressed.up = false; break; case 'ArrowDown': case 'KeyS': keysPressed.down = false; break; case 'ArrowLeft': case 'KeyA': keysPressed.left = false; break; case 'ArrowRight': case 'KeyD': keysPressed.right = false; break; case 'Space': keysPressed.jump = false; break; case 'ShiftLeft': case 'ShiftRight': keysPressed.sprint = false; break; default: break; } }); // ========================= // End of Mobile and Keyboard Controls Integration // ========================= let activeNote = null; // Function to create a new oscillator function createOscillator() { const osc = audioContext.createOscillator(); osc.type = 'sine'; osc.frequency.setValueAtTime(440, audioContext.currentTime); // A4 note osc.connect(gainNode); return osc; } // Function to check collision between player and hands function checkHandCollision() { if (!fbxModel) return null; const playerPos = new THREE.Vector3(); fbxModel.getWorldPosition(playerPos); let collidingHandId = null; scene.traverse((object) => { if (object.isMesh && object.parent && object.parent.type === 'Object3D' && object.parent !== fbxModel) { const handPos = new THREE.Vector3(); object.parent.getWorldPosition(handPos); const distance = playerPos.distanceTo(handPos); if (distance < 5) { // Collision threshold collidingHandId = object.parent.id; } } }); return collidingHandId; } // Function to handle audio state function updateAudio(collidingHandId) { if (collidingHandId !== null) { if (!activeNote) { // Start new note const osc = createOscillator(); osc.start(); activeNote = osc; } } else if (activeNote) { // Stop current note activeNote.stop(); activeNote = null; } } // Function to apply controls based on keysPressed function applyControls() { if (!fbxModel) return; // Get camera's forward direction const cameraDirection = new THREE.Vector3(); camera.getWorldDirection(cameraDirection); // Calculate movement direction based on camera orientation const moveDirection = new THREE.Vector3(); const cameraForward = new THREE.Vector3(-cameraDirection.x, 0, -cameraDirection.z).normalize(); const cameraRight = new THREE.Vector3(cameraDirection.z, 0, -cameraDirection.x).normalize(); if (keysPressed.up) moveDirection.sub(cameraForward); if (keysPressed.down) moveDirection.add(cameraForward); if (keysPressed.left) moveDirection.add(cameraRight); if (keysPressed.right) moveDirection.sub(cameraRight); // Normalize and apply movement if (moveDirection.lengthSq() > 0) { moveDirection.normalize(); const currentSpeed = keysPressed.sprint ? modelSpeed * sprintMultiplier : modelSpeed; fbxModel.position.x += moveDirection.x * currentSpeed; fbxModel.position.z += moveDirection.z * currentSpeed; // Calculate model rotation to face movement direction const targetRotation = Math.atan2(moveDirection.x, moveDirection.z); // Smooth rotation interpolation const rotationSpeed = 0.15; let angleDiff = targetRotation - fbxModel.rotation.y; // Ensure we rotate the shortest way while (angleDiff > Math.PI) angleDiff -= Math.PI * 2; while (angleDiff < -Math.PI) angleDiff += Math.PI * 2; fbxModel.rotation.y += angleDiff * rotationSpeed; } // Handle jumping with smooth transitions if (keysPressed.jump && fbxModel.position.y <= 10) { fbxModel.position.y += modelSpeed * 20.0; // Extreme jump height increase } else if (fbxModel.position.y > 10) { fbxModel.position.y = Math.max(10, fbxModel.position.y - modelSpeed * 0.2); // Even slower fall speed for super high jumps } // Update camera position to follow player const cameraOffset = new THREE.Vector3(0, 15, 30); const lookAtOffset = new THREE.Vector3(0, 5, 0); // Calculate desired camera position const desiredPosition = new THREE.Vector3( fbxModel.position.x - cameraDirection.x * cameraOffset.z, fbxModel.position.y + cameraOffset.y, fbxModel.position.z - cameraDirection.z * cameraOffset.z ); // Smoothly interpolate camera position const cameraMoveSpeed = 0.1; camera.position.lerp(desiredPosition, cameraMoveSpeed); // Update camera look target const lookAtTarget = new THREE.Vector3( fbxModel.position.x + lookAtOffset.x, fbxModel.position.y + lookAtOffset.y, fbxModel.position.z + lookAtOffset.z ); camera.lookAt(lookAtTarget); // Check for hand collision and update audio const collidingHandId = checkHandCollision(); updateAudio(collidingHandId); }