# 使用
在Tx3d Engine中可以使用 @tx3d/webxrexperiment 包开发AR或VR应用。
注意
由于WebXR目前处于草案阶段，API还在不断的变化和更新。因此@tx3d/webxr包目前属于实验性质，后续也许会有较大的变更！！！
# 功能
使用@tx3d/webxr构建AR或VR应用时需要先验证浏览器是否支持WebXR，接下来创建XR管理器（XRManager）然后使用XR管理器进入AR或VR场景。
import { XRManager } from '@tx3d/webxr';
// 创建XR管理器
const xrManager = new XRManager( engine );
2
3
4
# 验证浏览器是否支持AR
使用XR管理器（XRManager）的isARAvailable静态接口验证浏览器是否支持AR。
import { XRManager } from '@tx3d/webxr';
// 验证浏览器是否支持AR
XRManager.isARAvailable().then( ( supported ) => {
// 判断是否支持
if ( supported ) {
// TODO:支持处理
} else {
// TODO:不支持处理
}
}, ( error ) => {
// TODO:报错处理
} );
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
# 验证浏览器是否支持VR
使用XR管理器（XRManager）的isVRAvailable静态接口验证浏览器是否支持VR。
import { XRManager } from '@tx3d/webxr';
// 验证浏览器是否支持VR
XRManager.isVRAvailable().then( ( supported ) => {
// 判断是否支持
if ( supported ) {
// TODO:支持处理
} else {
// TODO:不支持处理
}
}, ( error ) => {
// TODO:报错处理
} );
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
# 进入AR场景
使用XR管理器（XRManager）的enterAR接口进入AR场景。
// 进入AR场景
xrManager.enterAR( {
referenceSpaceType: 'local-floor',
requiredFeatures: [ 'local-floor', 'hit-test' ]
} ).then( () => {
// TODO:渐入成功处理
}, ( error ) => {
// TODO:进入失败处理
} );
2
3
4
5
6
7
8
9
10
11
12
13
14
15
提示
进入AR场景参数，详见WebXRParameters。
# 进入VR场景
使用XR管理器（XRManager）的enterVR接口进入VR场景。
// 进入VR场景
xrManager.enterVR( {
referenceSpaceType: 'local-floor'
} ).then( () => {
// TODO:渐入成功处理
}, ( error ) => {
// TODO:进入失败处理
} );
2
3
4
5
6
7
8
9
10
11
12
13
14
提示
进入VR场景参数，详见WebXRParameters。
# 退出AR/VR场景
使用XR管理器（XRManager）的exit接口退出AR/VR场景。
// 退出AR/VR场景
xrManager.exit().then( () => {
// TODO:退出成功处理
}, ( error ) => {
// TODO:退出出错处理
} );
2
3
4
5
6
7
8
9
10
# 事件
XR管理器（XRManager）目前可监听的事件如下：
🌏 sessionstart：WebXR会话开始事件，会话建立时触发。
// 监听'sessionstart'事件
xrManager.addEventListener( 'sessionstart', ( event ) => {
// TODO:响应'sessionstart'事件
} );
// 移除'sessionstart'事件监听器
xrManager.removeEventListener( 'sessionstart', listener );
2
3
4
5
6
7
8
9
🌏 sessionend: WebXR会话结束事件，会话关闭时触发。
// 监听'sessionend'事件
xrManager.addEventListener( 'sessionend', ( event ) => {
// TODO:响应'sessionend'事件
} );
// 移除'sessionend'事件监听器
xrManager.removeEventListener( 'sessionend', listener );
2
3
4
5
6
7
8
9
# 输入
通过输入模块可以监听AR/VR的外部输入事件，当前包含以下三种类型输入：
🌏 TargetRay：目标射线输入，使用XR管理器（XRManager）的getTargetRayInput接口获取。
// 获取0号TargetRay输入
const input0 = xrManager.getTargetRayInput( 0 );
// 获取1号TargetRay输入
const input1 = xrManager.getTargetRayInput( 1 );
2
3
4
5
🌏 Grip：挤压式输入，使用XR管理器（XRManager）的getGripInput接口获取。
// 获取0号Grip输入
const input0 = xrManager.getGripInput( 0 );
// 获取1号Grip输入
const input1 = xrManager.getGripInput( 1 );
2
3
4
5
🌏 Hand：手势输入，使用XR管理器（XRManager）的getHandInput接口获取。
// 获取0号Hand输入
const input0 = xrManager.getHandInput( 0 );
// 获取1号Hand输入
const input1 = xrManager.getHandInput( 1 );
2
3
4
5
提示
1️⃣ 输入需要由相应的硬件设备支持，通常手机仅支持"TargetRay"输入，头盔和眼镜等设备可能会支持所有类型输入。
2️⃣ AR场景通常只需要获取0号输入，VR场景0号和1号输入可能都需要获取（通常0号对应左手，1号对应右手）。
# 输入事件
目前可监听的输入事件如下：
🌏 connected：输入连接事件，所有类型输入都可监听。
// 监听'connected'事件
input.addEventListener( 'connected', ( event ) => {
// TODO:响应'connected'事件
} );
// 移除'connected'事件监听器
input.removeEventListener( 'connected', listener );
2
3
4
5
6
7
8
9
🌏 disconnected：输入断开事件，所有类型输入都可监听。
// 监听'disconnected'事件
input.addEventListener( 'disconnected', ( event ) => {
// TODO:响应'disconnected'事件
} );
// 移除'disconnected'事件监听器
input.removeEventListener( 'disconnected', listener );
2
3
4
5
6
7
8
9
🌏 selectstart: 选择开始事件，所有类型输入都可监听。
// 监听'selectstart'事件
input.addEventListener( 'selectstart', ( event ) => {
// TODO:响应'selectstart'事件
} );
// 移除'selectstart'事件监听器
input.removeEventListener( 'selectstart', listener );
2
3
4
5
6
7
8
9
🌏 selectend：选择结束事件，所有类型输入都可监听。
// 监听'selectend'事件
input.addEventListener( 'selectend', ( event ) => {
// TODO:响应'selectend'事件
} );
// 移除'selectend'事件监听器
input.removeEventListener( 'selectend', listener );
2
3
4
5
6
7
8
9
🌏 select：选择事件，所有类型输入都可监听。
// 监听'select'事件
input.addEventListener( 'select', ( event ) => {
// TODO:响应'select'事件
} );
// 移除'select'事件监听器
input.removeEventListener( 'select', listener );
2
3
4
5
6
7
8
9
🌏 squeezestart: 挤压开始事件，所有类型输入都可监听。
// 监听'squeezestart'事件
input.addEventListener( 'squeezestart', ( event ) => {
// TODO:响应'squeezestart'事件
} );
// 移除'squeezestart'事件监听器
input.removeEventListener( 'squeezestart', listener );
2
3
4
5
6
7
8
9
🌏 squeezeend：挤压结束事件，所有类型输入都可监听。
// 监听'squeezeend'事件
input.addEventListener( 'squeezeend', ( event ) => {
// TODO:响应'squeezeend'事件
} );
// 移除'squeezeend'事件监听器
input.removeEventListener( 'squeezeend', listener );
2
3
4
5
6
7
8
9
🌏 squeeze：挤压事件，所有类型输入都可监听。
// 监听'squeeze'事件
input.addEventListener( 'squeeze', ( event ) => {
// TODO:响应'squeeze'事件
} );
// 移除'squeeze'事件监听器
input.removeEventListener( 'squeeze', listener );
2
3
4
5
6
7
8
9
🌏 pinchstart：pinching开始事件，仅"Hand"类型输入可以监听。
// 监听'pinchstart'事件
input.addEventListener( 'pinchstart', ( event ) => {
// TODO:响应'pinchstart'事件
} );
// 移除'pinchstart'事件监听器
input.removeEventListener( 'pinchstart', listener );
2
3
4
5
6
7
8
9
🌏 pinchend：pinching结束事件，仅"Hand"类型输入可以监听。
// 监听'pinchend'事件
input.addEventListener( 'pinchend', ( event ) => {
// TODO:响应'pinchend'事件
} );
// 移除'pinchend'事件监听器
input.removeEventListener( 'pinchstart', listener );
2
3
4
5
6
7
8
9