import React, { useRef, useEffect, useState } from 'react'; import * as THREE from 'three'; import { VRButton } from 'three/addons/webxr/VRButton.js'; import { XRControllerModelFactory } from 'three/addons/webxr/XRControllerModelFactory.js'; import { Target } from 'Target'; import { Projectile } from 'Projectile'; export default function GameScene() { const [isVRSupported, setIsVRSupported] = useState(false); const mountRef = useRef(null); const sceneRef = useRef(null); const targetsRef = useRef([]); const projectilesRef = useRef([]); const scoreRef = useRef(0); useEffect(() => { let animationFrameId; const scene = new THREE.Scene(); sceneRef.current = scene; // Create starfield const starCount = 2000; const starGeometry = new THREE.BufferGeometry(); const starPositions = new Float32Array(starCount * 3); const starColors = new Float32Array(starCount * 3); for(let i = 0; i < starCount; i++) { const i3 = i * 3; // Position stars in a large sphere around the scene const radius = 50 + Math.random() * 50; const theta = Math.random() * Math.PI * 2; const phi = Math.random() * Math.PI; starPositions[i3] = radius * Math.sin(phi) * Math.cos(theta); starPositions[i3 + 1] = radius * Math.sin(phi) * Math.sin(theta); starPositions[i3 + 2] = radius * Math.cos(phi); // Random star colors (mostly white with hints of blue and purple) const colorChoice = Math.random(); if (colorChoice > 0.95) { starColors[i3] = 0.7 + Math.random() * 0.3; // R starColors[i3 + 1] = 0.7 + Math.random() * 0.3; // G starColors[i3 + 2] = 1.0; // B } else { starColors[i3] = 0.9 + Math.random() * 0.1; // R starColors[i3 + 1] = 0.9 + Math.random() * 0.1; // G starColors[i3 + 2] = 0.9 + Math.random() * 0.1; // B } } starGeometry.setAttribute('position', new THREE.BufferAttribute(starPositions, 3)); starGeometry.setAttribute('color', new THREE.BufferAttribute(starColors, 3)); const starMaterial = new THREE.PointsMaterial({ size: 0.15, vertexColors: true, transparent: true, opacity: 0.8 }); const starField = new THREE.Points(starGeometry, starMaterial); scene.add(starField); // Add orbital rings const createOrbitalRing = (radius, color) => { const ringGeometry = new THREE.RingGeometry(radius, radius + 0.1, 180); const ringMaterial = new THREE.MeshBasicMaterial({ color: color, side: THREE.DoubleSide, transparent: true, opacity: 0.3 }); const ring = new THREE.Mesh(ringGeometry, ringMaterial); ring.rotation.x = Math.PI / 2; return ring; }; const rings = [ createOrbitalRing(30, 0x00ff88), createOrbitalRing(35, 0xff0088), createOrbitalRing(40, 0x0088ff) ]; rings.forEach(ring => scene.add(ring)); // Camera setup const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); camera.position.z = 15; // Renderer setup const renderer = new THREE.WebGLRenderer({ antialias: true, powerPreference: "high-performance" }); renderer.setSize(window.innerWidth, window.innerHeight); renderer.setClearColor(0x000000); renderer.xr.enabled = true; // Enable better lighting renderer.toneMapping = THREE.ACESFilmicToneMapping; renderer.toneMappingExposure = 1.0; mountRef.current.appendChild(renderer.domElement); // Add VR button const vrButton = VRButton.createButton(renderer); document.body.appendChild(vrButton); // Check VR support // Raycaster for target detection const raycaster = new THREE.Raycaster(); raycaster.far = 100; // Increase ray distance const mouse = new THREE.Vector2(); // Mouse move handler const onMouseMove = (event) => { mouse.x = (event.clientX / window.innerWidth) * 2 - 1; mouse.y = -(event.clientY / window.innerHeight) * 2 + 1; camera.rotation.y = mouse.x * 0.5; camera.rotation.x = mouse.y * 0.5; }; // Fire projectile handler const onFire = (event) => { const controller = event.target; // Get controller position and direction const tempMatrix = new THREE.Matrix4(); tempMatrix.identity().extractRotation(controller.matrixWorld); const position = new THREE.Vector3(); position.setFromMatrixPosition(controller.matrixWorld); const direction = new THREE.Vector3(0, 0, -1); direction.applyMatrix4(tempMatrix); // Create and add projectile const projectile = new Projectile(position, direction); scene.add(projectile.mesh); scene.add(projectile.trail); projectilesRef.current.push(projectile); }; // Enhanced score display const updateScore = () => { const scoreElement = document.getElementById('score'); if (scoreElement) { scoreElement.textContent = `Score: ${scoreRef.current}`; } scoreDisplay.update(); }; navigator.xr?.isSessionSupported('immersive-vr').then(supported => { setIsVRSupported(supported); }); // Controller setup const controllerModelFactory = new XRControllerModelFactory(); // Create ray geometry for controllers const rayGeometry = new THREE.BufferGeometry().setFromPoints([ new THREE.Vector3(0, 0, 0), new THREE.Vector3(0, 0, -1) ]); // Setup right controller const controllerRight = renderer.xr.getController(0); controllerRight.name = 'right'; controllerRight.addEventListener('select', onFire); controllerRight.addEventListener('connected', (event) => { const grip = renderer.xr.getControllerGrip(0); grip.add(controllerModelFactory.createControllerModel(grip)); scene.add(grip); const ray = new THREE.Line(rayGeometry); ray.scale.z = 5; controllerRight.add(ray); }); scene.add(controllerRight); // Setup left controller const controllerLeft = renderer.xr.getController(1); controllerLeft.name = 'left'; controllerLeft.addEventListener('select', onFire); controllerLeft.addEventListener('connected', (event) => { const grip = renderer.xr.getControllerGrip(1); grip.add(controllerModelFactory.createControllerModel(grip)); scene.add(grip); const ray = new THREE.Line(rayGeometry); ray.scale.z = 5; controllerLeft.add(ray); }); scene.add(controllerLeft); // Create score display in 3D space const createScoreSprite = () => { const canvas = document.createElement('canvas'); canvas.width = 256; canvas.height = 128; const context = canvas.getContext('2d'); const updateScoreTexture = () => { context.clearRect(0, 0, canvas.width, canvas.height); context.fillStyle = '#00ff88'; context.font = 'bold 48px Arial'; context.textAlign = 'center'; context.textBaseline = 'middle'; context.fillText(`Score: ${scoreRef.current}`, canvas.width/2, canvas.height/2); // Add glow effect context.shadowColor = '#00ff88'; context.shadowBlur = 20; context.fillText(`Score: ${scoreRef.current}`, canvas.width/2, canvas.height/2); scoreTexture.needsUpdate = true; }; const scoreTexture = new THREE.CanvasTexture(canvas); const scoreMaterial = new THREE.SpriteMaterial({ map: scoreTexture, transparent: true, opacity: 0.8 }); const scoreSprite = new THREE.Sprite(scoreMaterial); scoreSprite.scale.set(2, 1, 1); scene.add(scoreSprite); return { sprite: scoreSprite, update: updateScoreTexture }; }; const scoreDisplay = createScoreSprite(); // Enhanced lighting const ambientLight = new THREE.AmbientLight(0x111111); scene.add(ambientLight); // Main spot light with softer values const spotLight = new THREE.SpotLight(0x8800ff, 1.5); spotLight.position.set(0, 10, 10); spotLight.angle = Math.PI / 4; spotLight.penumbra = 0.3; spotLight.decay = 1.5; scene.add(spotLight); // Add multiple rotating lights const colors = [0xff0088, 0x00ff88, 0x0088ff]; const lights = colors.map((color, i) => { const light = new THREE.PointLight(color, 1, 20); light.position.set( Math.cos(i * Math.PI * 2 / 3) * 10, Math.sin(i * Math.PI * 2 / 3) * 10, 0 ); scene.add(light); return light; }); // Game state tracking const gameState = { targetsDestroyed: 0, difficultyMultiplier: 1 }; // Create targets const createTarget = (position, difficulty) => { const target = new Target(position, difficulty); scene.add(target.group); target.scene = scene; return target; }; // Initial target creation for (let i = 0; i < 10; i++) { const position = new THREE.Vector3( Math.random() * 20 - 10, Math.random() * 20 - 10, -Math.random() * 10 - 5 ); targetsRef.current.push(createTarget(position, gameState.difficultyMultiplier)); } // Function to respawn a target const respawnTarget = (target) => { // Increase difficulty based on targets destroyed, but more gradually gameState.targetsDestroyed++; gameState.difficultyMultiplier = 1 + (gameState.targetsDestroyed * 0.05); const newPosition = new THREE.Vector3( Math.random() * 20 - 10, Math.random() * 20 - 10, -Math.random() * 10 - 5 ); target.reset(newPosition, gameState.difficultyMultiplier); }; // Animation loop const animate = () => { renderer.setAnimationLoop((time, frame) => { // Rotate starfield slowly starField.rotation.y += 0.0001; // Animate orbital rings rings.forEach((ring, i) => { ring.rotation.z = (time * 0.0001) + (i * Math.PI / 4); }); // Update score sprite position relative to camera if (frame) { // VR Mode - position score in front of head const pose = frame.getViewerPose(renderer.xr.getReferenceSpace()); if (pose) { const view = pose.views[0]; scoreDisplay.sprite.position.set(0, 0.2, -2); scoreDisplay.sprite.quaternion.copy(camera.quaternion); } } else { // Regular mode - position score in front of camera const vector = new THREE.Vector3(0, 0.2, -2); vector.applyQuaternion(camera.quaternion); vector.add(camera.position); scoreDisplay.sprite.position.copy(vector); scoreDisplay.sprite.quaternion.copy(camera.quaternion); } // Update and check projectiles projectilesRef.current = projectilesRef.current.filter(projectile => { if (!projectile.alive) { scene.remove(projectile.mesh); scene.remove(projectile.trail); return false; } projectile.update(); // Check for collisions const hitTarget = projectile.checkCollision(targetsRef.current); if (hitTarget) { const targetDestroyed = hitTarget.hit(); if (targetDestroyed) { scoreRef.current += 300; // Bonus points for destroying target respawnTarget(hitTarget); } else { scoreRef.current += 100; // Points for hitting target } updateScore(); } return true; }); // Rotate lights lights.forEach((light, i) => { const time = Date.now() * 0.001; light.position.x = Math.cos(time + i * Math.PI * 2 / 3) * 10; light.position.y = Math.sin(time + i * Math.PI * 2 / 3) * 10; }); // Update targets targetsRef.current.forEach(target => target.update()); renderer.render(scene, camera); }); }; // Start animation animate(); // Cleanup return () => { window.removeEventListener('mousemove', onMouseMove); window.removeEventListener('click', onFire); // The 'connected' event listeners are not removed as they are tied // to the controller's lifecycle within the XR session. // Re-adding them in a new session is the intended behavior. if (controllerRight) controllerRight.removeEventListener('select', onFire); if (controllerLeft) controllerLeft.removeEventListener('select', onFire); renderer.setAnimationLoop(null); document.body.removeChild(vrButton); mountRef.current.removeChild(renderer.domElement); scene.traverse((object) => { if (object.geometry) object.geometry.dispose(); if (object.material) object.material.dispose(); }); renderer.dispose(); }; }, []); return ( <>

{!isVRSupported && (

WebVR is not supported in your browser

)}

{/* Regular score display for non-VR mode */}

Score: 0

); }

Other games like this

About FPS Target Blaster VR