电商直播正在从平面展示向三维交互加速演进。当主播能够在直播画面中随时旋转、缩放并切换颜色的3D商品模型，观众的停留时长和购买转化率都有显着提升。本文将完整讲解从AI 3D建模工具生成商品模型到Three.js Web部署的全流程，帮助品牌方和内容创作者搭建属于自己的一套实时3D商品展示方案。
AI生成商品模型的优化与导出配置
使用 Meshy 、Tripo或Rodin等AI 3D建模工具生成商品模型后，首要任务是对模型进行打印就绪优化。AI生成的原生模型通常存在三角面过多、拓扑混乱和UV展开不理想的问题。建议先将模型导入 Blender 进行几何清理：使用Decimate修改器将面数控制在5万-10万个三角面（适用于Web展示），然后在Shading工作区检查材质节点，移除多余的Principled BSDF节点，统一为一个主材质节点。
导出GLB格式时需要注意几个关键设置。在Blender的导出面板中，勾选Selected Objects确保只导出目标模型。在下方的Include区域中，勾选PBR材质（Textures），将纹理打包进GLB文件。压缩选项建议开启Draco Mesh Compression，压缩等级设为中等，能将模型文件体积压缩60-75%，大幅提升Web端的加载速度。对于电商场景，单个GLB文件控制在5MB以内是最理想的加载体验。
Three.js场景搭建与模型加载
在前端项目中，使用Three.js的GLTFLoader加载优化后的GLB模型是最直接的方式。核心代码结构如下：创建一个Scene实例，设置一个半球光（HemisphereLight）作为环境光，两个定向光（DirectionalLight）从不同方向照亮模型。相机建议使用PerspectiveCamera，初始位置设置在模型前方45度俯角，FOV设为45以获得舒适的观感。模型加载完成后，调用model.position.set(0, 0, 0)将模型居中，然后配合自动旋转动画让模型在加载后自动旋转展示全貌。
为了实现直播中实时互动，需要在场景中添加轨道控制器（OrbitControls）。控制器配置方面，设置minDistance和maxDistance限制缩放范围（建议0.5-5倍），启用enablePan为false禁用平移（商品展示不需要平移），autoRotate设置为true并搭配autoRotateSpeed参数控制旋转速度（默认2.0）。当用户点击拖拽时，自动旋转暂停，释放后3秒再恢复。这种交互逻辑在直播场景中最为自然。
材质切换与颜色定制功能实现
电商场景中常见的需求是让观众看到同一商品的不同颜色版本。在Three.js中的实现思路是：模型加载后，遍历其所有Mesh子对象，将每个Mesh的material存储到一个数组中。当用户点击颜色按钮时，遍历材质数组，调用material.color.setHex(newColor)更新颜色。需要注意的是，如果模型使用了多种材质（如金属部分和橡胶部分），需要为不同的材质组设置独立的颜色切换逻辑。
更进阶的方案是使用纹理切换：预先生成不同颜色/花纹的PBR纹理图集，在运行时通过修改材质的map属性来实现无缝切换。这种方案比单纯改颜色更真实，因为纹理保留了材质的粗糙度和金属度变化。同时可以在UI中添加对比度滑块、粗糙度滑块等参数，让主播实时调整模型的视觉风格，增强直播互动性。
移动端性能优化与直播流集成
电商直播的主力观看设备是手机，因此移动端性能优化至关重要。推荐采用以下策略：模型面数控制在5万三角面以下，纹理贴图分辨率不超过2048×2048，关闭不必要的阴影映射（尤其是软阴影）。Three.js渲染器设置中，将pixel ratio限制为max 2，启用powerPreference为high-performance。对于低端设备，可以动态降级模型LOD。
将3D展示窗口集成到直播推流中的方案有两种。一种是通过OBS Browser Source直接嵌入部署好的Three.js页面，主播在浏览器中操作模型，画面通过OBS采集后推送到直播间。另一种是使用WebSocket或WebRTC协议，将模型展示页面的渲染帧实时同步到直播控制台，适合对延迟有更高要求的专业直播间。
部署与验证检查清单
完成开发后，建议对照以下清单逐项验证：模型能否在3G和4G网络下均成功加载（加载时间不超过5秒）；触控交互（单指旋转、双指缩放）在iOS和Android上是否流畅；材质切换功能在所有主流浏览器（Chrome/Safari/Edge）上是否正常；在低端设备上的帧率是否稳定在30fps以上。通过这套清单，可以确保你的AI 3D电商展示方案在真实直播场景中可靠运行。随着WebGPU在移动端的普及，实时3D商品展示的性能和品质将在未来一年内迎来更大的飞跃。
参考来源：Three.js官方文档 - GLTFLoader与OrbitControls模块；Google Web Fundamentals移动端Web 3D性能优化指南；阿里1688电商3D商品展示技术白皮书。