import * as THREE from 'three'; 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 loading manager const loadingManager = new THREE.LoadingManager(); const textureLoader = new THREE.TextureLoader(loadingManager); let assetsLoaded = false; 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); // Initialize background music variable let backgroundMusic; // 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 and play background music backgroundMusic = new Audio('https://play.rosebud.ai/assets/rosebud_official_theme_02.mp3?GW5p'); backgroundMusic.loop = true; backgroundMusic.volume = 0.04; // Adjust volume as needed (0.0 to 1.0) // Attempt to play the music. Note: Some browsers may require user interaction to play audio. backgroundMusic.play().catch((error) => { console.warn('Autoplay was prevented. User interaction is required to play the background music.'); }); }; loadingManager.onError = function(url) { console.error('Error loading:', url); }; // Initialize the scene const scene = new THREE.Scene(); scene.fog = new THREE.FogExp2(0x0a1a2a, 0.035); const world = new CANNON.World(); world.gravity.set(0, -30, 0); // Increased gravity for more grounded feel world.defaultContactMaterial.contactEquationStiffness = 1e8; world.defaultContactMaterial.contactEquationRelaxation = 3; // Player variables let playerBody; let canJump = false; let moveForward = false; let moveBackward = false; let moveLeft = false; let moveRight = false; let playerDirection = new THREE.Vector3(); // Gun variables let gunMesh; let playerLight; let isDead = false; let splitTimer = 0; let deathScreen = null; let gunSound = new Audio('https://play.rosebud.ai/assets/369528__johandeecke__short-gunshot.wav?7Emf'); let reloadSound = new Audio('https://play.rosebud.ai/assets/764518__awarner__ar15-airsoft-gun-reload.wav?qXos'); let ammo = 6; let isReloading = false; let canShoot = true; let lastShootTime = 0; let reloadTimeout; let gunBobbing = { time: 0, intensity: 0.015, // Reduced intensity for subtler effect currentOffset: { x: 0, y: 0 } }; world.defaultContactMaterial.friction = 0.01; world.defaultContactMaterial.restitution = 0; world.solver.iterations = 10; world.solver.tolerance = 0.001; // 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 ); // Set initial camera position for first person view camera.position.set(0, 1.7, 0); // Create player physics body const playerShape = new CANNON.Box(new CANNON.Vec3(0.3, 0.9, 0.3)); playerBody = new CANNON.Body({ mass: 5, position: new CANNON.Vec3(0, 2, 0), material: new CANNON.Material(), linearDamping: 0.3, // Reduced damping for more sliding fixedRotation: true, allowSleep: false }); playerBody.addShape(playerShape); playerBody.fixedRotation = true; world.addBody(playerBody); // Create gun mesh const gunGeometry = new THREE.PlaneGeometry(0.5, 0.7); const gunTexture = textureLoader.load('https://play.rosebud.ai/assets/pewpew.png?jG3R'); const gunMaterial = new THREE.MeshStandardMaterial({ map: gunTexture, transparent: true, side: THREE.DoubleSide, metalness: 0.3, roughness: 0.7 }); gunMesh = new THREE.Mesh(gunGeometry, gunMaterial); gunMesh.position.set(0.4, -0.4, -0.8); camera.add(gunMesh); scene.add(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(0x0a1a2a); // Dark blue sky const groundColor = new THREE.Color(0x080808); // Very dark 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); // Mouse look controls let euler = new THREE.Euler(0, 0, 0, 'YXZ'); let velocity = new THREE.Vector3(); let moveSpeed = 15; // Doubled the speed let currentVelocity = new THREE.Vector3(); // Pointer lock setup const blocker = document.getElementById('blocker') || document.createElement('div'); blocker.id = 'blocker'; blocker.style.position = 'absolute'; blocker.style.width = '100%'; blocker.style.height = '100%'; blocker.style.backgroundColor = 'rgba(0,0,0,0.5)'; blocker.style.display = 'flex'; blocker.style.justifyContent = 'center'; blocker.style.alignItems = 'center'; blocker.innerHTML = '

Click to play

'; parentDiv.appendChild(blocker); // Create death screen deathScreen = document.createElement('div'); deathScreen.style.position = 'absolute'; deathScreen.style.width = '100%'; deathScreen.style.height = '100%'; deathScreen.style.backgroundColor = 'rgba(139, 0, 0, 0.7)'; deathScreen.style.color = 'white'; deathScreen.style.fontSize = '36px'; deathScreen.style.display = 'none'; deathScreen.style.justifyContent = 'center'; deathScreen.style.alignItems = 'center'; deathScreen.style.flexDirection = 'column'; deathScreen.innerHTML = `

You got split in half!

Click to respawn

`; parentDiv.appendChild(deathScreen); // Add ammo display const ammoDisplay = document.createElement('div'); ammoDisplay.style.position = 'absolute'; ammoDisplay.style.bottom = '20px'; ammoDisplay.style.right = '20px'; ammoDisplay.style.color = 'white'; ammoDisplay.style.fontSize = '24px'; ammoDisplay.style.fontFamily = 'Arial'; ammoDisplay.style.textShadow = '2px 2px 2px black'; parentDiv.appendChild(ammoDisplay); // Add reload message const reloadMessage = document.createElement('div'); reloadMessage.style.position = 'absolute'; reloadMessage.style.top = '50%'; reloadMessage.style.left = '50%'; reloadMessage.style.transform = 'translate(-50%, -50%)'; reloadMessage.style.color = 'white'; reloadMessage.style.fontSize = '24px'; reloadMessage.style.fontFamily = 'Arial'; reloadMessage.style.textShadow = '2px 2px 2px black'; reloadMessage.style.display = 'none'; reloadMessage.textContent = 'Reloading...'; parentDiv.appendChild(reloadMessage); // Add crosshair const crosshair = document.createElement('div'); crosshair.style.position = 'absolute'; crosshair.style.top = '50%'; crosshair.style.left = '50%'; crosshair.style.width = '20px'; crosshair.style.height = '20px'; crosshair.style.transform = 'translate(-50%, -50%)'; crosshair.style.border = '2px solid white'; crosshair.style.borderRadius = '50%'; crosshair.style.pointerEvents = 'none'; parentDiv.appendChild(crosshair); // Pointer lock event listeners document.addEventListener('click', function(event) { if (!document.pointerLockElement) { document.body.requestPointerLock(); } else { shoot(); } }); document.addEventListener('pointerlockchange', function() { if (document.pointerLockElement) { blocker.style.display = 'none'; } else { blocker.style.display = 'flex'; } }); // Create flat terrain function createTerrain() { const size = 200; // Create simple flat plane for visuals const geometry = new THREE.PlaneGeometry(size, size); const texture = textureLoader.load('https://play.rosebud.ai/assets/floor.jpg?i1X6'); texture.wrapS = texture.wrapT = THREE.RepeatWrapping; texture.repeat.set(50, 50); texture.encoding = THREE.sRGBEncoding; const material = new THREE.MeshStandardMaterial({ map: texture, roughness: 0.9, metalness: 0.2, envMapIntensity: 0.5, color: 0x888888, emissive: 0x222222 }); const terrain = new THREE.Mesh(geometry, material); terrain.rotation.x = -Math.PI / 2; 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.1, 0); world.addBody(groundBody); return terrain; } // Setup improved lighting system const sunLight = new THREE.DirectionalLight(0x444444, 0.5); 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.2); scene.add(hemiLight); // Create player flashlight playerLight = new THREE.SpotLight(0xFFD700, 2.5, 30, Math.PI / 6, 0.5, 1); playerLight.castShadow = true; playerLight.shadow.mapSize.width = 512; playerLight.shadow.mapSize.height = 512; playerLight.shadow.camera.near = 0.1; playerLight.shadow.camera.far = 30; // Add light to gun gunMesh.add(playerLight); playerLight.position.set(0, 0, 0.5); playerLight.target.position.set(0, 0, -1); gunMesh.add(playerLight.target); // Create initial scene const terrain = createTerrain(); // Create rocks function createRock(position) { const rockGeometry = new THREE.PlaneGeometry(3, 3); const rockTexture = textureLoader.load('https://play.rosebud.ai/assets/rock.png?zIp6'); const rockMaterial = new THREE.MeshStandardMaterial({ map: rockTexture, transparent: true, side: THREE.DoubleSide, metalness: 0.2, roughness: 0.8, envMapIntensity: 1.5 }); const rock = new THREE.Mesh(rockGeometry, rockMaterial); rock.position.copy(position); rock.rotation.y = Math.random() * Math.PI * 2; rock.castShadow = true; rock.receiveShadow = true; // Add physics const rockShape = new CANNON.Box(new CANNON.Vec3(1.5, 1.5, 0.1)); const rockBody = new CANNON.Body({ mass: 0, material: groundPhysMaterial }); rockBody.addShape(rockShape); rockBody.position.copy(position); rockBody.quaternion.setFromAxisAngle(new CANNON.Vec3(1, 0, 0), -Math.PI / 2); world.addBody(rockBody); scene.add(rock); } // Add rocks around the map const rockPositions = [ new THREE.Vector3(10, 0, 10), new THREE.Vector3(-15, 0, -8), new THREE.Vector3(8, 0, -12), new THREE.Vector3(-10, 0, 15), new THREE.Vector3(20, 0, -5), new THREE.Vector3(-18, 0, 5), new THREE.Vector3(5, 0, -20) ]; rockPositions.forEach(position => createRock(position)); function animate() { requestAnimationFrame(animate); const deltaTime = Math.min(clock.getDelta(), 0.1); if (assetsLoaded) { world.step(deltaTime); if (document.pointerLockElement && !isDead) { // Update velocity velocity.x = 0; velocity.z = 0; const direction = new THREE.Vector3(); camera.getWorldDirection(direction); // Calculate forward and right vectors const forward = new THREE.Vector3(direction.x, 0, direction.z).normalize(); const right = new THREE.Vector3().crossVectors(forward, new THREE.Vector3(0, 1, 0)); // Reset velocity velocity.set(0, 0, 0); // Add movement in the correct directions if (moveForward) velocity.add(forward.multiplyScalar(moveSpeed)); if (moveBackward) velocity.add(forward.multiplyScalar(-moveSpeed)); if (moveLeft) velocity.add(right.multiplyScalar(-moveSpeed)); if (moveRight) velocity.add(right.multiplyScalar(moveSpeed)); // Smooth velocity transition const smoothFactor = 0.25; // Increased for more responsive movement currentVelocity.x += (velocity.x - currentVelocity.x) * smoothFactor; currentVelocity.z += (velocity.z - currentVelocity.z) * smoothFactor; // Update player physics body with smoothed velocity playerBody.velocity.x = currentVelocity.x; playerBody.velocity.z = currentVelocity.z; // Dampen vertical velocity when grounded if (canJump && Math.abs(playerBody.velocity.y) < 0.1) { playerBody.velocity.y = 0; } // Update camera position to follow physics body camera.position.copy(playerBody.position); camera.position.y += 1.7; // Head height // Gun bobbing effect while moving if (moveForward || moveBackward || moveLeft || moveRight) { gunBobbing.time += deltaTime * 7; const targetY = -0.4 + Math.sin(gunBobbing.time) * gunBobbing.intensity; const targetX = 0.4 + Math.cos(gunBobbing.time) * gunBobbing.intensity * 0.5; // Smooth gun movement gunBobbing.currentOffset.y += (targetY - (-0.4 + gunBobbing.currentOffset.y)) * 0.15; gunBobbing.currentOffset.x += (targetX - (0.4 + gunBobbing.currentOffset.x)) * 0.15; gunMesh.position.y = -0.4 + gunBobbing.currentOffset.y; gunMesh.position.x = 0.4 + gunBobbing.currentOffset.x; } else { // Return to neutral position smoothly when not moving gunBobbing.currentOffset.y *= 0.85; gunBobbing.currentOffset.x *= 0.85; gunMesh.position.y = -0.4 + gunBobbing.currentOffset.y; gunMesh.position.x = 0.4 + gunBobbing.currentOffset.x; } } // Update ammo display ammoDisplay.textContent = `Ammo: ${ammo}${isReloading ? ' (Reloading)' : ''}`; } composer.render(); } // Shooting function function shoot() { if (!canShoot || isReloading || ammo <= 0) return; const now = performance.now(); if (now - lastShootTime < 700) return; // 0.7s cooldown lastShootTime = now; ammo--; // Play gun sound gunSound.currentTime = 0; // Reset sound to start gunSound.play(); // Gun recoil effect const recoilAmount = 0.05; gunMesh.position.z += recoilAmount; setTimeout(() => { gunMesh.position.z -= recoilAmount; }, 50); // Create raycaster for hit detection const raycaster = new THREE.Raycaster(); raycaster.setFromCamera(new THREE.Vector2(0, 0), camera); // Check for hits const intersects = raycaster.intersectObjects(scene.children, true); if (intersects.length > 0) { const hit = intersects[0]; if (hit.object.isShootable) { hit.object.damage(10); // Apply damage if object has damage function } } // Auto reload when empty if (ammo <= 0) { reload(); } } // Reload function function reload() { if (isReloading || ammo === 6) return; isReloading = true; reloadMessage.style.display = 'block'; // Play reload sound reloadSound.currentTime = 0; // Reset sound to start reloadSound.play(); // Disable shooting during reload canShoot = false; // Clear any existing reload timeout if (reloadTimeout) { clearTimeout(reloadTimeout); } // Start reload timer reloadTimeout = setTimeout(() => { ammo = 6; isReloading = false; canShoot = true; reloadMessage.style.display = 'none'; }, 3000); // 3 second reload time } // 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 movement handler document.addEventListener('mousemove', function(event) { if (document.pointerLockElement) { euler.setFromQuaternion(camera.quaternion); euler.y -= event.movementX * 0.002; euler.x -= event.movementY * 0.002; euler.x = Math.max(-Math.PI / 2, Math.min(Math.PI / 2, euler.x)); camera.quaternion.setFromEuler(euler); } }); // Keyboard controls document.addEventListener('keydown', function(event) { if (event.code === 'KeyR') { reload(); } switch (event.code) { case 'KeyW': moveForward = true; moveBackward = false; // Cancel S when W is pressed break; case 'KeyS': moveBackward = true; moveForward = false; // Cancel W when S is pressed break; case 'KeyA': moveLeft = true; moveRight = false; // Cancel D when A is pressed break; case 'KeyD': moveRight = true; moveLeft = false; // Cancel A when D is pressed break; case 'Space': if (canJump) { playerBody.velocity.y = 8; canJump = false; } break; } }); document.addEventListener('keyup', function(event) { switch (event.code) { case 'KeyW': moveForward = false; break; case 'KeyS': moveBackward = false; break; case 'KeyA': moveLeft = false; break; case 'KeyD': moveRight = false; break; } }); // Contact material for player and ground const playerGroundContact = new CANNON.ContactMaterial( playerBody.material, groundPhysMaterial, { friction: 0.01, // Reduced friction for sliding restitution: 0.0, contactEquationStiffness: 1e8, contactEquationRelaxation: 3, contactEquationRegularizationTime: 3 } ); world.addContactMaterial(playerGroundContact); // Contact detection for jumping playerBody.addEventListener('collide', function(event) { const contact = event.contact; const normalY = contact.ni.y; if (Math.abs(normalY) > 0.5) { canJump = true; } }); // Start animation animate(); // Player death function function playerDeath() { isDead = true; deathScreen.style.display = 'flex'; document.exitPointerLock(); // Reset player position and movement playerBody.position.set(0, 2, 0); playerBody.velocity.set(0, 0, 0); moveForward = false; moveBackward = false; moveLeft = false; moveRight = false; splitTimer = 0; } // Handle death screen click to respawn deathScreen.addEventListener('click', function() { if (isDead) { isDead = false; deathScreen.style.display = 'none'; document.body.requestPointerLock(); } });