threejs-webxr
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).
- Installs
- 377
- Last 24h
- —
- Trending rank
- —
- Security
- Not audited
Install
Works with every agent the skills CLI supports.
npx skills add https://github.com/full-stack-skills/threejs-skills --skill threejs-webxr- 01
Install
Run the command in your project. The CLI asks which agents to install for.
- 02
Describe the task
Ask your agent for something this skill covers. It loads threejs-webxr automatically when relevant.
- 03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.
SKILL.md
The instructions your agent reads when the skill is triggered.
When to use this skill
ALWAYS use this skill when the user mentions:
- Entering VR/AR,
navigator.xr, reference spaces, sessionrequestAnimationFrameloop via renderer VRButton,ARButton,XRButtoncreation patterns from examples- Controller models, hand tracking meshes, estimated real-world lighting probes
IMPORTANT: webxr vs renderers vs camera
| Topic | Skill |
|---|---|
| Enable XR on renderer, sizing | threejs-renderers (basics) + threejs-webxr (session) |
| Desktop projection | threejs-camera |
Trigger phrases include:
- "WebXR", "VRButton", "ARButton", "XRControllerModelFactory", "hand tracking"
- "虚拟现实", "增强现实", "沉浸式"
How to use this skill
- HTTPS requirement and feature detection for XR availability.
- Buttons: use official button factories to create DOM entry points; handle session end.
- Renderer: call
renderer.xr.enabled = truepatterns per docs; prefersetAnimationLoopfor XR loops. - Controllers: attach models via factories; read gamepad axes/buttons carefully with fallbacks.
- Hands: opt-in hand models when runtime supports; performance implications.
- Lighting:
XREstimatedLightfor AR realism—combine with threejs-lights cautiously. - Exit: restore non-XR render loop and resize handling on session end.
See examples/workflow-xr-button.md.
Doc map (official)
| Docs section | Representative links |
|---|---|
| Renderer XR | https://threejs.org/docs/WebXRManager.html |
| Webxr addons | https://threejs.org/docs/VRButton.html |
| Webxr addons | https://threejs.org/docs/ARButton.html |
| Webxr addons | https://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:
- Link
WebXRManager,VRButton,ARButton, or controller factories as relevant. - Use
setAnimationLooppatterns with threejs-renderers for XR render loops. - Avoid duplicating desktop threejs-camera projection advice for XR eyes.
- Mention reference space choice (local-floor, etc.) at a high level with docs link.
- Flag performance interaction with threejs-postprocessing in VR.
References
- https://threejs.org/docs/WebXRManager.html
- https://threejs.org/docs/VRButton.html
- https://threejs.org/docs/ARButton.html
- https://threejs.org/docs/XRControllerModelFactory.html
Keywords
English: webxr, vr, ar, xr session, controller, hand tracking, three.js
中文： WebXR、VR、AR、VRButton、手柄、手部追踪、沉浸式、three.js
FAQ
What does the threejs-webxr skill do?
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).
How do I install threejs-webxr?
Run npx skills add https://github.com/full-stack-skills/threejs-skills --skill threejs-webxr in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/threejs-webxr/ (personal) or .claude/skills/threejs-webxr/ (project).
Which AI agents can use threejs-webxr?
Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.
Is threejs-webxr safe to install?
No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.
Who maintains threejs-webxr?
It is published by full-stack-skills in full-stack-skills/threejs-skills. It has 377 recorded installs.
More from full-stack-skills/threejs-skills
threejs-animation
full-stack-skills/threejs-skills
three.js keyframe animation system: AnimationMixer, AnimationClip, AnimationAction, KeyframeTrack variants, PropertyBinding, PropertyMixer, AnimationObjectGroup, AnimationUtils; mixing and crossfading clips, loop modes, timeScale, weight; addon AnimationClipCreator and CCDIKSolver for procedural rigs. Use when playing glTF clips, blending actions, or authoring procedural tracks; for skin deformation rigging on meshes see threejs-objects; for math interpolants without clips see threejs-math only when not tied to AnimationMixer.
threejs-lights
full-stack-skills/threejs-skills
three.js lighting: AmbientLight, HemisphereLight, DirectionalLight, PointLight, SpotLight, RectAreaLight, LightProbe, IESSpotLight, ProjectorLight, shadow subtypes, and addon helpers such as RectAreaLightUniformsLib, RectAreaLightTexturesLib, LightProbeGenerator, TiledLighting. Use when configuring direct/indirect light, shadows, probes, or area lights; for IES file loading use threejs-loaders; for node-based light graphs use threejs-node-tsl; for debug helpers use threejs-helpers.
threejs-camera
full-stack-skills/threejs-skills
three.js cameras: Camera base, PerspectiveCamera, OrthographicCamera, CubeCamera, ArrayCamera, StereoCamera; projection matrices, aspect, FOV, orthographic frustum sizes, near/far planes, and dynamic environment maps with CubeCamera. Use when placing views, rendering reflections, or multi-view splits; for XR projections and eye matrices use threejs-webxr; for post pass camera tricks use threejs-postprocessing alongside threejs-renderers.
threejs-postprocessing
full-stack-skills/threejs-skills
Addon screen-space post-processing for three.js using EffectComposer, Pass base class, RenderPass, and stock passes such as UnrealBloomPass, SSAOPass, SSRPass, BokehPass, OutlinePass, FXAAPass/SMAAPass, TAARenderPass, and ShaderPass; references the Shaders addon group for underlying shader modules; contrasts with core PostProcessing class used in node/WebGPU stacks (see threejs-node-tsl and threejs-renderers). Use when building composer chains—not for basic renderer tone mapping alone (threejs-renderers).
threejs-loaders
full-stack-skills/threejs-skills
three.js asset I/O using LoadingManager, Cache, FileLoader, image and texture loaders, GLTFLoader with DRACOLoader and KTX2Loader, and common format loaders under Addons; symmetric exporters such as GLTFExporter and texture/buffer exporters. Use when loading or exporting models, HDR, LUT, fonts, or compressed textures; for runtime Texture object parameters after load use threejs-textures; for scene graph placement use threejs-objects.
threejs-objects
full-stack-skills/threejs-skills
three.js scene graph objects: Object3D transforms and hierarchy, Group, Mesh, InstancedMesh, SkinnedMesh, BatchedMesh, LOD, Line/LineLoop/LineSegments, Points, Sprite, Bone, Skeleton, ClippingGroup; interaction via Raycaster, Layers masks, and EventDispatcher patterns. Merges the former interaction scope—use for picking and layers; for pure vector math without scene graph use threejs-math; for playing skeletal clips use threejs-animation; for frustum culling internals see camera docs.
Popular other skills
hyperframes-cli
heygen-com/hyperframes
The HyperFrames CLI by job - scaffold, check, look at frames, edit the timeline, preview, render locally or in the cloud, publish, project history - plus reading its JSON and recovering from build or render failures.
triage
mattpocock/skills
Move issues and external PRs through a state machine of triage roles, categorise, verify, grill if needed, and write agent-ready briefs.
ask-matt
mattpocock/skills
Ask which skill or flow fits your situation. A router over the skills in this repo.
to-questionnaire
mattpocock/skills
Turn a decision you can't fully answer into a questionnaire for someone else to fill in.
loop-me
mattpocock/skills
Grill me about specs for the workflows I want to build, within this workspace.