Creating Interactive VR Experiences with Three.js

Introduction

Creating interactive VR experiences can be incredibly rewarding, and Three.js makes it straightforward to build these experiences in the browser. This guide will walk you through the process of adding basic interactivity to a VR scene using Three.js and the WebXR API.

Prerequisites

Basic understanding of JavaScript
Familiarity with Three.js
Basic knowledge of VR concepts

Setting Up Your Project

Create Your Project Structure
Start by setting up a basic project directory:

mkdir interactive-vr-project
cd interactive-vr-project

Basic HTML Setup
Create an index.html file:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Interactive VR with Three.js</title>
    <style>
        body { margin: 0; }
        canvas { display: block; }
    </style>
</head>
<body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/vr/VRButton.js"></script>
    <script src="app.js"></script>
</body>
</html>

JavaScript Setup
Create an app.js file with the following content:

// Create the scene
const scene = new THREE.Scene();

// Set up the camera
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;

// Create the renderer
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// Add a cube
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

// Add VR button
document.body.appendChild(VRButton.createButton(renderer));

// Add VR controller
const controller1 = renderer.xr.getController(0);
const controller2 = renderer.xr.getController(1);
scene.add(controller1);
scene.add(controller2);

// Handle interactions
function handleController(controller) {
    const intersects = controller.intersectObject(cube);
    if (intersects.length > 0) {
        cube.material.color.set(0xff0000); // Change color on interaction
    }
}

renderer.setAnimationLoop(() => {
    handleController(controller1);
    handleController(controller2);
    renderer.render(scene, camera);
});

// Handle window resize
window.addEventListener('resize', () => {
    renderer.setSize(window.innerWidth, window.innerHeight);
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
});

Adding Interaction

Setting Up Controllers
In the code above, we’ve set up two VR controllers and added them to the scene.
Handling Interactions
The handleController function checks if a controller intersects with the cube. If so, it changes the cube’s color. This demonstrates how you can detect interactions and respond to them in your VR scene.

Testing Your VR Experience

Open your index.html file in a compatible browser (e.g., Chrome or Firefox).
Click the VR button to enter VR mode and use the controllers to interact with the cube.

Conclusion

You’ve learned how to set up a basic interactive VR experience with Three.js. This is a foundation you can build upon by adding more complex interactions, objects, and functionality to your VR scenes.

Leave a comment Cancel reply