问题背景数字孪生 3D 资产怎么处理数字孪生是近几年比较火的方向工厂数字孪生、园区数字孪生、城市数字孪生。这类项目共同的技术挑战之一就是怎么处理大量、复杂、保密的 3D 模型资产——单个设备模型可能 200MB整个工厂场景汇总可能是 GB 级别且数据不能上传第三方。本文从实际项目经验出发给出数字孪生 Web 端的3D 资产处理完整流程LOD 分层建模、FBX → GLB 格式转换、Draco 压缩、贴图优化、Three.js LOD 切换实现并附某工厂数字孪生项目142 个模型的真实处理数据。一、数字孪生 3D 资产的特点跟普通 Web3D 项目相比数字孪生的模型资产有这几个特点来源复杂• CAD 软件AutoCAD、SolidWorks导出的精密零件• BIM 软件Revit、ArchiCAD导出的建筑模型• GIS 数据园区、城市地形• 人工建模的设备、机械模型体积巨大• 单个设备模型可能 200MB• 整个工厂场景汇总可能是 GB 级别精度要求不一致• 远景建筑低精度就行• 近景设备需要细节• 可交互的设备需要保留正确的几何结构数据敏感• 工厂布局、设备参数属于商业机密• 不能随便上传到第三方服务二、资产处理管线原始资产CAD/BIM/建模文件│▼[步骤1] 格式整理与分级│▼[步骤2] 按 LOD 分层建模│▼[步骤3] 导出为标准格式FBX/OBJ│▼[步骤4] 格式转换 → GLB│▼[步骤5] Draco 几何压缩│▼[步骤6] 贴图优化│▼[步骤7] 质检 上线三、详细操作步骤 1资产整理与分级把场景中的模型按距离相机的远近分三个层级层级说明精度要求面数上限LOD0近景 50m高50万/个LOD1中景50–200m中10万/个LOD2远景 200m低1万/个步骤 2–3建模和导出这步通常由美术完成导出格式统一为 FBX兼容性最好。步骤 4–5格式转换 压缩Zipoly这两步用Zipoly处理关键优势是完全离线适合保密项目。格式转换• 打开 Zipoly → 格式转换• FBX → GLB• 支持批量选文件夹处理Draco 压缩不同 LOD 层级用不同压缩级别v2.0.0 支持 Draco 和 Meshopt 双引擎数字孪生场景推荐 Draco兼容性广LOD 层级压缩级别原因LOD0近景5–6保留几何细节LOD1中景7平衡压缩率LOD2远景8–9高压缩率步骤 6贴图优化• LOD0 贴图保留 2K质量 80• LOD1 贴图降到 1K• LOD2 贴图512 或纯色步骤 7质检用 Zipoly 的 3D 查看器检查每个模型• 几何是否正确无变形、穿模• 材质是否正常贴图对齐、颜色正确• 特别检查 LOD0 的近景细节四、Web 端 LOD 切换实现classLODController{constructor(scene, camera) {this.scene scenethis.camera camerathis.models []// { position, lod0, lod1, lod2, current, loaded }}update() {constcamPos this.camera.positionthis.models.forEach(item{constdist camPos.distanceTo(item.position)lettargetLODif(dist 50) targetLOD lod0elseif(dist 200) targetLOD lod1elsetargetLOD lod2if(targetLOD ! item.current) {this.switchLOD(item, targetLOD)}})}asyncswitchLOD(item, lod) {// 卸载当前if(item.loaded) {this.scene.remove(item.loaded)}// 加载新 LODconstmodel awaitthis.load(item[lod])this.scene.add(model)item.loaded modelitem.current lod}}// 在渲染循环中更新functionanimate() {requestAnimationFrame(animate)lodController.update()renderer.render(scene, camera)}五、Three.js 加载 Draco 压缩模型import{GLTFLoader}fromthree/addons/loaders/GLTFLoader.jsimport{DRACOLoader}fromthree/addons/loaders/DRACOLoader.jsconstloader newGLTFLoader()constdracoLoader newDRACOLoader()// 将解码器文件放在内网服务器不依赖外网dracoLoader.setDecoderPath(/static/draco/)loader.setDRACOLoader(dracoLoader)asyncfunctionloadModel(url) {returnnewPromise((resolve, reject) {loader.load(url,gltfresolve(gltf.scene),null, reject)})}六、典型处理结果某工厂数字孪生项目142 个模型文件指标处理前处理后总体积3.8GB280MB平均单文件26.8MB2.0MBLOD0 平均-4.5MBLOD1 平均-1.2MBLOD2 平均-0.3MB首屏加载时间无法加载5.8s七、工具汇总工具用途Zipoly格式转换 Draco 压缩 3D 查看器离线Blender复杂材质修复、减面Three.jsWeb 端渲染引擎gltf-pipelineCI/CD 流水线中的自动化压缩Zipoly 官网https://zipoly.netlify.app