跳到主要内容

WebXR 界面交互

如果设备或头戴设备兼容 VR/AR，请点击 VR/AR 按钮。

此 WebXR 体验支持通过激光指针、视线和触摸屏等 XR 输入源与界面交互。支持任何配备 WebXR 浏览器的设备，包括桌面、移动端，以及 Meta Quest 等 VR/AR 头戴设备。

下面查看教程项目的源代码。

进入 VR/AR​

PlayCanvas 的每个 WebXR 体验都会以某种形式包含以下两项：

  • 添加用于进入 VR/AR 的用户交互。
  • 为相机启用 VR/AR。
button.element.on('click', function() {
    // check support for VR
    if (app.xr.isAvailable(pc.XRTYPE_VR)) {
        // start VR session
        cameraEntity.camera.startXr(pc.XRTYPE_VR, pc.XRSPACE_LOCALFLOOR);
    }
});

本项目将 xr.js 挂在 Root 实体上，管理 VR 与 AR 界面按钮，并响应 XR 可用性变化和会话状态变化。

PlayCanvas WebXR API 的更多信息见用户手册。

XR 输入类型​

输入设备可以按跟踪能力分为以下几组，其中 DOF 表示自由度：

  • Gaze（视线）：默认类型，没有独立的位置与朝向，而是基于头戴显示器的朝向，始终沿用户面朝的方向。用于不提供位置跟踪的三自由度设备，也可作为内嵌式非沉浸 WebXR 会话的后备输入。
  • Screen（屏幕）：基于触摸的输入源，可用于 AR，例如带触摸屏的移动设备。
  • Tracked Pointer（跟踪指针）：具有跟踪朝向，可选跟踪空间位置的输入源。通常可握持，并与手相关联，包括手柄和手部跟踪。Meta Quest Touch、HTC Vive 等现代 VR/AR 控制器都属于此类。

每个输入源都有一条射线，包含起点和指向方向。PlayCanvas 的 WebXR 输入源实现支持所有输入类型，无需开发者额外处理。如果输入源可握持，还可以根据其位置和旋转显示模型。

输入源​

跟踪输入源系统由两个文件组成：

controllers.js​

此脚本通过 XrInput 跟踪新添加的输入源，并为它们实例化控制器实体，例如：

app.xr.input.on('add', function (inputSource) {
    // new input source is added
});

controller.js​

此脚本挂在每个表示输入源的实体上，关联原始 XrInputSource。如果输入源可握持，就启用用于显示控制器模型的子实体。

每次更新时，根据输入源的位置与旋转设置实体：

if (inputSource.grip) {
    this.visualEntity.enabled = true;
    this.entity.setPosition(this.inputSource.getPosition());
    this.entity.setRotation(this.inputSource.getRotation());
}

用户界面​

三维界面通过 Button 和 Element 组件创建。组合两者即可在三维空间中创建交互按钮。

为 XR 环境创建三维界面，与为非 XR 环境的鼠标和触摸交互创建界面完全相同。更多信息见用户界面。

每个 XrInputSource 默认启用 elementInput 属性，意味着它会通过自身的三维射线像鼠标或触摸输入一样与 Button 组件交互。射线具有起点和方向。本教程将输入源射线可视化：

// set starting point of ray
vecA.copy(inputSource.getOrigin());
// set end point of ray
vecB.copy(inputSource.getDirection());
vecB.scale(1000).add(vecA);
// render line between those two points
app.renderLine(vecA, vecB, color);

界面交互​

本教程有 Rotate（button-rotate.js）与 Color（button-color.js）两种按钮。点击旋转按钮时，设置立方体旋转速度：

entity.button.on('click', function() {
    targetEntity.script.cube.rotateSpeed = rotateSpeed;
});

点击颜色按钮时，修改立方体模型每个网格实例的漫反射颜色。

这套界面交互与输入源无关，无论来自 VR 手持设备、移动 VR 的视线、AR 屏幕触摸，还是传统鼠标和触摸都能使用，因此便于创建和测试跨平台应用。