跳到主要内容

在 PlayCanvas 中使用 WebXR

支持​

浏览器尚未普遍支持 WebXR，可以这样检测：

if (app.xr.supported) {
    // WebXR is supported
}

启动 XR 会话​

可通过 Camera 组件方法或应用的 XrManager 启动。需要提供 CameraComponent、会话类型、参考空间，以及可选的额外参数对象：

app.xr.start(entity.camera, pc.XRTYPE_VR, pc.XRSPACE_LOCALFLOOR);

启动是异步操作，只能响应按钮点击、鼠标或触摸等用户交互：

button.on('click', () => {
    // start XR session
});

可以订阅 start 了解启动完成：

app.xr.on('start', () => {
    // XR session has started
});

特定平台可能不支持某类型或参考空间，启动失败时会向回调传错误，并触发 XrManager 的 error：

entity.camera.startXr(pc.XRTYPE_VR, pc.XRSPACE_UNBOUNDED, {
    callback: (err) => {
        if (err) {
            // failed to start session
        }
    }
});

结束 XR 会话​

可通过代码退出：

app.xr.end();

用户也可能通过浏览器返回等外部方式退出，XrManager 会触发 end：

app.xr.on('end', () => {
    // XR session has ended
});

会话类型​

各平台支持的类型不同：

  • VR，虚拟现实：提供观察者追踪并独占 XR 设备，内容绘到设备帧缓冲，而非 HTML 画布。
  • AR，增强现实：独占 XR 设备，虚拟内容与现实混合，此模式摄像机清屏颜色应透明。

设备连接或功能开关可能使会话类型可用性在运行中变化，检查方法如下：

if (app.xr.isAvailable(pc.XRTYPE_VR)) {
    // VR is available
}

也可订阅可用性变化：

app.xr.on('available', (type, available) => {
    console.log('XR session', type, 'type is now', available ? 'available' : 'unavailable');
});

// or specific session type
app.xr.on('available:' + pc.XRTYPE_VR, (available) => {
    console.log('XR session VR type is now', available ? 'available' : 'unavailable');
});

摄像机位置与方向​

XR 呈现期间，摄像机位置和旋转由会话覆盖。需要额外位移或转向时，为摄像机添加父实体，并操作父项。

摄像机偏移

输入源、网格、平面、图像等 XR 对象的位置、方向和射线均以世界空间提供。

为什么不能自动进入 XR？​

浏览器要求由用户操作触发 WebXR，例如按键、点击或触摸，因此不能在页面刚加载时立即进入。