three.js 性能优化之模型转化与压缩

模型转换

obj转gltf

  安装插件

?

1	npm i -g obj2gltf

?

1

执行转换命令

?

1	obj2gltf  -i 11-6.obj -o 11-6.gltf -u

 

模型压缩

安装gltf-pipeline

?

1	npm i -g gltf-pipeline

?

1

执行压缩命令

?

1	gltf-pipeline  -i 11-6.gltf -o 11-6_mini.gltf -d

加载压缩后的模型

    import {GLTFLoader} from 'three/examples/jsm/loaders/GLTFLoader'
    import {DRACOLoader} from 'three/examples/jsm/loaders/DRACOLoader'

 //加载模型
        let loader = new GLTFLoader();
        let dracoLoader = new DRACOLoader();
        dracoLoader.setDecoderPath("/static/models/draco/");//加载draco算法，这样才能解析压缩后的gltf模型格式，具体的draco算法文件，直接可以three依赖文件中找到，赋值到static目录下面就好了
        loader.setDRACOLoader(dracoLoader);
        loader.load("mini.gltf",//引入压缩的gltf模型
          function(obj) { // 这个obj就是解析后的模型，可添加到scene内。
            obj.scene.position.set(-27.5, 0, -2);//设置物体的位置
            obj.scene.scale.set(0.00065, 0.00065, 0.00065);//设置物体的大小
            that.scene.add(obj.scene);// 在场景中添加物体
          },
          // called while loading is progressing
          function(xhr) {
            console.log((xhr.loaded / xhr.total) * 100 + "% loaded");
          },
          // called when loading has errors
          function(error) {
            console.log("An error happened");
          }
        );