skills.rest
Bailipa
BailipaCOMMUNITY
Explore all skills by this author →
GitHub

threejs-impl-xr

Configure WebXR sessions and lifecycle in Three.js projects.

4|Updated Apr 14, 2026
Search Tags:#three.js#webxr#ar#vr#teleportation#hit-testing#xr-controller
One-click install
npx skills add https://github.com/Bailipa/EZTor_FULLBLOOD --skill threejs-impl-xr-bailipa
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: threejs-impl-xr
Source: https://github.com/Bailipa/EZTor_FULLBLOOD/tree/main/.opencode/skills/threejs/threejs-impl/threejs-impl-xr
Command: npx skills add https://github.com/Bailipa/EZTor_FULLBLOOD --skill threejs-impl-xr-bailipa

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Three.js WebXR projects often struggle with correctly integrating the render loop, controller input handling, and reference space configuration. This skill provides a clear setup pattern, ready-made utilities, and best practices for XR lifecycle management.

Core Features & Use Cases

  • WebXRManager lifecycle management and session handling
  • VRButton and ARButton integration with feature detection
  • Controllers, hand tracking, and hit testing patterns
  • Teleportation and locomotion techniques for immersive experiences
  • Practical use cases and examples for VR/AR development

Quick Start

Launch a Three.js WebXR project by enabling renderer.xr, selecting a reference space, and wiring up VRButton/ARButton to start an XR session.

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 Three.js WebXR render loop correctly?▼

To set up a Three.js WebXR render loop correctly, enable renderer.xr.enabled and use renderer.setAnimationLoop instead of requestAnimationFrame to ensure proper XR session lifecycle management and frame synchronization.

Why does my WebXR controller input fail to register in Three.js?▼

WebXR controller input fails when reference space configuration is incorrect. You must configure renderer.xr.setReferenceSpaceType before creating VRButton or ARButton UI to ensure controllers and hand tracking inputs map properly.

Can I implement teleportation and hit testing using Three.js WebXR?▼

Yes, you can implement teleportation and hit testing in Three.js WebXR by applying proven controller patterns. These patterns manage input handling and spatial reference calculations to deliver robust VR and AR locomotion experiences.

What is the correct order to initialize VRButton and ARButton in Three.js?▼

The correct order to initialize VRButton and ARButton in Three.js requires setting renderer.xr.enabled and calling renderer.xr.setReferenceSpaceType first. Creating UI buttons before this XR setup breaks session handling.

Does Three.js WebXR support hand tracking and AR sessions simultaneously?▼

Three.js WebXR supports hand tracking and AR sessions through WebXRManager lifecycle handling. Using ARButton integration with proper feature detection allows simultaneous management of hand tracking inputs and AR session rendering.

Related Skills

Explore More Software Engineering Skills→
hii-saikrishnahii-saikrishna

threejs-webgl

Create interactive 3D scenes with Three.js and WebGL rendering.

Community
Advanced
augustoheissaugustoheiss

agency-xr-immersive-developer

Build browser-based AR/VR applications with Three.js, A-Frame, or Babylon.js using the WebXR Device API.

Community
Advanced
googlegoogle
455

uiblocks

Design interactive 3D user interfaces for XR Blocks with Three.js and uikit.

Official
Advanced
NagyViktNagyVikt
2

three-webgl-game

Implement imperative 3D browser game runtimes with Three.js, TypeScript, and Vite.

Community
Advanced