VR 80s Arcade Room

Okay, let's set up the 80s VR arcade room. This setup includes VR support using WebXR, basic room geometry, a placeholder arcade cabinet, lighting, and VR locomotion (joystick movement and snap turning). Note: This example uses basic geometry and materials as placeholders for detailed models and textures. You would replace these with loaded GLTF models and image textures for a complete look. VR 80s Arcade Room

VR Arcade Room - Use Joysticks to Move/Turn

body { margin: 0; overflow: hidden; background-color: #000; color: #fff; font-family: monospace; } canvas { display: block; } #info { position: absolute; top: 10px; width: 100%; text-align: center; z-index: 100; display: block; color: white; font-size: 16px; } /* Style for VR Button */ #VRButton { position: absolute; bottom: 20px; right: 20px; z-index: 101; border: 1px solid #fff; border-radius: 4px; background: rgba(0,0,0,0.5); color: #fff; padding: 10px 20px; font: 13px sans-serif; cursor: pointer; } import * as THREE from 'three'; import { VRButton } from 'three/addons/webxr/VRButton.js'; import { VRControllerInput } from './VRControllerInput.js'; let camera, scene, renderer; let player; // Group to represent the player rig (camera parent) let vrControllerInput; const clock = new THREE.Clock(); init(); function init() { // Scene scene = new THREE.Scene(); scene.background = new THREE.Color(0x101010); // Dark background // Camera camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 0.1, 100); camera.position.set(0, 1.6, 0); // Initial height, position adjusted by player group // Player Rig player = new THREE.Group(); player.position.set(0, 0, 5); // Start position in the room player.add(camera); scene.add(player); // Renderer renderer = new THREE.WebGLRenderer({ antialias: true }); renderer.setSize(window.innerWidth, window.innerHeight); renderer.setPixelRatio(window.devicePixelRatio); renderer.xr.enabled = true; renderer.xr.setReferenceSpaceType('local-floor'); // Use floor-level tracking document.body.appendChild(renderer.domElement); // VR Button document.body.appendChild(VRButton.createButton(renderer)); // Lighting const ambientLight = new THREE.AmbientLight(0x404040, 0.5); // Soft ambient light scene.add(ambientLight); const pointLight = new THREE.PointLight(0xff00ff, 1, 15); // Neon pink light pointLight.position.set(-3, 2.5, -3); scene.add(pointLight); const spotLight = new THREE.SpotLight(0x00ffff, 2, 10, Math.PI / 6, 0.5); // Cyan spotlight on cabinet spotLight.position.set(0, 4, 1); spotLight.target.position.set(0, 0, 0); // Target the cabinet area scene.add(spotLight); scene.add(spotLight.target); // Important: Add target to scene // Room Geometry createRoom(); // Arcade Cabinet (Placeholder) createArcadeCabinet(); // VR Controllers Input Handling vrControllerInput = new VRControllerInput(renderer, player); // Handle window resize window.addEventListener('resize', onWindowResize); // Start animation loop renderer.setAnimationLoop(animate); } function createRoom() { // Floor const floorGeometry = new THREE.PlaneGeometry(10, 10); // Basic checkered pattern material const floorMaterial = new THREE.MeshStandardMaterial({ color: 0x888888, roughness: 0.8, metalness: 0.2, side: THREE.DoubleSide // Render both sides }); // Simple color for now, replace with texture later // const floorMaterial = new THREE.MeshStandardMaterial({ color: 0x444444, side: THREE.DoubleSide }); const floor = new THREE.Mesh(floorGeometry, floorMaterial); floor.rotation.x = -Math.PI / 2; scene.add(floor); // Walls (using a Box for simplicity, could use Planes) const wallMaterial = new THREE.MeshStandardMaterial({ color: 0x333333, roughness: 0.9, side: THREE.BackSide // Render interior }); const roomGeometry = new THREE.BoxGeometry(10, 5, 10); const room = new THREE.Mesh(roomGeometry, wallMaterial); room.position.y = 2.5; // Center the room vertically scene.add(room); // Add some neon lines (simple glowing tubes) const tubeGeo = new THREE.CylinderGeometry(0.05, 0.05, 10, 8); const tubeMatPink = new THREE.MeshBasicMaterial({ color: 0xff00ff }); const tubeMatCyan = new THREE.MeshBasicMaterial({ color: 0x00ffff }); const tube1 = new THREE.Mesh(tubeGeo, tubeMatPink); tube1.position.set(-4.9, 4.8, 0); tube1.rotation.z = Math.PI / 2; scene.add(tube1); const tube2 = new THREE.Mesh(tubeGeo, tubeMatCyan); tube2.position.set(4.9, 0.2, 0); tube2.rotation.z = Math.PI / 2; scene.add(tube2); } function createArcadeCabinet() { // Placeholder geometry for the cabinet const cabinetGroup = new THREE.Group(); const baseGeo = new THREE.BoxGeometry(1, 1.2, 0.8); const baseMat = new THREE.MeshStandardMaterial({ color: 0x222222, roughness: 0.5 }); const base = new THREE.Mesh(baseGeo, baseMat); base.position.y = 0.6; cabinetGroup.add(base); const topGeo = new THREE.BoxGeometry(1, 0.6, 0.8); const topMat = new THREE.MeshStandardMaterial({ color: 0x1a1a1a, roughness: 0.6 }); const top = new THREE.Mesh(topGeo, topMat); top.position.y = 1.5; top.position.z = -0.1; // Slight slant top.rotation.x = Math.PI / 12; // Slant the top part cabinetGroup.add(top); // Screen (emissive material) const screenGeo = new THREE.PlaneGeometry(0.7, 0.4); const screenMat = new THREE.MeshBasicMaterial({ color: 0x00ff00 }); // Glowing green screen const screen = new THREE.Mesh(screenGeo, screenMat); screen.position.set(0, 1.5, 0.31); // Position on the slanted top front screen.rotation.x = Math.PI / 12; // Match slant cabinetGroup.add(screen); cabinetGroup.position.set(0, 0, 0); // Place cabinet at the origin scene.add(cabinetGroup); } function onWindowResize() { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize(window.innerWidth, window.innerHeight); } function animate() { const delta = clock.getDelta(); // Update VR controller input (movement/turning) if (renderer.xr.isPresenting) { vrControllerInput.update(delta); } // Render the scene renderer.render(scene, camera); } import * as THREE from 'three'; const SNAP_TURN_THRESHOLD = 0.8; const MOVEMENT_SPEED = 2.0; // meters per second const SNAP_TURN_ANGLE = THREE.MathUtils.degToRad(30); // 30 degrees snap turn export class VRControllerInput { constructor(renderer, playerGroup) { this.renderer = renderer; this.player = playerGroup; // The Group containing the camera to move/rotate this.controller1 = renderer.xr.getController(0); // Typically left this.controller2 = renderer.xr.getController(1); // Typically right this.moveAxes = new THREE.Vector2(); this.turnAxis = 0; this.snapTurnCoolDown = 0; // Cooldown timer for snap turning this.snapTurnCoolDownTime = 0.3; // Seconds this._setupEventListeners(); } _setupEventListeners() { // --- Controller 1 (Movement) --- this.controller1.addEventListener('connected', (event) => { console.log('Controller 1 Connected:', event.data.handedness); // You might want to check handedness and swap if needed }); this.controller1.addEventListener('disconnected', () => { console.log('Controller 1 Disconnected'); }); this.controller1.addEventListener('axeschanged', (event) => { // Assuming standard thumbstick layout (axes 2 and 3) if (event.axes.length >= 4) { this.moveAxes.set(event.axes[2], event.axes[3]); } else { this.moveAxes.set(0,0); // Reset if axes not available } }); // --- Controller 2 (Turning) --- this.controller2.addEventListener('connected', (event) => { console.log('Controller 2 Connected:', event.data.handedness); }); this.controller2.addEventListener('disconnected', () => { console.log('Controller 2 Disconnected'); }); this.controller2.addEventListener('axeschanged', (event) => { // Assuming standard thumbstick layout (axis 2 for horizontal) if (event.axes.length >= 3) { this.turnAxis = event.axes[2]; } else { this.turnAxis = 0; // Reset if axis not available } }); } update(delta) { this.snapTurnCoolDown = Math.max(0, this.snapTurnCoolDown - delta); // --- Movement --- if (this.moveAxes.length() > 0.1) { // Add a deadzone const moveSpeed = MOVEMENT_SPEED * delta; const forward = new THREE.Vector3(0, 0, -1); const right = new THREE.Vector3(1, 0, 0); // Get camera's world direction (excluding vertical component) const cameraDirection = new THREE.Vector3(); this.renderer.xr.getCamera().getWorldDirection(cameraDirection); cameraDirection.y = 0; // Project onto XZ plane cameraDirection.normalize(); // Calculate forward/backward movement vector based on camera direction const moveZ = forward.clone().multiplyScalar(this.moveAxes.y); moveZ.applyQuaternion(this.player.quaternion); // Align with player's rotation first // This part is tricky - we want movement relative to VIEW direction, not player body direction // Let's try moving along the camera's projected direction const forwardMove = cameraDirection.clone().multiplyScalar(-this.moveAxes.y * moveSpeed); // Negative Y is forward on thumbstick // Calculate strafe movement vector const rightDirection = new THREE.Vector3().crossVectors(new THREE.Vector3(0,1,0), cameraDirection).normalize(); const strafeMove = rightDirection.clone().multiplyScalar(this.moveAxes.x * moveSpeed); // Apply movement to the player group this.player.position.add(forwardMove); this.player.position.add(strafeMove); } // --- Snap Turning --- if (this.snapTurnCoolDown === 0) { if (this.turnAxis > SNAP_TURN_THRESHOLD) { this.player.rotateY(-SNAP_TURN_ANGLE); // Rotate player group right this.snapTurnCoolDown = this.snapTurnCoolDownTime; } else if (this.turnAxis < -SNAP_TURN_THRESHOLD) { this.player.rotateY(SNAP_TURN_ANGLE); // Rotate player group left this.snapTurnCoolDown = this.snapTurnCoolDownTime; } } } }