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

前端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() {