WebXR 与 Three.js：实现虚拟现实（VR）与增强现实（AR）体验

WebXR 是一项基于浏览器的 API，旨在为开发者提供在虚拟现实 (VR) 和增强现实 (AR) 环境中创建交互式体验的能力。结合 Three.js 的 3D 渲染能力，我们可以轻松构建令人惊艳的 VR 和 AR 应用。

在本文中，我们将从基础入手，逐步讲解如何使用 WebXR 和 Three.js 构建虚拟现实和增强现实应用，并通过代码示例实现实际效果。

---

一、WebXR 简介

1. 什么是 WebXR？

WebXR（Web Extended Reality）是一个开放的标准，用于支持 VR 和 AR 内容。它提供统一的接口，让开发者可以在浏览器中访问硬件设备（如 VR 头显、AR 眼镜）的能力。

2. 为什么选择 WebXR 和 Three.js？

• WebXR：跨平台，直接运行于支持 WebXR 的浏览器，无需安装额外软件。
• Three.js：提供丰富的 3D 渲染工具，兼容 WebXR，支持创建复杂的场景和交互。

3. WebXR 的应用场景

• VR 应用：虚拟旅游、游戏、教育培训。
• AR 应用：室内导航、商品试穿、虚拟装饰。

---

二、使用 Three.js 构建 WebXR 应用

1. 安装依赖

(1) 初始化项目

npm init -y
npm install three

(2) 安装 WebXR 支持库

Three.js 提供了 WebXR 支持，可以通过 three/examples/jsm 加载器使用。

---

2. 构建基础 VR 场景

(1) 初始化场景

创建一个基础的 VR 场景，包括摄像机、光源和对象。

import * as THREE from 'three';
import { XRControllerModelFactory } from 'three/examples/jsm/webxr/XRControllerModelFactory.js';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';

// 创建场景
const scene = new THREE.Scene();
scene.background = new THREE.Color(0x202020);

// 创建摄像机
const camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 0.1, 100);
camera.position.set(0, 1.6, 3); // 模拟站立的高度

// 创建渲染器
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.xr.enabled = true; // 启用 WebXR
document.body.appendChild(renderer.domElement);

// 添加光源
const light = new THREE.DirectionalLight(0xffffff, 1);
light.position.set(5, 10, 7.5);
scene.add(light);

// 添加一个简单的几何体
const geometry = new THREE.BoxGeometry(0.5, 0.5, 0.5);
const material = new THREE.MeshStandardMaterial({ color: 0x0077ff });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

// 动画循环
function animate() {
    renderer.setAnimationLoop(() => {
        renderer.render(scene, camera);
    });
}
animate();

(2) 启用 WebXR

通过 navigator.xr 检查浏览器是否支持 WebXR。

if ('xr' in navigator) {
    console.log('WebXR is supported');
} else {
    console.error('WebXR is not supported on this browser');
}

(3) 添加 VR 按钮

Three.js 提供了一个简单的按钮，允许用户快速进入 VR 模式。

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

---

3. 增加交互功能

(1) 添加控制器

通过 XR 控制器捕获用户的输入（如手柄或头显的按钮）。

const controller1 = renderer.xr.getController(0); // 获取第一个控制器
scene.add(controller1);

const controller2 = renderer.xr.getController(1); // 获取第二个控制器
scene.add(controller2);

(2) 控制器模型

可视化用户的控制器，帮助用户定位手柄。

const controllerModelFactory = new XRControllerModelFactory();
const controllerGrip1 = renderer.xr.getControllerGrip(0);
controllerGrip1.add(controllerModelFactory.createControllerModel(controllerGrip1));
scene.add(controllerGrip1);

(3) 触发事件

为控制器添加触发事件，响应用户的点击或其他交互。

controller1.addEventListener('selectstart', () => {
    console.log('Button Pressed');
});

controller1.addEventListener('selectend', () => {
    console.log('Button Released');
});

---

4. 构建 AR 应用

(1) 启用 AR 模式

AR 模式需要设置渲染器的 WebXR 会话类型为 "immersive-ar"。

renderer.xr.setSessionInit({
    optionalFeatures: ['local-floor', 'bounded-floor', 'hit-test']
});

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

(2) 平面检测

在 AR 模式下，可以通过平面检测功能将虚拟物体放置在真实场景中。

renderer.xr.getSession().requestHitTestSource({ space: renderer.xr.getReferenceSpace() })
    .then((source) => {
        // 检测到平面时执行
    });

(3) 添加虚拟物体

将虚拟物体放置到用户点击的真实位置。

const reticle = new THREE.Mesh(
    new THREE.RingGeometry(0.1, 0.15, 32),
    new THREE.MeshBasicMaterial({ color: 0x00ff00 })
);
reticle.rotation.x = -Math.PI / 2;
scene.add(reticle);

---

三、扩展功能

1. 动画与特效

• 使用 Three.js 的动画系统为 VR 和 AR 场景增加动态效果。
• 添加粒子系统和后期处理效果，提升视觉体验。

2. 多人协作

通过 WebRTC 或 WebSocket 实现多人在线的共享 VR/AR 环境。

3. 性能优化

• 减少几何体面数，使用 InstancedMesh 渲染大量重复对象。
• 使用 LOD（细节层次）优化远处物体的渲染。

---

四、总结与展望

通过 WebXR 和 Three.js，我们能够快速创建跨平台的 VR 和 AR 应用，轻松实现从虚拟场景到真实场景的无缝过渡。在未来，这项技术将在游戏、教育、医疗等领域发挥越来越重要的作用。

不妨动手试试，通过 Three.js 打造属于你的沉浸式体验吧！