【高频考点精讲】前端AR/VR开发入门：WebXR API的基本使用场景

前端AR/VR开发入门：WebXR API的基本使用场景

‍ 作者：全栈老李

更新时间：2025 年 6 月

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

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

最近有个学员问我："老李啊，现在元宇宙这么火，我们前端能做点啥？" 我笑着告诉他："WebXR了解一下？" 今天咱们就来聊聊这个让前端工程师也能玩转AR/VR的神奇API。我是全栈老李，一个喜欢把复杂技术讲简单的技术博主。

WebXR是什么？能吃吗？

WebXR可不是什么新出的零食品牌，它是Web Extended Reality的缩写，简单说就是让浏览器支持增强现实(AR)和虚拟现实(VR)的一套API。想象一下，你打开浏览器就能体验AR/VR，不用装任何APP，是不是很酷？

// 全栈老李提示：检测浏览器是否支持WebXR
if (navigator.xr) {
   
  console.log('你的浏览器支持WebXR，可以开始玩耍了！');
} else {
   
  console.log('换个现代浏览器试试？');
}

先来点"开胃菜"：基础概念

WebXR主要处理三件事：

1. 设备追踪：知道你的头/手/控制器在哪
2. 场景渲染：把虚拟物体画出来
3. 用户输入：让你能跟虚拟世界互动

这就像开餐厅：

• 设备追踪是服务员，知道客人在哪
• 场景渲染是厨师，准备美味佳肴
• 用户输入是点餐系统，让客人能下单

上"主菜"：代码实战

让我们写个最简单的WebXR demo，在AR中显示一个立方体。别担心，代码很简单，全栈老李给你拆解：

// 全栈老李的WebXR基础示例
async function initXR() {
   
  // 1. 创建Three.js场景
  const scene = new THREE.Scene();
  const camera = new THREE.PerspectiveCamera();
  <