threejs优化的3D模型压缩项目是使用vue threejs开发的，在开发过程中需要从外部加载3D模型。 一般而言，如果模型大小较大，则加载过程较长，浏览器处于块状态，同时渲染时间也较长，对用户体验影响较大，如果块严重，则浏览器将挂起，因此压缩3D模型大小
在模型网格压缩中，glTF和Draco压缩的组合可以使3D模型文件在视觉效果基本一致的情况下加倍。
全局安装gltf-pipeline #全局安装NPM安装gltf-pipeline #压缩glb文件-b表示输出glb格式，-d表示gltf-pipeline-I modd 这意味着要分离纹理图像，以查看gltf-pipeline-imodel.GL B- B- d-t #中更多的参数并引用gltf-pipeline -h压缩3D
gltf-pipeline-I. publicmodelmodel.gltf-o. publicmodel.mini.gltf-d-Draco.compra com Draco.quantizepositionbits是顶点坐标的量化位数，默认值为14位。
33558 www.Sina.com/:-Draco.quantizepositionbits为0表示不进行量化，进行无损压缩。 对于-point_cloud，用sequentialattributeencoderscontroller方法压缩，否则用KdTreeAttributesEncoder方法压缩，但浮点型数据无损压缩除外。
DRACO压缩算法用DRACO压缩基本上是有损失的，有两种表现
Draco通过Edge breaker 3D压缩算法改变了模型网格数据的索引方式，缺少原始网格顺序的Draco通过减少顶点坐标、顶点纹理坐标等信息的位数，减少数据的存储量。 --input，- ipathtothegltforglbfile.[字符串] [请求]-- output， - ooutputpathofthegltforglbfile.separateresourceswillbesavedtothesamedirectory.[字符串]-- binary， - b转换the input glTF to glb.//将输入的gltf转换为glb [ boolean ] [ default 3360 false ]-- JSON，- j转换the input glb to gltf./[default:false]--separate，-s Write separate buffers，不嵌入到添加和纹理//gltf中，而是嵌入单独的缓冲区、着色器和纹理insteadofembeddingtheminthegltf.[布尔] [ default : false ]-- separate textures-twriteoutseparatetexturesonly.//
//将统计信息打印到控制台以输出glTF文件 file. [boolean] [default: false] --keepUnusedElements Keep unused materials, nodes and meshes. //保留未使用的材质、节点和网格 [boolean] [default: false]--draco.compressMeshes, -d Compress the meshes using Draco. Adds the //使用Draco压缩网格。添加KHR_draco_mesh_压缩扩展 KHR_draco_mesh_compression extension. [boolean] [default: false]--draco.compressionLevel Draco compression level [0-10], most is 10, //Draco压缩级别[0-10]，大多数是10，最小值为0。值为0将会连续应用 编码并保留face顺序。 least is 0. A value of 0 will apply sequential encoding and preserve face order. [number] [default: 7] --draco.quantizePositionBits Quantization bits for position attribute when //位置坐标属性的量化位使用Draco压缩。 using Draco compression. [number] [default: 11]--draco.quantizeNormalBits Quantization bits for normal attribute when //法线属性的量化位使用Draco压缩 using Draco compression. [number] [default: 8]--draco.quantizeTexcoordBits Quantization bits for texture coordinate //纹理坐标的量化位属性。 attribute when using Draco compression. [number] [default: 10]--draco.quantizeColorBits Quantization bits for color attribute when using //使用时颜色属性的量化位尊敬的太阳压缩 Draco compression. [number] [default: 8]--draco.quantizeGenericBits Quantization bits for skinning attribute (joint //蒙皮属性（关节的量化位索引和关节权重）ad自定义属性使用Draco压缩时。 indices and joint weights) ad custom attributes when using Draco compression. [number] [default: 8]--draco.uncompressedFallback Adds uncompressed fallback versions of the //添加未压缩的回退版本压缩网格 compressed meshes. [boolean] [default: false] --draco.unifiedQuantization Quantize positions of all primitives using the //统一定义的量化网格所有基本体的边界框。 如果这个选项未设置，对每个应用量化原始的可能会导致差距出现在不同图元之间。 same quantization grid defined by the unified bounding box of all primitives. If this option is not set, quantization is applied on each primitive separately which can result in gaps appearing between different primitives. [boolean] [default: false]解释如下：
项目代码实现将3D模型文件压缩好之后就可以在项目中引用了。跟常规的gltf文件引用不同的是需要先使用dracoLoader进行解压，代码实现如下：
先从node_module/three/examples/js/libs/draco目录下，将gltf文件夹拷贝到public文件目录下。
// 引入依赖import * as THREE from "three";import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";import {CSS3DRenderer, CSS3DObject} from "three/examples/jsm/renderers/CSS3DRenderer.js";import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader"import { DRACOLoader } from "three/examples/jsm/loaders/DRACOLoader"// 压缩处理handleCompress() {let gltfLoader = new GLTFLoader(); let dracoLoader = new DRACOLoader(); dracoLoader.setDecoderPath("/gltf/"); // 设置public下的解码路径，注意最后面的/ dracoLoader.setDecoderConfig({ type: "js" }); dracoLoader.preload(); gltfLoader.setDRACOLoader(dracoLoader);gltfLoader.load("models/model.glb", gltf => { console.log(gltf); gltf.scene.position.set(0, 0, 0); this.scene.add(gltf.scene); });} 采用draco压缩，原gltf格式3D模型文件大小约为140M，压缩之后的文件大小为10M，效果还是很可观的。使用新的模型加载到项目中时，加载和渲染速度有明显提升，模型页面效果基本上没有太大差异。总体来说，draco压缩3D文件之后，对加载和渲染的性能提升是巨大的，有get到了新技能。觉得有用的话请给个赞吧！