Chapter 818: How to Create VR Content (Manual)

Core Idea

The minimal setup for a WebXR VR app in three.js: add VRButton, enable XR on the renderer, and drive the render loop with renderer.setAnimationLoop instead of requestAnimationFrame.

Key Concepts

• VRButton.createButton(): from the examples/addons, adds a button that both signals VR support and starts a VR session when clicked.
• renderer.xr.enabled = true: turns on XR rendering on a WebGLRenderer.
• renderer.setAnimationLoop(): replaces a manual window.requestAnimationFrame loop, since an active XR session drives its own frame timing.

Code Examples

renderer.setAnimationLoop(function () {
  renderer.render(scene, camera);
});

• What it demonstrates: the minimal XR-compatible render loop, using setAnimationLoop instead of requestAnimationFrame.

Key Takeaways

1. VRButton.createButton() handles both the VR entry-point UI and starting the session in one call.
2. Set renderer.xr.enabled = true before rendering VR content.
3. VR apps must use renderer.setAnimationLoop() for their render loop, not a manual requestAnimationFrame call.

Connects To

• WebGLRenderer: the object that exposes the .xr namespace and setAnimationLoop.