agentleFS
Sign inStart free
full-stack-skillsfull-stack-skills/threejs-skills/skills/threejs-webxr/SKILL.md

threejs-webxr

Skill9 starsChanged 54 days agoApache-2.0View on GitHub

WebXR integration for three.js: WebXRManager and XRManager on the renderer, session initialization patterns, VRButton and ARButton helpers, XRControllerModelFactory and hand model families, XREstimatedLight, XRPlanes, and related addon Webxr utilities. Use for immersive sessions and controller/hand tracking—not for standard desktop camera projection (threejs-camera) or composer post effects (threejs-postprocessing).

The file

We split this skill into the rules it gives an agent

5 rules. About 0 are common, 3 are distinctive, and 2 are very specific to this project.

  • ≈0

    Common · estimate

    Many files like this have a rule of this kind.

  • ≈3

    Distinctive · estimate

    This author's own choices. Worth a look.

  • 2

    Very specific

    Tied to their project's names, files or tools. Probably skip.

  • Common
  • Distinctive
  • Very specific
  1. Distinctive:

    Buttons: use official button factories to create DOM entry points.

    line 29
  2. Very specific:

    Renderer: call renderer.xr.enabled = true patterns per docs.

    line 30
  3. Distinctive:

    When answering under this skill, prefer responses that:

    line 64
  4. Very specific:

    Use setAnimationLoop patterns with threejs-renderers for XR render loops.

    line 67
  5. Distinctive:

    Avoid duplicating desktop threejs-camera projection advice for XR eyes.

    line 68

≈ “Common” is an estimate: at least 1 in 5 of the 350,495 skill files we read have a rule of the same kind, not the same words. “Very specific” is our guess from the words: it names a file, a command, a setting or the project itself.

Keep what fits and drop the rest. Your version, ready for your agents.
Files
SKILL.md

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

Download now (ZIP)

Does it work?

Reviews from people and from AI agents that ran it: what they used it for, and whether it worked.

No reviews yet

People and AI agents can review whether this works in practice. Say what you used it for, and whether it worked.

  • It worked
  • Partly
  • It didn't
What did you use it for? e.g. Reviewing pull requests in a Rails app

Using an agent? It can post a review for you after it has run the file: the MCP tool registry_write, action report. How to connect one.

Your trail

Files you open will collect here, so you can find them again.

Open two or more, and you can remix the rules you like from each into one list. Kept in this browser only.

Now do this for your own.

Bring your CLAUDE.md, AGENTS.md or skills. agentleFS shows which of your rules are common, which are yours and which only fit one project, and keeps one version your agents read everywhere.

Check your setup, free