先说说技术选型。底层用了Three.js做3D渲染，配合WebXR Device API。UI层自然是Vue 3，组合式API管理XR状态特别方便。最开始尝试用原始的JavaScript直接操作DOM，后来发现用Vue的ref和reactive来管理场景状态要优雅得多。
关键代码结构是这样的：创建一个Vue应用，在onMounted生命周期里初始化3D场景。这里要注意的是，WebXR需要用户手势才能启动，所以得在click事件里调用session.start()。我把它做成了一个按钮，点击后进入AR模式：
模型加载这块遇到了不少坑。最初直接加载的glTF模型，发现在移动端性能堪忧。后来做了模型压缩，把纹理尺寸减小，还实现了按需加载。用Vue的computed属性来管理模型列表很合适，当过滤器条件变化时，自动更新可用的模型数组。
交互部分是最费时间的。要实现拖拽放置功能，需要处理射线检测。这里用到了Three.js的Raycaster，结合Vue的mouse事件监听：
性能优化方面，发现同时渲染多个高质量模型在手机上会很卡。最后做了动态LOD（Level of Detail），根据物体与摄像头的距离切换不同精度的模型。还用Vue的watch监听了性能指标，当帧率下降时自动降低渲染质量。
有个特别实用的功能是保存场景状态。利用Vue的reactive特性，直接把整个场景状态序列化保存到localStorage：
调试过程也值得一提。在PC端可以用Chrome的XR模拟器，但真机测试时发现了很多问题。比如不同设备对光照估计的支持程度不同，最后只好做了降级方案，在不支持的环境下使用固定光源。
这个项目最让我惊喜的是Vue的响应式系统在管理3D场景状态时的便利性。传统方式需要手动更新很多对象，现在只需要修改data，视图自动更新。比如旋转物体：
部署时遇到了SSL证书问题，因为WebXR要求安全上下文。最后用了Let's Encrypt的免费证书，配置在Nginx上。还发现iOS和Android对WebXR的支持程度不同，需要做很多兼容性处理。
总的来说，Vue+WebXR这个技术栈潜力很大。虽然现在还有一些兼容性问题，但已经能做出很酷的MR应用。下一步打算加入多人协作功能，让多个用户可以在同一个AR场景中交互。