Creating Browser-Based 3D Games with Three.js and WebXR

 

Did you ever wish that you could create a VR or 3D browser game without the heavy game engines, complex installs, or large downloads? Science fiction, correct? Nope, it is not. With your browser and JavaScript, Three.js and WebXR allow you to build engaging 3D games for PCs, phones, and VR headsets.
In this article, I am going to discuss Three.js and WebXR, why they are awesome for 3D games in the browser, and how to create a simple interactive game situation. Ready to build VR games? Let's proceed and begin.

 

Why Choose Three.js and WebXR?

Why use Three.js and WebXR when so many people use Unity and Unreal? In short, immersive 3D and VR do not always need a lot of equipment. Three.js is a little JavaScript toolkit that makes it easy to work with 3D visuals in a web browser. Its WebGL technology makes 3D graphics faster and easier to use.

WebXR is the API for directly accessing VR and AR devices like the Meta Quest, Vive, and AR-enabled smartphones. It connects your browser to your head hardware. The two together allow you to create cross-platform games for screens, headsets, and phones. No plugins. No downloads. Enter your game world using the URL. Pretty cool, huh?

Setting Up Your Project

Let us become creative. We will utilise one HTML page with a Three.js script tag to simplify. CDNs offer the latest build:

<script src="https://cdn.jsdelivr.net/npm/three@0.157.0/build/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three@0.157.0/examples/jsm/webxr/VRButton.js"></script>

Next, create your basic scene. In your JavaScript:

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

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

// Renderer
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.xr.enabled = true;
document.body.appendChild(renderer.domElement);
document.body.appendChild(THREE.VRButton.createButton(renderer));

Boom! You have a Three.js scene, camera, renderer, and VR button for WebXR. Click that button in a VR-compatible browser to access your virtual world.

Enabling WebXR & Adding Controllers

Add something to interact with now that we have a scenario. XR controllers let players point, grab, and shoot in your game, making magic happen.

Here's how to add a simple controller:

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

controller1.addEventListener('selectstart', onSelectStart);
controller1.addEventListener('selectend', onSelectEnd);

function onSelectStart() {
 console.log('Controller button pressed!');
}

Want players to see their controllers in VR? Use XRControllerModelFactory:

import { XRControllerModelFactory } from 'three/examples/jsm/webxr/XRControllerModelFactory.js';

const controllerGrip = renderer.xr.getControllerGrip(0);
const controllerModelFactory = new XRControllerModelFactory();
controllerGrip.add(controllerModelFactory.createControllerModel(controllerGrip));
scene.add(controllerGrip);

Players can see their controller model and connect behaviours like grabbing objects and blasting lasers.

Building a Simple 3D Game Loop

Any game without interactivity is a screensaver, right? Build a simple game mechanic. For instance, target shooting.

Add a cube to your scene:

const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshStandardMaterial({ color: 0xff0000 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

Animate it in your render loop:

function animate() {
 renderer.setAnimationLoop(render);
}

function render() {
  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;
 renderer.render(scene, camera);
}

animate();

Connect the controller to an action. When the user presses the trigger, send out a ray to check if it hits the cube. Change its colour or move it to a different spot if they do. That is a simple game loop: obtain input, change the state of the game, and show the result.

Tips for Performance & Cross-Device Support

Now, here are some easy ways to make sure your computer game works well:

• Keep your models simple. The GPU has to do more work when there are more pixels, especially in VR.
• Optimize lighting. Do not use complicated dynamic lighting. Instead, use baked lights or simple directed lights.
• Use HTTPS. Secure links or localhost are the only ways for WebXR to work.
• Test on real devices. There is no better way to test your game than on a real headset or AR phone. Some of the best tools for you are the Oculus Browser and Chrome's WebXR version.

Conclusion

Now you know how to use Three.js and WebXR to make interesting 3D games that you can play in your browser. There are no locked-down app stores or heavy engine installs. Just open a link and let people go straight to your game world.

What is holding you back? Start up your editor, get your headset ready, and start to play around. You now know how to build for the web, which is where interactive games will be in the future.

Are you ready to make your next VR masterpiece? I am excited to see what you make!