第八部分-周边生态与工具——38. 模型工具

38. 模型工具1. 概述模型工具用于创建、转换、优化 3D 模型。Blender 是最常用的建模软件glTF 工具用于模型转换和优化。┌─────────────────────────────────────────────────────────────┐ │ 模型工具生态 │ ├─────────────────────────────────────────────────────────────┤ │ │ │ Blender │ │ ├── 建模创建和编辑模型 │ │ ├── 材质纹理和材质设置 │ │ ├── 动画骨骼和关键帧动画 │ │ ├── UV 展开纹理坐标 │ │ └── 导出glTF/GLB 格式 │ │ │ │ glTF 工具 │ │ ├── glTF-Pipeline模型优化 │ │ ├── glTF-Validator格式验证 │ │ ├── Draco网格压缩 │ │ └── Basis纹理压缩 │ │ │ └─────────────────────────────────────────────────────────────┘2. Blender 基础2.1 安装和配置下载 Blenderhttps://www.blender.org/安装 glTF 导出插件内置2.2 模型导出设置导出设置 - 格式glTF 2.0 (.glb / .gltf) - 包含几何体、材质、动画、变形 - 压缩启用 Draco 压缩 - 纹理嵌入或分离2.3 模型优化建议优化要点 1. 减少多边形数量 2. 合并材质 3. 使用纹理图集 4. 烘焙光照贴图 5. 使用 LOD细节层次3. glTF 工具3.1 glTF-Pipelinenpminstall-ggltf-pipeline# 转换 glTF 到 glbgltf-pipeline-imodel.gltf-omodel.glb# 压缩纹理gltf-pipeline-imodel.glb-omodel-compressed.glb--compressTextures# 应用 Draco 压缩gltf-pipeline-imodel.glb-omodel-draco.glb--draco.compressionLevel103.2 glTF-Validatornpminstall-ggltf-validator# 验证模型gltf-validator model.glb# 详细输出gltf-validator model.glb--verbose3.3 Draco 压缩// Three.js 中使用 Dracoimport{GLTFLoader}fromthree/examples/jsm/loaders/GLTFLoader.js;import{DRACOLoader}fromthree/examples/jsm/loaders/DRACOLoader.js;constloadernewGLTFLoader();constdracoLoadernewDRACOLoader();dracoLoader.setDecoderPath(three/examples/jsm/libs/draco/);loader.setDRACOLoader(dracoLoader);loader.load(compressed-model.glb,(gltf){scene.add(gltf.scene);});3.4 Basis 纹理压缩import{BasisTextureLoader}fromthree/examples/jsm/loaders/BasisTextureLoader.js;constbasisLoadernewBasisTextureLoader();basisLoader.setTranscoderPath(three/examples/jsm/libs/basis/);basisLoader.load(texture.basis,(texture){constmaterialnewTHREE.MeshStandardMaterial({map:texture});});4. 模型优化工作流4.1 减面优化// 使用 SimplifyModifier 减面import{SimplifyModifier}fromthree/examples/jsm/modifiers/SimplifyModifier.js;constmodifiernewSimplifyModifier();constsimplifiedGeometrymodifier.modify(originalGeometry,Math.floor(originalGeometry.attributes.position.count/2));4.2 LOD 生成import{LOD}fromthree;constlodnewLOD();// 添加不同细节级别lod.addLevel(highDetailMesh,0);// 近距离lod.addLevel(mediumDetailMesh,20);// 中距离lod.addLevel(lowDetailMesh,50);// 远距离scene.add(lod);5. 完整示例import*asTHREEfromthree;import{OrbitControls}fromthree/examples/jsm/controls/OrbitControls.js;import{GLTFLoader}fromthree/examples/jsm/loaders/GLTFLoader.js;import{DRACOLoader}fromthree/examples/jsm/loaders/DRACOLoader.js;importGUIfromlil-gui;constscenenewTHREE.Scene();scene.backgroundnewTHREE.Color(0x111122);constcameranewTHREE.PerspectiveCamera(45,window.innerWidth/window.innerHeight,0.1,1000);camera.position.set(5,4,8);camera.lookAt(0,0,0);constrenderernewTHREE.WebGLRenderer({antialias:true});renderer.setSize(window.innerWidth,window.innerHeight);renderer.shadowMap.enabledtrue;document.body.appendChild(renderer.domElement);constcontrolsnewOrbitControls(camera,renderer.domElement);controls.enableDampingtrue;// 光源constambientLightnewTHREE.AmbientLight(0x404040,0.5);scene.add(ambientLight);constdirectionalLightnewTHREE.DirectionalLight(0xffffff,1);directionalLight.position.set(5,10,7);directionalLight.castShadowtrue;scene.add(directionalLight);// 辅助对象constaxesHelpernewTHREE.AxesHelper(5);scene.add(axesHelper);constgridHelpernewTHREE.GridHelper(10,20);scene.add(gridHelper);// 地面constplaneGeometrynewTHREE.PlaneGeometry(8,8);constplaneMaterialnewTHREE.MeshStandardMaterial({color:0x336699,side:THREE.DoubleSide});constplanenewTHREE.Mesh(planeGeometry,planeMaterial);plane.rotation.x-Math.PI/2;plane.position.y-1;plane.receiveShadowtrue;scene.add(plane);// 创建简单模型Blender 导出的模型示例constgroupnewTHREE.Group();// 身体constbodyGeonewTHREE.BoxGeometry(0.8,1,0.6);constbodyMatnewTHREE.MeshStandardMaterial({color:0x44aa88,metalness:0.5,roughness:0.3});constbodynewTHREE.Mesh(bodyGeo,bodyMat);body.castShadowtrue;group.add(body);// 头部constheadGeonewTHREE.SphereGeometry(0.5,32,32);constheadMatnewTHREE.MeshStandardMaterial({color:0x88aaff,metalness:0.2,roughness:0.4});constheadnewTHREE.Mesh(headGeo,headMat);head.position.y0.7;head.castShadowtrue;group.add(head);// 眼睛consteyeGeonewTHREE.SphereGeometry(0.08,16,16);consteyeMatnewTHREE.MeshStandardMaterial({color:0xffffff});constleftEyenewTHREE.Mesh(eyeGeo,eyeMat);leftEye.position.set(-0.2,0.85,0.55);constrightEyenewTHREE.Mesh(eyeGeo,eyeMat);rightEye.position.set(0.2,0.85,0.55);group.add(leftEye,rightEye);// 手臂constarmGeonewTHREE.BoxGeometry(0.3,0.7,0.3);constarmMatnewTHREE.MeshStandardMaterial({color:0x44aa88});constleftArmnewTHREE.Mesh(armGeo,armMat);leftArm.position.set(-0.6,0.2,0);constrightArmnewTHREE.Mesh(armGeo,armMat);rightArm.position.set(0.6,0.2,0);group.add(leftArm,rightArm);group.position.set(0,0,0);group.castShadowtrue;scene.add(group);// LOD 示例constlodnewTHREE.LOD();// 高精度模型consthighDetailgroup.clone();highDetail.position.set(-2,0,0);// 中精度模型constmediumDetailnewTHREE.Mesh(newTHREE.BoxGeometry(0.8,1.2,0.8),newTHREE.MeshStandardMaterial({color:0x88aaff}));mediumDetail.position.set(-2,0,0);// 低精度模型constlowDetailnewTHREE.Mesh(newTHREE.SphereGeometry(0.6,8,8),newTHREE.MeshStandardMaterial({color:0x88aaff}));lowDetail.position.set(-2,0,0);lod.addLevel(highDetail,0);lod.addLevel(mediumDetail,3);lod.addLevel(lowDetail,6);scene.add(lod);// 加载外部模型示例代码需要实际文件// const loader new GLTFLoader();// const dracoLoader new DRACOLoader();// dracoLoader.setDecoderPath(three/examples/jsm/libs/draco/);// loader.setDRACOLoader(dracoLoader);//// loader.load(models/character.glb, (gltf) {// const model gltf.scene;// model.position.set(2, 0, 0);// model.scale.set(0.5, 0.5, 0.5);// scene.add(model);// });// GUI 控制constguinewGUI();constmodelFoldergui.addFolder(模型控制);modelFolder.add(group.position,x,-2,2).name(模型 X);modelFolder.add(group.position,y,-1,2).name(模型 Y);modelFolder.add(group.rotation,y,0,Math.PI*2).name(旋转);modelFolder.add(group.scale,x,0.5,1.5).name(缩放 X);modelFolder.add(group.scale,y,0.5,1.5).name(缩放 Y);modelFolder.add(group.scale,z,0.5,1.5).name(缩放 Z);modelFolder.open();constlodFoldergui.addFolder(LOD 控制);letlodDistance0;lodFolder.add({distance:0},distance,0,10).name(相机距离).onChange(val{lodDistanceval;constdistMath.abs(lodDistance);if(dist3)lod.levels[0].visibletrue;elselod.levels[0].visiblefalse;if(dist3dist6)lod.levels[1].visibletrue;elselod.levels[1].visiblefalse;if(dist6)lod.levels[2].visibletrue;elselod.levels[2].visiblefalse;});lodFolder.open();// 动画lettime0;functionanimate(){requestAnimationFrame(animate);time0.01;// 手臂摆动leftArm.rotation.zMath.sin(time)*0.5;rightArm.rotation.z-Math.sin(time)*0.5;controls.update();renderer.render(scene,camera);}animate();window.addEventListener(resize,onWindowResize,false);functiononWindowResize(){camera.aspectwindow.innerWidth/window.innerHeight;camera.updateProjectionMatrix();renderer.setSize(window.innerWidth,window.innerHeight);}6. 模型工具对比工具用途特点Blender建模/动画免费强大glTF-Pipeline优化命令行Draco压缩高效Basis纹理压缩高质量glTF-Validator验证格式检查7. 总结工具/技术用途Blender模型创建glTF-Pipeline模型优化Draco网格压缩Basis纹理压缩LOD细节层次SimplifyModifier减面