mcpField
T
threejs-webxr

threejs-webxr

github.com/full-stack-skillsDevelopment10355 installsUpdated 4w ago
Repository

About threejs-webxr

A skill for developers and coding agents working with three.js WebXR features. It covers session setup, entry buttons, controllers, hand tracking, and estimated lighting, with attention to browser and device limitations.

Key features

  1. 01XR session and renderer setup
  2. 02VR and AR entry buttons
  3. 03Controller models and input
  4. 04Optional hand tracking
  5. 05Estimated lighting for AR
  6. 06Session exit and render-loop handling

Use cases

  1. 01Adding VR or AR entry to a three.js scene
  2. 02Handling XR controllers and gamepad input
  3. 03Enabling hand models when supported
  4. 04Restoring normal rendering after an XR session

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/full-stack-skills/threejs-skills --skill threejs-webxr

After installing, type/threejs-webxrin Claude Code to confirm it loaded.

Bundled filesagents/openai.yamlexamples/workflow-xr-button.md

Details

From the project README

When to use this skill

ALWAYS use this skill when the user mentions:

  • Entering VR/AR, navigator.xr, reference spaces, session requestAnimationFrame loop via renderer
  • VRButton, ARButton, XRButton creation patterns from examples
  • Controller models, hand tracking meshes, estimated real-world lighting probes

IMPORTANT: webxr vs renderers vs camera

TopicSkill
Enable XR on renderer, sizingthreejs-renderers (basics) + threejs-webxr (session)
Desktop projectionthreejs-camera

Trigger phrases include:

  • "WebXR", "VRButton", "ARButton", "XRControllerModelFactory", "hand tracking"
  • "虚拟现实", "增强现实", "沉浸式"

How to use this skill

  1. HTTPS requirement and feature detection for XR availability.
  2. Buttons: use official button factories to create DOM entry points; handle session end.
  3. Renderer: call renderer.xr.enabled = true patterns per docs; prefer setAnimationLoop for XR loops.
  4. Controllers: attach models via factories; read gamepad axes/buttons carefully with fallbacks.
  5. Hands: opt-in hand models when runtime supports; performance implications.
  6. Lighting: XREstimatedLight for AR realism—combine with threejs-lights cautiously.
  7. Exit: restore non-XR render loop and resize handling on session end.

See examples/workflow-xr-button.md.

Doc map (official)

Docs sectionRepresentative links
Renderer XRhttps://threejs.org/docs/WebXRManager.html
Webxr addonshttps://threejs.org/docs/VRButton.html
Webxr addonshttps://threejs.org/docs/ARButton.html
Webxr addonshttps://threejs.org/docs/XRControllerModelFactory.html

Scope

  • In scope: Documented WebXR manager + listed addons for buttons/controllers/hands/planes.
  • Out of scope: Store submission, OpenXR runtime specifics, custom native layers.

Common pitfalls and best practices

  • Desktop testing requires XR emulation or hardware; fail gracefully.
  • Mismatched reference space causes floor offset—validate stage vs local-floor.
  • Heavy post chains may not meet VR frame time—profile aggressively.

Documentation and version

WebXR entry points span Addons → Webxr and renderer WebXRManager in three.js docs. Browser and device capabilities vary—answers should cite the official example name and three.js version when possible.

Agent response checklist

When answering under this skill, prefer responses that:

  1. Link WebXRManager, VRButton, ARButton, or controller factories as relevant.
  2. Use setAnimationLoop patterns with threejs-renderers for XR render loops.
  3. Avoid duplicating desktop threejs-camera projection advice for XR eyes.
  4. Mention reference space choice (local-floor, etc.) at a high level with docs link.
  5. Flag performance interaction with threejs-postprocessing in VR.

References

Keywords

English: webxr, vr, ar, xr session, controller, hand tracking, three.js

中文： WebXR、VR、AR、VRButton、手柄、手部追踪、沉浸式、three.js

Comments

Markdown supported