import * as THREE from 'three'; import { FBXLoader } from 'three/addons/loaders/FBXLoader.js'; import { PointerLockControls } from 'three/addons/controls/PointerLockControls.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); let assetsLoaded = false; let floatingMetallicModel; 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'; }; // Initialize the scene const scene = new THREE.Scene(); // 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(-100, 3, -40); camera.lookAt(-100, 3, -41); // Look forward from the new position // 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 // Create textured sky dome const skyGeo = new THREE.SphereGeometry(500, 32, 32); const skyTexture = textureLoader.load('https://play.rosebud.ai/assets/Colorful_Pixels_0129040038_stylize.png?qIeg'); skyTexture.encoding = THREE.sRGBEncoding; skyTexture.mapping = THREE.EquirectangularReflectionMapping; const skyMat = new THREE.MeshBasicMaterial({ map: skyTexture, side: THREE.BackSide, fog: false }); const sky = new THREE.Mesh(skyGeo, skyMat); scene.add(sky); // Define colors for lighting based on new sky const skyColor = new THREE.Color(0xffffff); const groundColor = new THREE.Color(0xffffff); // Initialize PointerLock controls const controls = new PointerLockControls(camera, document.body); // Movement variables const velocity = new THREE.Vector3(); const direction = new THREE.Vector3(); const moveSpeed = 0.15; const jumpForce = 8; const gravity = -9.81; let verticalVelocity = 0; let isGrounded = true; // Add event listener for click-to-start document.addEventListener('click', function() { if (!controls.isLocked) { controls.lock(); } }); // Create flat terrain function createTerrain() { const size = 1000; // Much larger terrain // Create simple flat plane for visuals const geometry = new THREE.PlaneGeometry(size, size); const texture = textureLoader.load('https://play.rosebud.ai/assets/pixil-frame-0 - 2025-01-28T210922.824.png?bd56'); texture.wrapS = texture.wrapT = THREE.RepeatWrapping; texture.repeat.set(250, 250); // Increased texture repetition to maintain density texture.encoding = THREE.sRGBEncoding; texture.magFilter = THREE.NearestFilter; texture.minFilter = THREE.NearestFilter; const material = new THREE.MeshStandardMaterial({ map: texture, roughness: 1.0, metalness: 0.0, envMapIntensity: 1.0, }); const terrain = new THREE.Mesh(geometry, material); terrain.rotation.x = -Math.PI / 2; terrain.receiveShadow = true; scene.add(terrain); return terrain; } // Create slot machine row function createSlotMachines() { const slotMachineGroup = new THREE.Group(); const numRows = 3; const numMachinesPerRow = 5; const spacing = 3; // Space between machines const rowSpacing = 4; // Space between rows const startX = -(numMachinesPerRow - 1) * spacing / 2; // Center the row const startZ = -5; // Starting Z position for (let row = 0; row < numRows; row++) { for (let col = 0; col < numMachinesPerRow; col++) { // Create main cabinet // Create main cabinet without back face const cabinet = new THREE.BoxGeometry(2, 3, 1.5); const cabinetMaterial = new THREE.MeshStandardMaterial({ color: 0x2a2a2a, roughness: 0.2, metalness: 0.9, envMapIntensity: 1.5 }); const cabinetMesh = new THREE.Mesh(cabinet, cabinetMaterial); // Create back panel with texture const backPanel = new THREE.PlaneGeometry(2, 3); const backTexture = textureLoader.load('https://play.rosebud.ai/assets/skin 2.png?xK6C'); backTexture.encoding = THREE.sRGBEncoding; const backMaterial = new THREE.MeshStandardMaterial({ map: backTexture, roughness: 0.8, metalness: 0.2 }); const backPanelMesh = new THREE.Mesh(backPanel, backMaterial); backPanelMesh.position.set(0, 0, -0.75); // Position at the back of the cabinet backPanelMesh.rotation.y = Math.PI; // Rotate to face back // Create screen frame (metallic border) const screenFrame = new THREE.BoxGeometry(1.7, 1.3, 0.2); const screenFrameMaterial = new THREE.MeshStandardMaterial({ color: 0xc0c0c0, roughness: 0.1, metalness: 1.0, envMapIntensity: 2.0 }); const screenFrameMesh = new THREE.Mesh(screenFrame, screenFrameMaterial); screenFrameMesh.position.set(0, 0.5, 0.75); // Create screen (glowing display) const screen = new THREE.BoxGeometry(1.5, 1.1, 0.1); const screenMaterial = new THREE.MeshStandardMaterial({ color: 0x00ff00, roughness: 0.0, metalness: 0.0, emissive: 0x00ff00, emissiveIntensity: 0.5 }); const screenMesh = new THREE.Mesh(screen, screenMaterial); screenMesh.position.set(0, 0.5, 0.8); // Create lever const lever = new THREE.CylinderGeometry(0.1, 0.1, 1, 8); const leverMaterial = new THREE.MeshStandardMaterial({ color: 0xcc0000, roughness: 0.3, metalness: 0.8 }); const leverMesh = new THREE.Mesh(lever, leverMaterial); leverMesh.position.set(1.1, 0, 0.5); leverMesh.rotation.z = -Math.PI / 6; // Create lever knob const knob = new THREE.SphereGeometry(0.15, 16, 16); const knobMesh = new THREE.Mesh(knob, leverMaterial); knobMesh.position.set(1.3, 0.4, 0.5); // Create base const base = new THREE.BoxGeometry(2.2, 0.2, 1.7); const baseMesh = new THREE.Mesh(base, cabinetMaterial); baseMesh.position.set(0, -1.6, 0); // Create a group for this slot machine const slotMachine = new THREE.Group(); slotMachine.add(cabinetMesh); slotMachine.add(backPanelMesh); slotMachine.add(screenFrameMesh); slotMachine.add(screenMesh); slotMachine.add(leverMesh); slotMachine.add(knobMesh); slotMachine.add(baseMesh); // Position the slot machine slotMachine.position.set( startX + col * spacing, // X position 1.6, // Y position startZ - row * rowSpacing // Z position ); // Add shadows slotMachine.traverse((object) => { if (object instanceof THREE.Mesh) { object.castShadow = true; object.receiveShadow = true; } }); slotMachineGroup.add(slotMachine); } } scene.add(slotMachineGroup); return slotMachineGroup; } // Load and position models function createModels() { const fbxLoader = new FBXLoader(loadingManager); let blendModel; // Load blend model fbxLoader.load('https://play.rosebud.ai/assets/ç¿æ-154.blend?twfw', (model) => { model.scale.set(0.1, 0.1, 0.1); model.position.set(0, 5, 20); // Position it in front of the slot machines model.rotation.y = Math.PI; // Face towards the player // Add shadows model.traverse((child) => { if (child instanceof THREE.Mesh) { child.castShadow = true; child.receiveShadow = true; } }); blendModel = model; scene.add(model); }); // Central model const centerPositions = [{ x: 0, z: -8.5, rotation: Math.PI }]; // Corner models const cornerPositions = [{ x: -40, z: -40, rotation: Math.PI / 4 }, // Back Left { x: 40, z: -40, rotation: -Math.PI / 4 }, // Back Right { x: -40, z: 40, rotation: 3 * Math.PI / 4 }, // Front Left { x: 40, z: 40, rotation: -3 * Math.PI / 4 } // Front Right ]; // Create floating models above ceiling for (let i = 0; i < 20; i++) { // Calculate position in a grid pattern const row = Math.floor(i / 4); const col = i % 4; fbxLoader.load('https://play.rosebud.ai/assets/model 2.fbx?jYP3', (model) => { model.scale.set(0.15, 0.15, 0.15); // Position models in a grid formation above ceiling model.position.set( -200 + col * 100, // X position: spread out in columns 70 + row * 20, // Y position: start at 70 (above ceiling) and stack up -200 + Math.floor(i / 4) * 100 // Z position: spread out in rows ); // Add random rotation model.rotation.y = Math.random() * Math.PI * 2; // Add slow spinning animation model.userData.rotationSpeed = 0.2 + Math.random() * 0.3; // Random rotation speed model.userData.floatingOffset = Math.random() * Math.PI * 2; // Random float offset model.userData.isFloatingModel = true; // Mark for animation // Add shadows model.traverse((child) => { if (child instanceof THREE.Mesh) { child.castShadow = true; child.receiveShadow = true; } }); scene.add(model); }); } // Load center model centerPositions.forEach(pos => { fbxLoader.load('https://play.rosebud.ai/assets/model.fbx?FM0e', (model) => { model.scale.set(0.1, 0.1, 0.1); model.position.set(pos.x, 15, pos.z); model.rotation.y = pos.rotation; model.traverse((child) => { if (child instanceof THREE.Mesh) { child.castShadow = true; child.receiveShadow = true; } }); scene.add(model); }); }); // Load corner models cornerPositions.forEach(pos => { fbxLoader.load('https://play.rosebud.ai/assets/model 2.fbx?jYP3', (model) => { model.scale.set(0.15, 0.15, 0.15); // Smaller scale for corner models model.position.set(pos.x, 20, pos.z); model.rotation.y = pos.rotation; // Add shadows model.traverse((child) => { if (child instanceof THREE.Mesh) { child.castShadow = true; child.receiveShadow = true; } }); scene.add(model); }); }); // Add floating metallic model with animation fbxLoader.load('https://play.rosebud.ai/assets/metallic model.fbx?Y5JU', (model) => { model.scale.set(0.02, 0.02, 0.02); // Smaller scale model.position.set(0, 2, 0); // Start at camera height // Add shadows model.traverse((child) => { if (child instanceof THREE.Mesh) { child.castShadow = true; child.receiveShadow = true; } }); floatingMetallicModel = model; scene.add(model); }); // Load micro1 model fbxLoader.load('https://play.rosebud.ai/assets/micro1.fbx?AoLk', (model) => { model.scale.set(0.02, 0.02, 0.02); // Made it smaller model.position.set(-100, 3, -100); // Raised slightly higher model.rotation.y = Math.PI * 0.75; // Angled to face inward // Load and apply the Render1 texture const texture = textureLoader.load('https://play.rosebud.ai/assets/Render1.png?RWOR'); texture.encoding = THREE.sRGBEncoding; texture.flipY = false; // Often needed for FBX models // Apply texture to all meshes in the model model.traverse((child) => { if (child instanceof THREE.Mesh) { child.material = new THREE.MeshStandardMaterial({ map: texture, roughness: 0.4, // Decreased roughness for more shine metalness: 0.45, // Slightly increased metalness emissive: new THREE.Color(0x666666), // Slight glow emissiveIntensity: 0.15, // Subtle emission envMapIntensity: 1.2 // Increased environment reflection }); child.castShadow = true; child.receiveShadow = true; } }); scene.add(model); }); } // Create ceiling function createCeiling() { const size = 1000; // Much larger ceiling to match terrain const geometry = new THREE.PlaneGeometry(size, size); const texture = textureLoader.load('https://play.rosebud.ai/assets/pleasing.png?E6Ob'); texture.wrapS = texture.wrapT = THREE.RepeatWrapping; texture.repeat.set(250, 250); // Increased texture repetition to maintain density texture.encoding = THREE.sRGBEncoding; texture.magFilter = THREE.NearestFilter; texture.minFilter = THREE.NearestFilter; const material = new THREE.MeshStandardMaterial({ map: texture, roughness: 1.0, metalness: 0.0, envMapIntensity: 1.0, side: THREE.DoubleSide }); const ceiling = new THREE.Mesh(geometry, material); ceiling.rotation.x = Math.PI / 2; ceiling.position.y = 50; // Position the ceiling 50 units up ceiling.receiveShadow = true; scene.add(ceiling); return ceiling; } // Create a large ramp function createRamp() { const rampGroup = new THREE.Group(); // Create the main ramp surface const rampGeometry = new THREE.BoxGeometry(40, 2, 80); // Load circuit board texture const rampTexture = textureLoader.load('https://play.rosebud.ai/assets/top-view-circuit-board-close-up.jpg?Vp1q'); rampTexture.wrapS = rampTexture.wrapT = THREE.RepeatWrapping; rampTexture.repeat.set(2, 4); // Adjust the texture repeat for better coverage rampTexture.encoding = THREE.sRGBEncoding; const rampMaterial = new THREE.MeshStandardMaterial({ map: rampTexture, roughness: 0.6, // Slightly reduced roughness for a more tech look metalness: 0.4, // Increased metalness for circuit board shine envMapIntensity: 1.2 // Enhanced environment reflection }); const ramp = new THREE.Mesh(rampGeometry, rampMaterial); // Rotate and position the ramp // Rotate and position the ramp ramp.rotation.x = Math.PI * -0.15; // Approximately 27-degree angle ramp.position.set(-150, 10, -50); // Position near spawn point // Rotate texture to align with ramp rampTexture.rotation = Math.PI * 0.15; // Counter-rotate texture to align with ramp angle // Create support structure // Create support material (used for all structural elements) const structuralMaterial = new THREE.MeshStandardMaterial({ color: 0x606060, roughness: 0.7, metalness: 0.3 }); // Create back wall (taller than the ramp) const backWallGeometry = new THREE.BoxGeometry(40, 25, 2); const backWall = new THREE.Mesh(backWallGeometry, structuralMaterial); backWall.position.set(-150, 12.5, -10); // Position at the high end of the ramp // Create side walls that follow the ramp angle const sideWallGeometry = new THREE.BoxGeometry(2, 25, 82); // Left side wall const leftWall = new THREE.Mesh(sideWallGeometry, structuralMaterial); leftWall.position.set(-170, 12.5, -50); // Right side wall const rightWall = new THREE.Mesh(sideWallGeometry, structuralMaterial); rightWall.position.set(-130, 12.5, -50); // Create side rails const railGeometry = new THREE.BoxGeometry(1, 2, 82); const railMaterial = new THREE.MeshStandardMaterial({ color: 0xA0A0A0, roughness: 0.6, metalness: 0.4 }); // Left rail const leftRail = new THREE.Mesh(railGeometry, railMaterial); leftRail.position.set(-170, 12, -50); leftRail.rotation.x = Math.PI * -0.15; // Right rail const rightRail = new THREE.Mesh(railGeometry, railMaterial); rightRail.position.set(-130, 12, -50); rightRail.rotation.x = Math.PI * -0.15; // Add all parts to the ramp group rampGroup.add(ramp); rampGroup.add(backWall); rampGroup.add(leftWall); rampGroup.add(rightWall); rampGroup.add(leftRail); rampGroup.add(rightRail); // Enable shadows for all parts rampGroup.traverse((object) => { if (object instanceof THREE.Mesh) { object.castShadow = true; object.receiveShadow = true; } }); scene.add(rampGroup); return rampGroup; } // 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 = -500; sunLight.shadow.camera.right = 500; sunLight.shadow.camera.top = 500; sunLight.shadow.camera.bottom = -500; 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 stalagmites function createStalagmites() { const stalagmiteGroup = new THREE.Group(); const numStalagmites = 50; // Number of stalagmites to create for (let i = 0; i < numStalagmites; i++) { // Create stalagmite geometry with random height and radius const height = 5 + Math.random() * 15; // Height between 5 and 20 const radiusTop = 0.1; // Sharp top const radiusBottom = 1 + Math.random() * 2; // Base radius between 1 and 3 const segments = 8; // Octagonal shape const geometry = new THREE.CylinderGeometry( radiusTop, radiusBottom, height, segments, 4, // Height segments true // Open-ended ); // Create crystalline material // Load and configure circuit board texture const circuitTexture = textureLoader.load('https://play.rosebud.ai/assets/top-view-circuit-board-close-up.jpg?Vp1q'); circuitTexture.wrapS = circuitTexture.wrapT = THREE.RepeatWrapping; circuitTexture.repeat.set(2, 4); // Adjust texture tiling circuitTexture.encoding = THREE.sRGBEncoding; const material = new THREE.MeshStandardMaterial({ map: circuitTexture, metalness: 0.7, roughness: 0.3, emissive: 0x222222, emissiveIntensity: 0.3, side: THREE.DoubleSide }); const stalagmite = new THREE.Mesh(geometry, material); // Random position within map bounds (avoiding ramp area) let x, z; do { x = Math.random() * 800 - 400; // Range: -400 to 400 z = Math.random() * 800 - 400; // Range: -400 to 400 } while ( // Avoid ramp area (x > -170 && x < -130 && z > -90 && z < -10) || // Avoid slot machine area (x > -10 && x < 10 && z > -15 && z < 5) ); // Position and rotate slightly for natural look stalagmite.position.set(x, height / 2, z); stalagmite.rotation.y = Math.random() * Math.PI; stalagmite.rotation.x = (Math.random() - 0.5) * 0.2; // Slight tilt stalagmite.rotation.z = (Math.random() - 0.5) * 0.2; // Slight tilt // Enable shadows stalagmite.castShadow = true; stalagmite.receiveShadow = true; stalagmiteGroup.add(stalagmite); } scene.add(stalagmiteGroup); return stalagmiteGroup; } // Create initial scene const terrain = createTerrain(); const ceiling = createCeiling(); const stalagmites = createStalagmites(); const slotMachines = createSlotMachines(); const ramp = createRamp(); createModels(); // Animation loop function animate() { requestAnimationFrame(animate); if (assetsLoaded) { applyControls(); // Apply camera controls // Animate all floating models scene.traverse((object) => { if (object.userData.isFloatingModel) { const time = Date.now() * 0.001; // Rotate the model object.rotation.y += object.userData.rotationSpeed * 0.01; // Add floating motion object.position.y += Math.sin(time + object.userData.floatingOffset) * 0.05; } }); // Animate floating metallic model if (floatingMetallicModel) { const time = Date.now() * 0.001; // Current time in seconds const speed = 0.2; // Speed of motion const sideLength = 40; // Length of each side of the square // Calculate total path length and current position along the path const totalPathLength = 8 * sideLength; // Total perimeter const currentPos = (time * speed * sideLength) % totalPathLength; // Determine which side of the square we're on if (currentPos < sideLength * 2) { // Top side floatingMetallicModel.position.x = sideLength - currentPos; floatingMetallicModel.position.z = -sideLength; } else if (currentPos < sideLength * 4) { // Right side floatingMetallicModel.position.x = -sideLength; floatingMetallicModel.position.z = -sideLength + (currentPos - sideLength * 2); } else if (currentPos < sideLength * 6) { // Bottom side floatingMetallicModel.position.x = -sideLength + (currentPos - sideLength * 4); floatingMetallicModel.position.z = sideLength; } else { // Left side floatingMetallicModel.position.x = sideLength; floatingMetallicModel.position.z = sideLength - (currentPos - sideLength * 6); } floatingMetallicModel.position.y = 2; // Keep at camera height floatingMetallicModel.rotation.y += 0.01; // Continue rotating } } 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(); // ========================= // 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); // Define keysPressed object with standardized key names const keysPressed = { up: false, down: false, left: false, right: false, jump: false, sprint: false, }; // 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 'ShiftLeft': case 'ShiftRight': keysPressed.sprint = 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; default: break; } }); window.addEventListener('keyup', (event) => { switch (event.code) { case 'ArrowUp': case 'KeyW': keysPressed.up = false; break; case 'ShiftLeft': case 'ShiftRight': keysPressed.sprint = 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; default: break; } }); // ========================= // End of Mobile and Keyboard Controls Integration // ========================= // Function to apply controls based on keysPressed function applyControls() { const deltaTime = clock.getDelta(); // Reset horizontal velocity velocity.x = 0; velocity.z = 0; // Get player's current position for ramp check const playerX = camera.position.x; const playerZ = camera.position.z; // Ramp boundaries and properties const rampX = -150; // Ramp center X const rampZ = -50; // Ramp center Z const rampWidth = 40; const rampLength = 80; const rampAngle = Math.PI * 0.15; // 27 degrees // Handle WASD movement direction.z = Number(keysPressed.up) - Number(keysPressed.down); direction.x = Number(keysPressed.right) - Number(keysPressed.left); direction.normalize(); // Calculate speed boost based on ramp position const onRampX = Math.abs(playerX - rampX) < rampWidth / 2; const onRampZ = Math.abs(playerZ - rampZ) < rampLength / 2; const onRamp = onRampX && onRampZ; // Base speed with doubled sprint multiplier let currentSpeed = keysPressed.sprint ? moveSpeed * 5.0 : moveSpeed; // Apply ramp speed boost if (onRamp) { // Calculate boost based on position on the ramp (more boost higher up) const distanceFromRampStart = Math.abs(playerZ - (rampZ + rampLength / 2)); const rampProgress = 1 - (distanceFromRampStart / rampLength); // 0 at bottom, 1 at top const maxBoost = 2.5; // Maximum speed multiplier const boostMultiplier = 1 + (rampProgress * maxBoost); // Apply directional boost (more boost going down) if (keysPressed.up) { // Going up - smaller boost currentSpeed *= (1 + (rampProgress * 0.5)); } else if (keysPressed.down) { // Going down - larger boost currentSpeed *= boostMultiplier; } } // Apply movement with calculated speed if (keysPressed.up || keysPressed.down) { velocity.z = direction.z * currentSpeed; } if (keysPressed.left || keysPressed.right) { velocity.x = direction.x * currentSpeed; } // Apply horizontal movement controls.moveRight(velocity.x); controls.moveForward(velocity.z); // Handle jumping and vertical movement if (keysPressed.jump && isGrounded) { // Apply quadruple jump force when sprinting verticalVelocity = keysPressed.sprint ? jumpForce * 4 : jumpForce; isGrounded = false; } // Apply gravity verticalVelocity += gravity * deltaTime; // Update vertical position camera.position.y += verticalVelocity * deltaTime; // Already have onRampX, onRampZ, and onRamp from earlier calculations if (onRamp) { // Calculate height of ramp at player's position const distanceFromRampStart = Math.abs(playerZ - (rampZ + rampLength / 2)); const rampHeightAtPoint = Math.tan(rampAngle) * (rampLength - distanceFromRampStart); const minRampHeight = 2; // Base height const rampGroundLevel = Math.max(minRampHeight, rampHeightAtPoint); // Ground check for ramp if (camera.position.y <= rampGroundLevel) { camera.position.y = rampGroundLevel; verticalVelocity = 0; isGrounded = true; } } else { // Normal ground check if (camera.position.y <= 2) { camera.position.y = 2; verticalVelocity = 0; isGrounded = true; } } }