Three.js模型优化，减面压缩加载。_three.js 模型压缩

记录一下模型加载流程，因为要适配微信小程序，模型文件过大运行卡顿，需要常常修改模型文件，从blender 模型调整到加载过程中所需要的步骤。

1.模型文件比较精细的手动删除不需要部分，然后通过精简修改器减面操作，可最大限度压缩模型文件内存，对模型子 父集合调整好，动画调整到NLM通道，正常导出glb文件。

2.电脑切换NVM版本，我装啦两个版本

 一个高版本作为压缩模型所需，一个是为了配合vue版本打开。

输入d:回车进入D盘。在光标处输入 "cd 文件夹"，按Enter就可以进入目标文件夹

 之前用的Draco压缩glb，比较好用，压缩后在chorm浏览器开发模式里面的子父物体集合也能和blender相对应，但是和小程序里不太适配，后改用EXT_meshopt_compression算法压缩glb，效果和Draco差不多，但是网格文件被压缩混乱，子父物体找不到，对后期找相应部件模块影响很大，只做展示或者其他方法也能用。

安装：

npm install -g gltfpack --registry=https://registry.npmmirror.com

 对模型文件压缩：

 gltfpack -i 起重机.glb -o tm-me1.glb -cc

 压缩后文件大小是：

加载代码

 const le = new GLTFLoader().setPath("models/gltf/").setMeshoptDecoder( MeshoptDecoder);
            le.load("tm-me2.glb", function (glb) {
              model = glb.scene;
              //maxX= model.position;
             // model.position.z = maxX;
 
              glb.scene.traverse(function (node) {
                if (node instanceof THREE.Mesh) {
                  node.castShadow = true;
                }
              });
 
               parentObject = glb.scene
              const childObject = parentObject.getObjectByName("2");
              console.log(glb.scene);
 
              // matea = childObject.children[0].material.color;
              //console.log(childObject.children[0].material);
              mixer = new THREE.AnimationMixer(parentObject);
              childAnimation = glb.animations.find(
                (animation) => animation.name === "下移"
              );
              //执行播放动画
              mixer.clipAction(childAnimation).play();
              scene.add(glb.scene);
              document.body.addEventListener("touchmove", onPointerMove);
              document.body.addEventListener("mousemove", onPointerMove);
              render();
            });

 模型正常加载执行播放动画。

平行光改为环境光

const dirLight = new THREE.AmbientLight(0xffffff, 2);
        dirLight.position.set(200, 200, 220);
          scene.add(dirLight);

平行光对后面新赋予材质有影响，或者是画布 renderer有影响，对无关代码进行注释

 renderer = new THREE.WebGLRenderer({ antialias: true });
        renderer.setPixelRatio(window.devicePixelRatio);
        renderer.setSize(window.innerWidth, window.innerHeight);
       // renderer.toneMapping = THREE.ACESFilmicToneMapping;
       // renderer.toneMappingExposure = 1;
        //renderer.outputEncoding = THREE.sRGBEncoding;
       // renderer.shadowMap.enabled = true;
        //软阴影
       // renderer.shadowMapSoft = true;
        //色调指 hdr明暗
        renderer.toneMappingExposure = 0.2;
        //阴影值
       // renderer.shadowDarkness = 1;
        //渲染大小
        //renderer.setSize(500, 320);
        container.appendChild(renderer.domElement);

背景色和HDR正常使用

new RGBELoader()
          .setPath("textures/equirectangular/")
          .load("royal_esplanade_1k.hdr", function (texture, textureData) {
            texture.mapping = THREE.EquirectangularReflectionMapping;
 
            //scene.background = texture;
            //设置hdr贴图
            scene.environment = texture;
 
           scene.background = new THREE.Color(0xa0a0a0);
 
          scene.fog = new THREE.Fog(0xa0a0a0, 40, 200);
            //第二个数是范围  第三个数是浓度
            render();

模型材质重新赋予

  //加载起重机骨架
            const le1 = new GLTFLoader().setPath("models/gltf/").setMeshoptDecoder( MeshoptDecoder);
            le.load("tm-me1.glb", function (glb1) {
              glb1.scene.traverse(function (node) {
                
                if (node instanceof THREE.Mesh) {
                  node.material = new THREE.MeshLambertMaterial({
                                color: 0x004444,
                                wireframe:false,
                                transparent: true,
                                opacity: 0.2,
                            })
                             // 模型边线设置
                             const edges = new THREE.EdgesGeometry(node.geometry)
                             
                            const edgesMaterial = new THREE.LineBasicMaterial({
                                color: 0xffffff ,
                            })
                            const line = new THREE.LineSegments(
                                edges,
                                edgesMaterial
                            ) 
                            node.add(line)
                  //node.receiveShadow = true;
                }
              });

模型蓝色透明材质，加上白色边线。

代码顺序不是按照上下文，只是对几个影响效果的关键点做记录。最后看下效果