threejs-impl-xr

Prevent common WebXR mistakes in Three.js VR/AR scenes.

11|Updated Mar 20, 2026
One-click install
npx skills add https://github.com/OpenAEC-Foundation/Three.js-Claude-Skill-Package --skill threejs-impl-xr
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: threejs-impl-xr
Source: https://github.com/OpenAEC-Foundation/Three.js-Claude-Skill-Package/tree/main/skills/source/threejs-impl/threejs-impl-xr
Command: npx skills add https://github.com/OpenAEC-Foundation/Three.js-Claude-Skill-Package --skill threejs-impl-xr

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Prevents common WebXR mistakes when building Three.js VR/AR experiences such as misusing the render loop, neglecting controller events, or mismanaging reference spaces.

Core Features & Use Cases

  • WebXR session lifecycle guidance (enter/exit, reference spaces, and rendering loop) for Three.js r160+.
  • Controller and hand-tracking integration with hit testing, teleportation, and interaction patterns.
  • Examples and best practices for VR and AR setups across devices and platforms.

Quick Start

Enable WebXR on the renderer, create a VR/AR scene with controllers, and start the animation loop.

Frequently Asked Questions about threejs-impl-xr

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I set up a WebXR render loop in Three.js to avoid common VR performance mistakes?

To set up a WebXR render loop in Three.js, you must use the proper XR session lifecycle and reference spaces. This prevents common mistakes like misusing the animation loop or mismanaging rendering contexts across VR and AR scenes.

Why does my Three.js WebXR controller input fail to register during a VR session?

WebXR controller input fails when controller events are neglected or reference spaces are mismanaged. Properly binding controller events and managing reference spaces ensures robust interaction patterns and hit testing within your Three.js scene.

Can I use hand tracking and hit testing together for AR passthrough in Three.js?

Yes, you can use hand tracking and hit testing together for AR passthrough in Three.js. This requires proper integration of controller events and hit testing patterns to enable robust interaction across WebXR-enabled scenes.

What's the best way to handle WebXR session lifecycle and reference spaces in Three.js r160+?

The best way to handle the WebXR session lifecycle in Three.js r160+ is to ensure proper enter and exit flows, configure correct reference spaces, and maintain a dedicated animation loop for robust VR and AR rendering.

Does my WebXR VR scene need specific reference space configurations for teleportation to work?

Yes, WebXR VR scenes need specific reference space configurations for teleportation. Properly managing reference spaces and applying established teleportation patterns ensures movement works correctly across different VR headsets and platforms.

When should I not use the standard Three.js animation loop for WebXR rendering?

You should avoid the standard Three.js animation loop for WebXR rendering when entering a VR or AR session, as it causes rendering mismatches. Using the dedicated WebXRManager loop ensures proper frame synchronization and session handling.