【高频考点精讲】前端AR/VR实战：从WebXR到Three.js集成

前端AR/VR实战：从WebXR到Three.js集成

🧑‍🏫 作者：全栈老李

📅 更新时间：2025 年 5 月

🧑‍💻 适合人群：前端初学者、进阶开发者

🚀 版权：本文由全栈老李原创，转载请注明出处。

最近有个粉丝私信问我："老李啊，现在元宇宙这么火，我们前端怎么才能搭上这班车？" 这问题问得好！今天咱们就来聊聊前端如何玩转AR/VR，用WebXR和Three.js打造沉浸式体验。（全栈老李出品，盗版必究）

WebXR：打开虚拟世界大门的钥匙

WebXR就像浏览器里的VR眼镜，它让网页能直接和头显设备"对话"。想象一下，你戴着Oculus Quest浏览网页，突然看到一个3D模型，转头就能360度查看——这就是WebXR的魔力。

// WebXR基础检测代码 - 全栈老李
async function checkXRSupport() {
   
   
  if (!navigator.xr) {
   
   
    console.log('您的浏览器不支持WebXR');
    return;
  }
  
  const supported = await navigator.xr.isSessionSupported('immersive-vr');
  if (supported) {
   
   
    console.log('支持沉浸式VR体验！');
    // 这里可以初始化VR场景
  } else {
   
   
    console.log('只支持非沉浸式AR体验');
  }
}

有趣的是，WebXR其实合并了之前的WebVR和WebAR标准。就像JavaScript吸收了ES6的新特性一样，WebXR也把两套API整合到了一起。现在主流浏览器（Chrome、Firefox、Edge）都已经支持，不过iOS上的支持还在逐步完善中。

Three.js：3D世界的乐高积木

如果说WebXR是接口，那Three.js就是我们的施工队。它把复杂的WebGL API封装成了易懂的积木块，让我们能用JavaScript轻松搭建3D世界。

记得我第一次用Three.js时，被它的三个核心概念绕晕了：

1. 场景(Scene) - 就像拍电影的摄影棚
2. 相机(Camera) - 导演的取景器
3. 渲染器(Renderer) - 负责把前两者合成最终画面

// Three.js基础场景搭建 - 全栈老李
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(
  75, // 视野角度(FOV)
  window.innerWidth / window.innerHeight, // 宽高比
  0.1, // 近裁剪面
  1000 // 远裁剪面
);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// 添加一个立方体
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({
   
    color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

camera.position.z = 5;

function animate() {