先说说环境搭建。脚手架还是用Vue CLI或Vite，但需要额外安装三位大佬：Three.js（WebGL渲染核心）、VueThreeJs（Vue3的Three.js钩子库）以及WebXR手柄模拟器。创建新项目时记得在index.html里加一行<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">，这个视口配置能有效避免移动端XR设备显示异常。
重点来了场景初始化代码。在main.vue里直接使用vue-threejs的<Renderer>组件创建WebGL渲染器，比原生Three.js省了30%的样板代码。关键配置在onMounted钩子里：
特别注意setAnimationLoop替代了传统的requestAnimationFrame，这是WebXR会话启用的必要条件。
模型加载这块有个坑：GLTFLoader必须配合DRACOLoader使用。在created生命周期里初始化加载器：
公开的Draco编码模型能减少70%的模型体积，特别是复杂VR场景必备。
交互实现堪称Vue的绝杀技。传统方案要手动维护射线检测，而用Vue的ref系统直接给物体挂载交互状态：
这种响应式交互代码比原生实现简洁得多，且自动管理事件绑定/解绑。
状态管理用Pinia比Vuex更合适，因为VR应用需要频繁更新相机位姿、手柄位置等数据。建议创建useXRStore：
移动端适配要特别注意性能。Vue的响应式系统在VR场景可能成为性能瓶颈，解决方案是：对高频更新的姿态数据使用shallowRef，对静态场景对象使用markRaw。实测帧率能从45fps提升到稳定90fps。
遇到最诡异的问题是XR会话突然断开，最后发现是Vue开发服务器的HRT在作祟。解决方法是在vite.config.js里配置server.hmr.protocol = 'wss'，这个坑我爬了整整两天。
打包部署时要注意静态资源处理。Three.js的DRACO解码器需要单独拷贝到dist目录，在vue.config.js里配置ChainWebpack：
现在项目已经稳定运行在Oculus Quest 2和PICO Neo3上，最让我惊喜的是Vue的devtools居然能实时调试XR场景中的组件状态。下次准备尝试用Vue 3.2的<script setup>+TypeScript重构代码，预计还能减少20%的包体积。
说实话，用Vue开发VR项目最初只是个实验，但现在团队已经决定把所有WebXR项目都迁移到Vue3技术栈。如果你也在考虑前端框架如何与3D/AR/VR结合，不妨试试这个方案，GitHub上vue-threejs的示例代码足够让你快速入门。