先说说技术选型。现在常见的方案有WebXR Device API和第三方库（比如AR.js、Three.js的AR扩展）。考虑到项目要快速上线，我直接用了Three.js+WebRTC的方案。原理很简单：通过navigator.mediaDevices.getUserMedia调用手机摄像头，把视频流作为Three.js场景的背景，再把3D模型叠加到视频上。虽然比不上原生AR应用的精度，但对展示家具绰绰有余了。
具体实现分四步走：
第一步是创建视频纹理。这个环节要注意浏览器兼容性问题，iOS上的Safari对视频自动播放有限制，得加上muted和playsinline属性：
第二步是加载3D模型。这里推荐用GLTF格式，模型文件小且支持动画。Three.js的GLTFLoader加载完成后，要特别注意调整模型尺寸。刚开始我加载的沙发模型大得像巨人用的，后来发现是因为没有统一单位制。最好在建模阶段就约定好1个单位对应1米，或者通过scale系数动态调整。
第三步是用户交互设计。最初我用的是点击放置模型，测试时发现用户更习惯拖拽操作。于是改成拖拽调整位置，双指缩放旋转模型。这里要处理触摸事件和模型选中的射线检测，比较繁琐但体验提升明显。
第四步是光照融合。直接叠加的3D模型会显得很假，因为环境光和模型光照不匹配。后来我在场景中添加了环境光、平行光，还根据摄像头亮度动态调整模型材质。有个取巧的办法：在用户放置模型时，截取当前位置的主色调作为环境光参考值。
过程中遇到最头疼的问题是性能优化。中低端手机上同时处理视频流和3D渲染容易卡顿。后来做了这些优化：将模型面数控制在5万以内，压缩纹理尺寸，对非可见区域禁用渲染，还有最关键的------使用OffscreenCanvas在Web Worker中处理计算密集型任务。
让我意外的是，实现过程中最简单的反而是模型跟踪。因为家具展示不需要精确的平面检测，我们直接用了图像标记（Marker）方案。在用户家里贴个简易二维码，模型就能稳定固定在指定位置。虽然土了点，但比SLAM方案稳定多了，还不吃性能。
现在这个功能已经上线三个月，数据统计发现用户平均使用时长比普通商品详情页高出4倍。最有意思的是，深夜时段使用AR功能的比例特别高，估计是大家喜欢睡前琢磨家具摆放。有个用户还反馈说通过这个功能发现自家客厅放不下三人沙发，避免了退货损失。
不过要吐槽的是，iOS和安卓的表现差异实在太大。同样的代码在安卓机上流畅运行，在iPhone12上却出现模型闪烁。最后查出来是Safari对WebGL的深度缓冲处理有差异，加上preserveDrawingBuffer:true才解决。这种平台特性问题最耗时间，建议后来者提前留足测试时间。
总结来看，前端AR技术已经能满足不少实际场景。关键要把握住：轻量级模型、合理的交互设计、跨平台兼容性测试。如果要做更复杂的效果（比如平面检测、遮挡处理），建议直接上WebXR Device API。不过说实话，现在纯前端方案的精度还是比不上原生应用，但对大多数营销场景已经够用了。下一步我们打算加入多人AR功能，让不同用户能在同一个空间查看家具搭配效果，那又是新的技术挑战了。