Three.js 与 WebXR：在浏览器中搭建你的虚拟奇幻王国

在数字世界的浩瀚宇宙里，虚拟现实（VR）和增强现实（AR）就像是两颗最闪耀的新星，吸引着无数开发者和探索者的目光。而今天，我们就要手握 Three.js 和 WebXR 这两把神奇的钥匙，打开通往沉浸式体验王国的大门。

初识 Three.js 与 WebXR

Three.js 就像是一位技艺精湛的数字建筑师，它擅长用 JavaScript 在浏览器中搭建各种 3D 场景和模型。从巍峨的虚拟城堡到栩栩如生的角色，Three.js 都能轻松驾驭。而 WebXR，则是一位连接现实与虚拟的使者，它提供了一套强大的 API，让我们的浏览器能够与 VR/AR 设备进行 "对话"，实现沉浸式的交互体验。

想象一下，Three.js 负责搭建一个美轮美奂的魔法世界，而 WebXR 则为我们递上一副 "魔法眼镜"，戴上它，我们就能瞬间踏入这个奇幻世界，自由探索。这二者的结合，堪称是天作之合，让我们在浏览器中开发 VR/AR 应用变得不再遥不可及。

搭建开发环境

在开始这场奇妙的开发之旅前，我们得先准备好 "装备"。首先，确保你的电脑上安装了支持 WebXR 的浏览器，比如 Chrome。然后，创建一个新的 HTML 文件，在标签中引入 Three.js 库：

xml 复制代码

<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r152/three.min.js"></script>
</head>

这就像是给我们的数字建筑师 Three.js 颁发了一张 "入场券"，让它能够进入我们的项目中大展身手。

接着，在标签中，我们创建一个用于渲染 3D 场景的容器：

xml 复制代码

<body>
    <div id="canvas-container"></div>
    <script src="script.js"></script>
</body>

这个容器就像是一块空白的画布，等待着 Three.js 在上面绘制出精彩的画面。

创建基础 Three.js 场景

现在，让我们打开script.js文件，开始编写代码。首先，创建一个场景、一个相机和一个渲染器：

javascript 复制代码

// 创建场景，这是我们的虚拟世界的"舞台"
const scene = new THREE.Scene();
// 创建透视相机，就像是我们观察虚拟世界的"眼睛"
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;
// 创建渲染器，它负责把场景和相机中的内容绘制到页面上
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.getElementById('canvas-container').appendChild(renderer.domElement);

在这段代码中，我们创建了一个空的场景，就像搭好了一个舞台；透视相机决定了我们以怎样的视角观察这个舞台；而渲染器则负责把舞台上的一切呈现在我们眼前。

引入 WebXR

接下来，是 WebXR 登场的时候了。我们要先检查浏览器是否支持 WebXR：

arduino 复制代码

if ('xr' in navigator) {
    // 浏览器支持WebXR，准备开启沉浸式体验
    console.log("你的浏览器支持WebXR，准备进入奇幻世界！");
} else {
    console.log("很遗憾，你的浏览器不支持WebXR，无法开启这场冒险。");
}

如果浏览器支持 WebXR，我们就可以请求进入沉浸式模式。这里以 VR 模式为例：

ini 复制代码

async function enterVR() {
    const session = await navigator.xr.requestSession('immersive-vr');
    renderer.xr.setReferenceSpaceType('local');
    renderer.xr.enabled = true;
    session.addEventListener('end', () => {
        renderer.xr.enabled = false;
    });
    return session;
}

这段代码就像是向 WebXR 这位使者发出了进入 VR 世界的邀请，当得到允许后，我们就可以设置渲染器的相关参数，让它能够适配 VR 设备的显示。

整合 Three.js 与 WebXR

现在，我们要把 Three.js 创建的场景和 WebXR 的沉浸式体验结合起来。在渲染循环中，我们需要根据 WebXR 设备的输入来更新相机的位置和角度：

scss 复制代码

function animate() {
    requestAnimationFrame(animate);
    if (renderer.xr.isPresenting) {
        const session = renderer.xr.getSession();
        const frame = session.requestAnimationFrame();
        frame.then((newFrame) => {
            const pose = newFrame.getViewerPose(renderer.xr.getReferenceSpace());
            if (pose) {
                for (const view of pose.views) {
                    camera.matrix.fromArray(view.transform.matrix);
                    renderer.setAnimationLoop(() => {
                        renderer.render(scene, camera);
                    });
                }
            }
            renderer.endFrame(newFrame);
        });
    } else {
        renderer.render(scene, camera);
    }
}
animate();

这段代码就像是为我们的虚拟世界注入了 "灵魂"，让它能够根据我们在 VR 设备中的动作实时更新画面，实现真正的沉浸式体验。

添加互动元素

为了让我们的 VR/AR 应用更加有趣，我们可以添加一些互动元素。比如，当我们靠近一个虚拟物体时，它会发生变化：

scss 复制代码

// 创建一个立方体作为互动对象
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
function checkInteraction() {
    const cameraPosition = camera.position;
    const cubePosition = cube.position;
    const distance = Math.sqrt((cameraPosition.x - cubePosition.x) * (cameraPosition.x - cubePosition.x) + 
                               (cameraPosition.y - cubePosition.y) * (cameraPosition.y - cubePosition.y) + 
                               (cameraPosition.z - cubePosition.z) * (cameraPosition.z - cubePosition.z));
    if (distance < 2) {
        cube.material.color.set(0xff0000);
    } else {
        cube.material.color.set(0x00ff00);
    }
}
function animate() {
    requestAnimationFrame(animate);
    if (renderer.xr.isPresenting) {
        // 省略与前面相同的WebXR相关代码
    } else {
        renderer.render(scene, camera);
    }
    checkInteraction();
}
animate();

通过这段代码，我们实现了一个简单的互动逻辑，让虚拟世界变得更加生动有趣。

结语

到这里，我们已经完成了一次 Three.js 与 WebXR 结合开发 VR 应用的奇妙旅程。当然，这只是一个开始，在这个虚拟与现实交织的世界里，还有无数的可能性等待着我们去探索。你可以尝试添加更多复杂的模型、更丰富的互动效果，甚至开发出属于自己的 AR 应用。相信随着不断的学习和实践，你一定能够在这个数字宇宙中创造出令人惊叹的作品！

以上文章涵盖了 Three.js 与 WebXR 集成开发的关键步骤。你若觉得某些部分需要补充细节，或想增加特定功能的实现，欢迎随时和我说。