Getting Started with Three.js and WebXR

Introduction

Three.js is a powerful JavaScript library that makes it easy to create and render 3D graphics in the browser. WebXR is an API that allows you to create immersive virtual and augmented reality experiences. This guide will walk you through the basics of integrating Three.js with WebXR to build VR and AR applications.

Prerequisites

Basic knowledge of JavaScript
Familiarity with Three.js
Understanding of HTML and CSS

Setting Up Your Project

Create Your Project Directory
Create a new directory for your project and navigate into it:

mkdir my-threejs-xr-project
cd my-threejs-xr-project

Initialize a Basic HTML File
Create an index.html file with the following content:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Three.js and WebXR</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/@webxr/aframe@1.2.0/dist/aframe.min.js"></script>
    <script src="app.js"></script>
</body>
</html>

Set Up Your JavaScript File
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);

// Animation loop
function animate() {
    requestAnimationFrame(animate);
    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;
    renderer.render(scene, camera);
}
animate();

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

Integrating WebXR

Set Up WebXR
To enable WebXR, add the following code to your app.js:

const controller1 = renderer.xr.getController(0);
const controller2 = renderer.xr.getController(1);
scene.add(controller1);
scene.add(controller2);

renderer.xr.enabled = true;

Add VR Button
Include the VR button to start the VR experience:

document.body.appendChild(VRButton.createButton(renderer));

Testing Your Application

Open your index.html file in a modern browser that supports WebXR, such as Google Chrome or Firefox.
Click the VR button to enter VR mode.

Conclusion

You’ve successfully set up a basic Three.js project integrated with WebXR. You can now start experimenting with more advanced features and create immersive VR and AR experiences.

Leave a comment Cancel reply