threejs-webxr

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

When to use this skill

何时使用此 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

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"
"虚拟现实", "增强现实", "沉浸式"

当用户提到以下内容时，始终使用此 skill：

进入 VR/AR、
```
navigator.xr
```
、
```
reference space
```
，通过 renderer 执行会话的
```
requestAnimationFrame
```
循环
从示例中创建
```
VRButton
```
、
```
ARButton
```
、
```
XRButton
```
的模式
控制器模型、手部追踪网格、估计现实环境光照探针

重要：WebXR、渲染器与相机的区别

主题	Skill
在 renderer 上启用 XR、调整尺寸	threejs-renderers（基础）+ threejs-webxr（会话）
桌面投影	threejs-camera

触发短语包括：

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

How to use this skill

如何使用此 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 = true
```
patterns per docs; prefer
```
setAnimationLoop
```
for 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:
```
XREstimatedLight
```
for 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.

HTTPS 要求以及 XR 可用性的功能检测。
按钮：使用官方按钮工厂创建 DOM 入口点；处理会话结束。
渲染器：按照文档调用
```
renderer.xr.enabled = true
```
；XR 循环优先使用
```
setAnimationLoop
```
。
控制器：通过工厂附加模型；谨慎读取 gamepad 的轴和按钮，并提供回退方案。
手部：在 runtime 支持时选择启用手部模型；注意其性能影响。
光照：在 AR 中使用
```
XREstimatedLight
```
增强真实感——谨慎结合 threejs-lights。
退出：会话结束后恢复非 XR 渲染循环和尺寸调整处理。

请参阅 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

文档章节	代表性链接
渲染器 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.

包含范围： 有文档支持的 WebXR manager，以及列出的按钮、控制器、手部和平面 addons。
不包含范围： 商店提交、OpenXR runtime 细节、自定义原生层。

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.

桌面测试需要 XR 模拟器或硬件；应优雅降级。
```
reference space
```
不匹配会导致地面高度偏移——请验证
```
stage
```
与
```
local-floor
```
。
繁重的后期处理链可能无法满足 VR 帧时间要求——务必充分分析性能。

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.

WebXR 入口点涵盖 Addons → Webxr，以及 three.js 文档中的渲染器

WebXRManager

。浏览器和设备能力各不相同——回答时尽可能引用官方示例名称和 three.js 版本。

Agent response checklist

Agent 回答检查清单

When answering under this skill, prefer responses that:

Link
```
WebXRManager
```
,
```
VRButton
```
,
```
ARButton
```
, or controller factories as relevant.
Use
```
setAnimationLoop
```
patterns 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.

在此 skill 下回答时，优先确保响应：

根据实际情况提供
```
WebXRManager
```
、
```
VRButton
```
、
```
ARButton
```
或控制器工厂的链接。
XR 渲染循环采用与 threejs-renderers 配合使用的
```
setAnimationLoop
```
模式。
不要将适用于桌面的 threejs-camera 投影建议重复用于 XR 双眼渲染。
高层次地提及
```
reference space
```
的选择（如
```
local-floor
```
），并附上文档链接。
指出 VR 中与 threejs-postprocessing 相关的性能影响。

References

参考资料

Keywords

关键词

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

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

英文： webxr, vr, ar, xr session, controller, hand tracking, three.js

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