Three.JS之性能优化（一）

在项目中如果大量引入外部模型，且外部模型太大，就必须进行压缩，否则不仅占用带宽，而且会降低硬件运行性能，使用户体验极差。

1.压缩和使用OBJ格式的模型–Draco算法

Draco算法Github地址
Draco是由谷歌Chrome媒体团队设计，旨在大幅加速3D数据的编码、传输和解码。因为研发团队的Chrome背景，所以这个开源算法首要应用对象是浏览器。但既然谷歌已经把他开源，现在全世界的开发者都可以去探索Draco在其他场景的应用，比如说其他非网页端，而目前，谷歌提供了它两个版本：JavaScript和C++，已经覆盖大部分应用场景。
Draco可以被用来压缩Mesh网格和点云数据，同时它还支持压缩点、连接信息、纹理协调、颜色信息、法线已经其他几何相关的通用属性。
使用步骤：

1. 克隆仓库中的源码编译
   编译成功后会得到两个exe文件（解压和压缩），工程文件结构如图（反正我也没编译成功，直接找大佬要的，需要的找我）
   

2. 压缩模型
   模型一般放在models文件夹下，然后在当前文件夹目录栏输入CMD进入命令行，执行以下压缩命令

	draco_encoder.exe -i models/city.obj -o encoder/city_1.drc --metadata
	//压缩/解压 输入 文件URL 输出 文件URL （后缀没啥用可省略）
	//设置压缩等级
	draco_encoder.exe -i models/city.obj -o encoder/city_1.drc -cl 5

Compression level：表明Drac有11种压缩方式，值越高，压缩速度越慢，模型质量越低，但压缩效果越好，默认为7
Positions Quantization=14 bits：顶点属性值是由浮点转换为整数再编码的，14表示用（1<<14，即2的14次方）去乘浮点数，然后取整。

压缩后的文件必须经过解压操作后才能使用。一个3D模型文件，一般包含顶点、面、材质、动画等各种引擎渲染所需要的信息。如果在解压操作中不指定输出文件的格式，会默认解成PLY格式，而PLY文件格式只包含顶点信息（是该点的物体坐标、法线向量、纹理坐标等，如果绑定了骨骼，还有各块骨骼的权重）和面的信息（指由顶点围成的面，它是一系列顶点索引的集合，一般是三角形面或四边形面），我们原文件的格式为OBJ（包含顶点和面的信息），这样面的信息就会丢失，在使用过程中就会出现问题，所以在解压使用时必须制定固定的输出格式。（修改后缀名无用，模型还是原来的OBJ格式）

3. 解压使用
   three.js为我们提供了draco解压的相关包，直接引用即可

import { DRACOLoader } from './jsm/loaders/DRACOLoader.js';

解压过程，会自动去寻找依赖包，最后引入压缩模型

		var dracoLoader = new DRACOLoader();
		dracoLoader.setDecoderPath( 'js/libs/draco/' );
		dracoLoader.setDecoderConfig( { type: 'js' } );
		
		dracoLoader.load( 'models/draco/bunny.drc', function ( geometry ) {

				geometry.computeVertexNormals();

				var material = new THREE.MeshStandardMaterial( { color: 0x606060 } );
				var mesh = new THREE.Mesh( geometry, material );
				mesh.castShadow = true;
				mesh.receiveShadow = true;
				scene.add( mesh );

				// 释放解压资源.
				dracoLoader.dispose();

			} );

2.压缩和使用GLTF格式模型–pipeline+Draco

pipeline的Github地址