VR Horror Game

import * as THREE from 'three'; import { VRButton } from 'three/examples/jsm/webxr/VRButton.js'; import { setupMaze } from './maze.js'; import { playAmbience, playJumpscare } from './sound.js'; let camera, scene, renderer, controller; let playerCollider; let ghost, ghostDirection = 1; let jumpscareShown = false; let clock = new THREE.Clock(); function init() { scene = new THREE.Scene(); scene.background = new THREE.Color(0x050505); camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 100); camera.position.set(0, 1.6, 5); renderer = new THREE.WebGLRenderer({ antialias: true }); renderer.setSize(window.innerWidth, window.innerHeight); renderer.xr.enabled = true; document.body.appendChild(renderer.domElement); document.body.appendChild(VRButton.createButton(renderer)); // Maze setupMaze(scene); // Player collider playerCollider = new THREE.Mesh( new THREE.SphereGeometry(0.3, 8, 8), new THREE.MeshBasicMaterial({ visible: false }) ); playerCollider.position.copy(camera.position); scene.add(playerCollider); // Ghost ghost = new THREE.Mesh( new THREE.SphereGeometry(0.4, 16, 16), new THREE.MeshStandardMaterial({ color: 0xffffff, transparent: true, opacity: 0.7, emissive: 0xff0000 }) ); ghost.position.set(0, 1.6, -2); scene.add(ghost); // Light const ambient = new THREE.AmbientLight(0x222222); scene.add(ambient); const spot = new THREE.SpotLight(0xffffff, 1, 10, Math.PI / 6, 0.5, 2); spot.position.set(0, 3, 0); scene.add(spot); // Controller for VR movement controller = renderer.xr.getController(0); controller.addEventListener('selectstart', onSelectStart); scene.add(controller); window.addEventListener('resize', onWindowResize); playAmbience(); renderer.setAnimationLoop(render); } function onSelectStart() { // Move forward in the direction the camera is facing const dir = new THREE.Vector3(); camera.getWorldDirection(dir); dir.y = 0; dir.normalize(); camera.position.addScaledVector(dir, 0.5); playerCollider.position.copy(camera.position); } function onWindowResize() { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize(window.innerWidth, window.innerHeight); } function checkGhostCollision() { const dist = camera.position.distanceTo(ghost.position); if (dist < 0.7 && !jumpscareShown) { showJumpscare(); } } function moveGhost() { // Ghost moves back and forth in the maze ghost.position.z += ghostDirection * 0.01; if (ghost.position.z > 2 || ghost.position.z < -2) { ghostDirection *= -1; } } function showJumpscare() { jumpscareShown = true; document.getElementById('jumpscare').style.display = 'flex'; playJumpscare(); setTimeout(() => { document.getElementById('jumpscare').style.display = 'none'; jumpscareShown = false; // Reset player and ghost camera.position.set(0, 1.6, 5); playerCollider.position.copy(camera.position); ghost.position.set(0, 1.6, -2); }, 2000); } function render() { moveGhost(); checkGhostCollision(); renderer.render(scene, camera); } init(); import * as THREE from 'three'; export function setupMaze(scene) { // Floor const floor = new THREE.Mesh( new THREE.PlaneGeometry(10, 10), new THREE.MeshStandardMaterial({ color: 0x111111 }) ); floor.rotation.x = -Math.PI / 2; scene.add(floor); // Walls (simple maze) const wallMaterial = new THREE.MeshStandardMaterial({ color: 0x222222 }); const wallGeo = new THREE.BoxGeometry(0.2, 2, 4); const wall1 = new THREE.Mesh(wallGeo, wallMaterial); wall1.position.set(-2, 1, 0); scene.add(wall1); const wall2 = new THREE.Mesh(wallGeo, wallMaterial); wall2.position.set(2, 1, 0); scene.add(wall2); const wall3 = new THREE.Mesh(new THREE.BoxGeometry(4, 2, 0.2), wallMaterial); wall3.position.set(0, 1, -2); scene.add(wall3); const wall4 = new THREE.Mesh(new THREE.BoxGeometry(4, 2, 0.2), wallMaterial); wall4.position.set(0, 1, 2); scene.add(wall4); // Add some obstacles const boxGeo = new THREE.BoxGeometry(0.5, 0.5, 0.5); const boxMat = new THREE.MeshStandardMaterial({ color: 0x333333 }); for (let i = 0; i < 3; i++) { const box = new THREE.Mesh(boxGeo, boxMat); box.position.set(-1 + i * 1.5, 0.25, 0.5 - i); scene.add(box); } } // Simple sound system using HTML5 Audio let ambience, jumpscare; export function playAmbience() { if (!ambience) { ambience = new Audio('assets/ambience.mp3'); ambience.loop = true; ambience.volume = 0.3; } ambience.play(); } export function playJumpscare() { if (!jumpscare) { jumpscare = new Audio('assets/jumpscare.mp3'); jumpscare.volume = 1.0; } jumpscare.currentTime = 0; jumpscare.play(); } { "name": "vr-horror-game", "version": "1.0.0", "type": "module", "dependencies": { "three": "^0.153.0" } } Place your sound and image assets here: - ambience.mp3: Looping creepy background music. - jumpscare.mp3: Loud scary sound for jumpscare. - jumpscare.png: Scary image for jumpscare overlay. You can use your own files or find free horror sound effects and images online.