7.6WebXR (VRAR)

文档摘要

7.6WebXR (VR/AR) Three.js高级技术与特效：7.6 WebXR (VR/AR) 详解与实践 7.6.1 WebXR 基础概念在深入代码之前，我们需要了解一些 WebXR 的基本概念： XR Session: 代表一个 WebXR 会话。它管理着 VR/AR 体验的整个生命周期，包括设备连接、渲染循环和用户输入。 XR Reference Space: 定义了虚拟世界中的坐标系。常见的参考空间包括： : 相对用户初始位置的坐标系。 : 相对用户初始位置，并以地面为基准的坐标系。 : 相对用户头部位置的坐标系。 : 没有限制的坐标系，适用于需要跟踪用户在更大空间内移动的场景。 XR Frame: 代表 WebXR 渲染循环中的一帧。

7.6WebXR (VR/AR)

Three.js高级技术与特效：7.6 WebXR (VR/AR) 详解与实践

7.6.1 WebXR 基础概念

在深入代码之前，我们需要了解一些 WebXR 的基本概念：

XR Session: 代表一个 WebXR 会话。它管理着 VR/AR 体验的整个生命周期，包括设备连接、渲染循环和用户输入。
XR Reference Space: 定义了虚拟世界中的坐标系。常见的参考空间包括：
- local: 相对用户初始位置的坐标系。
- local-floor: 相对用户初始位置，并以地面为基准的坐标系。
- viewer: 相对用户头部位置的坐标系。
- unbounded: 没有限制的坐标系，适用于需要跟踪用户在更大空间内移动的场景。
XR Frame: 代表 WebXR 渲染循环中的一帧。它提供了渲染场景所需的信息，例如姿势 (pose) 和视口 (viewport)。
XR Pose: 代表在给定时间点，设备或控制器的位置和方向。
XR Input Source: 代表用户与 VR/AR 体验交互的设备，例如 VR 控制器、手部追踪或触摸屏。
XR Layer: 定义渲染到 WebXR 设备上的图像层。

7.6.2 Three.js 中 WebXR 的初始化与配置

Three.js 提供了 VRButton 和 ARButton 两个辅助类，可以简化 WebXR 会话的启动和停止。

1. 创建场景、相机和渲染器:


import * as THREE from 'three';
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
renderer.xr.enabled = true; // 启用 WebXR

2. 添加 VR/AR 按钮:


import { VRButton } from 'three/examples/jsm/webxr/VRButton.js';
import { ARButton } from 'three/examples/jsm/webxr/ARButton.js';
document.body.appendChild( VRButton.createButton( renderer ) );
//或者
document.body.appendChild( ARButton.createButton( renderer ) );

3. 渲染循环:


renderer.setAnimationLoop( function () {
    renderer.render( scene, camera );
} );

代码流程图:

完整代码示例 (VR):


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Three.js WebXR VR</title>
		<style>
			body { margin: 0; }
		</style>
	</head>
	<body>
		<script type="module">
			import * as THREE from 'three';
			import { VRButton } from 'three/examples/jsm/webxr/VRButton.js';
			const scene = new THREE.Scene();
			const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
			const renderer = new THREE.WebGLRenderer({ antialias: true });
			renderer.setSize( window.innerWidth, window.innerHeight );
			document.body.appendChild( renderer.domElement );
			// 启用 WebXR
			renderer.xr.enabled = true;
			// 添加 VR 按钮
			document.body.appendChild( VRButton.createButton( renderer ) );
			// 添加一个立方体
			const geometry = new THREE.BoxGeometry( 1, 1, 1 );
			const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
			const cube = new THREE.Mesh( geometry, material );
			scene.add( cube );
			camera.position.z = 5;
			// 渲染循环
			renderer.setAnimationLoop( function () {
				cube.rotation.x += 0.01;
				cube.rotation.y += 0.01;
				renderer.render( scene, camera );
			} );
		</script>
	</body>
</html>

代码示例 (AR):

将上面的代码中的 VRButton 替换为 ARButton 即可：


document.body.appendChild( ARButton.createButton( renderer ) );

7.6.3 WebXR 场景中的对象放置与交互

在 VR/AR 体验中，与对象进行交互是至关重要的。以下是一些常用的技术：

1. 对象放置 (AR):

在 AR 场景中，通常需要根据现实世界的位置来放置虚拟对象。我们可以使用 XRHitTest API 来检测现实世界的表面，并放置对象。


// 在 AR 会话启动后
renderer.xr.addEventListener( 'sessionstart', async function ( event ) {
    const session = renderer.xr.getSession();
    const hitTestSource = await session.requestHitTestSource( { space: renderer.xr.getReferenceSpace() } );
    renderer.setAnimationLoop( function () {
        const referenceSpace = renderer.xr.getReferenceSpace();
        const frame = renderer.xr.getFrame();
        if ( hitTestSource ) {
            const hitTestResults = frame.getHitTestResults( hitTestSource );
            if ( hitTestResults.length > 0 ) {
                const hit = hitTestResults[ 0 ];
                const pose = hit.getPose( referenceSpace );
                // 更新对象的位置和方向
                object.position.copy( pose.transform.position );
                object.quaternion.copy( pose.transform.orientation );
            }
        }
        renderer.render( scene, camera );
    } );
} );

2. 使用射线投射进行交互:

射线投射 (Raycasting) 是一种常用的交互技术，可以模拟从控制器发射出的光线，并检测与场景中对象的碰撞。


import { Raycaster } from 'three';
const raycaster = new Raycaster();
const tempMatrix = new THREE.Matrix4();
// 在渲染循环中
function render() {
    // 获取控制器的姿势
    const controller = renderer.xr.getController( 0 ); // 获取第一个控制器
    if ( controller ) {
        tempMatrix.identity().extractRotation( controller.matrixWorld );
        raycaster.ray.origin.setFromMatrixPosition( controller.matrixWorld );
        raycaster.ray.direction.set( 0, 0, - 1 ).applyMatrix4( tempMatrix );
        // 检测射线与对象的碰撞
        const intersects = raycaster.intersectObjects( scene.children );
        if ( intersects.length > 0 ) {
            // 处理碰撞事件
            intersects[ 0 ].object.material.color.set( 0xff0000 ); // 将碰撞对象变成红色
        } else {
            // 没有碰撞，恢复颜色
            scene.children.forEach(child => {
              if (child.material) {
                child.material.color.set(0x00ff00);
              }
            });
        }
    }
    renderer.render( scene, camera );
}

流程图:

7.6.4 WebXR 中的手部追踪

WebXR API 允许访问用户的手部追踪数据，从而实现更自然的交互。

1. 请求手部追踪功能:


// 在请求会话时，添加 optionalFeatures
const sessionInit = { optionalFeatures: [ 'hand-tracking' ] };
navigator.xr.requestSession( 'immersive-vr', sessionInit ).then( onSessionStarted );
function onSessionStarted( session ) {
  // ...
}

2. 获取手部关节数据:


// 在渲染循环中
const hand1 = controller1.getObjectByName( 'hand' ); // 获取手部对象
const hand2 = controller2.getObjectByName( 'hand' );
if ( hand1 && hand2) {
    // 获取手部关节数据
    const handPose1 = frame.getJointPose( hand1.joints['wrist'], renderer.xr.getReferenceSpace() );
    const handPose2 = frame.getJointPose( hand2.joints['wrist'], renderer.xr.getReferenceSpace() );
    if ( handPose1 ) {
        // 更新手部关节的位置和方向
        hand1.matrix.fromArray( handPose1.transform.matrix );
        hand1.matrix.decompose( hand1.position, hand1.quaternion, hand1.scale );
    }
    if ( handPose2 ) {
        // 更新手部关节的位置和方向
        hand2.matrix.fromArray( handPose2.transform.matrix );
        hand2.matrix.decompose( hand2.position, hand2.quaternion, hand2.scale );
    }
}

注意： 手部追踪需要设备支持，并且用户需要授予权限。

7.6.5 优化 WebXR 性能

WebXR 应用对性能要求很高，因为需要以较高的帧率渲染两个视图 (VR) 或叠加虚拟对象到现实世界 (AR)。以下是一些优化技巧：

减少场景复杂度: 尽可能减少场景中的三角形数量和材质数量。
使用 LOD (Level of Detail): 根据对象距离相机的距离，使用不同精细度的模型。
优化材质: 使用简单的材质，避免复杂的着色器计算。
启用 GPU 实例化: 如果需要渲染大量相同的对象，可以使用 GPU 实例化来减少绘制调用。
使用 WebGL2: WebGL2 提供了更多的优化功能，例如纹理压缩和多重渲染目标。
使用性能分析工具: 使用浏览器的性能分析工具来识别性能瓶颈。

7.6.6 总结

WebXR 为 Web 开发者带来了创建沉浸式 VR/AR 体验的无限可能。 Three.js 提供了强大的 WebXR 支持，使得构建这些体验变得更加容易。本文介绍了 WebXR 的基本概念、初始化、对象交互、手部追踪以及性能优化等方面。通过掌握这些知识，你可以开始构建自己的 WebXR 应用，并探索虚拟现实和增强现实的未来。

下一步学习方向:

深入研究 WebXR API 规范。
探索 Three.js 提供的 WebXR 示例。
尝试使用不同的 WebXR 设备和平台。
学习更多高级的 WebXR 技术，例如光照估计、遮挡和空间音频。

作者与出处

原作者：灏天文库

来源：灏天文库

原文： https://aiknowledge.cn/collection/220-threejs-3d%E5%8F%AF%E8%A7%86%E5%8C%96%E5%BC%80%E5%8F%91%E5%AE%9E%E6%88%98

整理：灏天文库整理

由灏天文库平台收录，内容或由平台用户上传，仅供学习交流