JavaScript 组件

8thwall-camera 

8thwall 相机组件。

已弃用: 请使用 https://github.com/WonderlandEngine/wonderland-ar-tracking 上的组件。

anchor 

将对象的位置设置为 XRAnchor 的位置。

使用 Anchor.create() 静态函数创建锚点。

与光标一起使用的示例：

1cursorTarget.onClick.add((object, cursor, originalEvent) => {
2    /* 只有在 XR 中的事件才会附加一个框架 */
3    if(!originalEvent.frame) return;
4    Anchor.create(anchorObject, {uuid: id, persist: true}, originalEvent.frame);
5});

audio-listener 

表示 Wonderland 的音频监听器组件。 更新 WebAudio 监听器实例的位置和方向。

注意: 每次仅应激活一个监听器。

audio-source 

表示 Wonderland 引擎中的音频源，允许播放音频文件。

cursor 

适用于桌面/移动设备/VR 的 3D 光标。

在场景中实现一个光线投射光标。要对点击/悬停/取消悬停/光标按下/光标释放进行响应，请使用 cursor-target。

对于 VR，光线以 this.object.getForward() 的方向投射。对于桌面和移动设备，前向矢量被反向投影以考虑用户在屏幕上点击的位置。

.globalTarget 可用于调用所有对象的回调，即使那些没有附加光标目标但符合碰撞组的对象。

.hitTestTarget 可用于调用 WebXR 命中测试结果的回调，

参见 动画示例。

将一个命中测试位置组件附件到 cursorObject 上，光标会使用该对象向 hitTestTarget 发送与 HitTestResult 对应的事件。|

cursor-target 

cursor 的 点击/悬停/移动/按钮目标。

要在点击、悬停、取消悬停、移动光标、按下光标按钮或释放光标按钮时触发代码，请分别使用 .addClickFunction(f)、 .addHoverFunction(f)、.addUnHoverFunction(f)、 .addMoveFunction(f)、.addDownFunction(f) 和 .addUpFunction(f) 以及任何 function f() {}。

要调用不同组件上的成员，可以按如下方式设置光标目标：

1start: function() {
2  let target = this.object.addComponent('cursor-target');
3  target.onClick.add(this.onClick.bind(this));
4},
5onClick: function() {
6  console.log(this.object.name, "被点击了!");
7}

Functions:

 1const target = this.object.getComponent(CursorTarget);
 2const callback = function(object, cursorComponent) {};
 3
 4target.onHover.add(callback);
 5target.onHover.remove(callback);
 6
 7target.onUnHover.add(callback);
 8target.onUnHover.remove(callback);
 9
10target.onClick.add(callback);
11target.onClick.remove(callback);
12
13target.onMove.add(callback);
14target.onMove.remove(callback);
15
16target.onDown.add(callback);
17target.onDown.remove(callback);
18
19target.onUp.add(callback);
20target.onUp.remove(callback);

Requirements:

• 需要在同一对象上附加一个 collision 组件。

参见 动画示例。

debug-object 

打印一些关于对象的有限调试信息。

信息包括：此对象的名称、对象参数的名称、对象的世界平移、世界变换和局部变换。

主要用于引擎开发者进行调试目的或作为示例代码。

device-orientation-look 

从移动设备检索设备方向并相应设置对象的方向。

适用于魔法窗口体验。

finger-cursor 

允许通过碰撞重叠与光标目标进行交互， 例如在跟踪手指顶端。

Requirements:

• 同一对象上的一个碰撞组件（通常为 0.05 半径的球体）

fixed-foveation 

一旦 WebXR 会话开始，就应用 fixed foveation

固定注视减少了用户视觉边缘的着色成本，通过在用户视野边缘以较低分辨率渲染。

hand-tracking 

通过 WebXR Device API 实现的简单手部跟踪 “Hand Input” API。

允许显示手部为球体关节或蒙皮网格。

要对抓取作出反应，请使用 this.isGrabbing()。有关其他手势，请参考 this.joints - 一个 Object3D 数组，并使用 [WebXR 手部输入规范]中列出的关节索引 (https://immersive-web.github.io/webxr-hand-input/#skeleton-joints-section)。

通常希望使用手部跟踪或控制器，而不是两者兼具。 此组件提供 deactivateChildrenWithoutPose 用于在无法获得姿势时隐藏手部跟踪可视化，以及 controllerToDeactivate 用于在获得手部跟踪姿势后禁用另一个物体。 在 XR 会话之外，既不启用也不禁用跟踪或控制器，以便与 vr-mode-active-switch 组件良好配合。

Requirements:

• 要使用手部跟踪，请在 Oculus Quest/Oculus Quest 2 上的 Oculus 浏览器中启用 “joint tracking” 在 chrome://flags 中。

参见 手部跟踪示例。

hit-test-location 

设置 WebXR Device API “Hit Test” 并将对象放置于命中位置。

Requirements:

• 在您的 HTML 文件中的 AR 按钮上指定 'hit-test' 为必需或可选功能。 参见 Wastepaperbin AR 作为示例。

已弃用: 请改用 onHitLost 和 onHitFound。|

image-texture 

从 URL 下载图像并将其作为 diffuseTexture 或 flatTexture 应用于附加的网格组件。

支持以下着色器的材质：

• “Phong Opaque Textured”
• “Flat Opaque Textured”
• “Background”
• “Physical Opaque Textured”
• “Foliage”

input-profile 

动态加载和映射 XR 控制器的输入配置。

mouse-look 

通过鼠标移动控制相机方向。

高效实现，仅在鼠标移动时影响对象方向。

orbital-camera 

OrbitalCamera 组件允许用户围绕目标点（即对象自身的位置）旋转。它以指定的距离旋转。

备注: 该组件通过鼠标或触摸工作。因此在 VR 中不起作用。

plane-detection 

使用 WebXR Device API - Plane Detection 为 XRPlanes 创建网格和碰撞。

player-height 

设置玩家高度，使其在“本地”和“查看者”参考空间的地面上方有一个Y偏移。

target-framerate 

设置目标帧率

更新目标帧率 到最接近给定 framerate 的 支持的目标帧率。

目标帧率用于设备的 VR 合成器，指示以多常的间隔刷新屏幕。这意味着应用程序将被要求以更规律的间隔生成帧，可能在掉帧的情况下花费更少的时间。

对于负荷较重的应用程序，设置符合的目标帧率可以改善应用程序的渲染稳定性并减少卡顿。

同样，对于较简单的应用程序，目标帧率也可以用于在 Oculus Quest 2 上启用 120Hz 刷新率。

teleport 

VR 位移传送。

参见 传送示例。

trail 

基于动态网格的轨迹

此组件跟踪附加对象的世界位置。 在固定间隔中，世界位置被存储为轨迹段的起点和终点。

轨迹在其长度上逐渐变细。UV 纹理坐标被设置以便 U 轴覆盖轨迹的宽度，V 轴覆盖轨迹的长度。 这样就可以使用纹理定义轨迹的外观。

two-joint-ik-solver 

双关节链的逆向运动学（例如膝盖或肘部）

video-texture 

从 URL 下载视频，并将其作为 diffuseTexture 或 flatTexture 应用于指定材质。

视频纹理需要在有新帧可用时定期更新。 此组件处理新帧的检测并更新纹理以反映视频的当前帧。

支持以下着色器的材质：

• “Phong Opaque Textured”
• “Flat Opaque Textured”
• “Background”
• “Physical Opaque Textured”
• “Foliage”

可以通过 this.video 访问视频：

1  let videoTexture = this.object.getComponent('video-texture');
2  videoTexture.video.play();
3  videoTexture.video.pause();

参见 视频示例。

vr-mode-active-switch 

根据 VR/AR 会话是否激活来切换对象上的所有其他组件为活动/不活动。

对于在用户进入 VR 前隐藏控制器等应用场景非常有用。

vrm 

用于加载和处理 VRM 1.0 模型的组件。

模型的姿势应完全通过旋转骨骼来完成。可以使用.bones属性访问这些属性，并遵循 VRM 骨骼命名。请注意，并非所有 VRM 模型都具备所有可能的骨骼。默认姿势（T 型姿势）被保存在 .restPose 属性中。可按以下方式重置骨骼到其默认姿势：

1vrmComponent.bones[vrmBoneName].rotationLocal = vrmComponent.restPose[vrmBoneName];

通过移动该组件附加的对象来在世界中移动模型。换言之，移动 VRM 模型的根部。骨骼及任何后代对象不应用于移动 VRM 模型。

核心扩展 VRMC_vrm 以及 VRMC_springBone 和 VRMC_node_constraint 扩展都支持。

限制:

• 不支持 VRMC_material_mtoon
• 不支持表情
• 不支持基于表情的 LookAt
• Mesh annotation 模式 auto 不支持（第一人称模式）

wasd-controls 

使用 W/A/S/D 键的基本移动。