Build Immersive WebVR Experiences with Three.js: A Step‑by‑Step Guide

WebVR Experience Modes

WebVR can be experienced in VR mode and non‑VR (裸眼) mode.

VR Mode

1. Cardboard‑style HMD + mobile browser Use a cardboard headset to view a WebVR page; the browser reads the device’s gyroscope to determine head orientation and renders the appropriate scene.

2. Tethered HMD + PC browser With an Oculus Rift headset, browsers that support WebVR (Firefox Nightly, Chrome beta with VR enabled) can render the page.

Non‑VR Mode

When the user chooses not to enter VR, the scene can be manipulated with mouse dragging on PC or touch‑move/tilt on mobile.

Preparation

Technology and framework: three.js for WebGL

Three.js simplifies creating 3D scenes and animations.

Testing tools: smartphone + cardboard‑style headset

Recommended to use a cardboard headset or a low‑cost replica.

Required JS plugins: three.min.js webvr-polyfill.js VRcontrols.js VReffect.js webvr-manager.js

webvr-polyfill.js

Because the WebVR API is not yet supported by all browsers, this polyfill provides the necessary VR functions such as

Navigator.getVRDevices()

.

VRControls.js

Provides a camera controller that updates the camera rotation based on the orientation values from the WebVR API.

VREffect.js

Creates a stereoscopic renderer that splits the view into left and right eyes for headset display.

webvr-manager.js

Manages VR and non‑VR modes, adds a VR icon, and switches between the stereoscopic

VREffect

and the normal renderer.

3D Scene Construction

Start by creating an HTML file.

1. Create a scene

The

scene

object in three.js is the container for all 3D objects.

2. Add a camera

The

camera

represents the viewer’s eye; its field of view (FOV) defines the visible area.

3. Add a renderer

The renderer draws what the camera sees.

4. Add a cube mesh

Insert a simple cube into the scene.

5. Start animation

Use

requestAnimationFrame()

to update object properties each frame, providing smoother animation than

setTimeout

.

WebVR Scene Development

The WebVR page obtains user input via the WebVR API to control the camera. In VR mode, the VR controller and stereoscopic effect render a split‑screen view using the device’s gyroscope; in non‑VR mode, full‑screen interaction is achieved with touch‑move or gyroscope.

Instantiate the VR controller and effect, then call them inside the render loop.

Full source code Demo

Conclusion: Major browsers (Google, Firefox, Facebook, Baidu, and soon Microsoft) already support WebVR. With 5G and affordable headsets, WebVR will enable immersive e‑commerce, face‑to‑face online education, and more, making it a revolutionary web experience.