Gltf模型太大，Threejs加载耗时怎么办？答：Blender导出Gltf可以被gltf-pipeline压缩90%

 

gltf-pipeline：https://cnpmjs.org/package/gltf-pipeline

安装

npm install -g gltf-pipeline

将glTF转换为Draco glTF

gltf-pipeline -i model.gltf -o modelDraco.gltf -d

 

压缩前：

压缩后：

“

使用gltf-pipeline作为命令行工具：

将glTF转换为glb

gltf-pipeline -i model.gltf -o model.glb

gltf-pipeline -i model.gltf -b

将glb转换为glTF

gltf-pipeline -i model.glb -o model.gltf

gltf-pipeline -i model.glb -j

将glTF转换为Draco glTF

gltf-pipeline -i model.gltf -o modelDraco.gltf -d

保存单独的纹理

gltf-pipeline -i model.gltf -t

”

 

使用gltf-pipeline作为库：

将glTF转换为glb：

const gltfPipeline = require('gltf-pipeline');
const fsExtra = require('fs-extra');
const gltfToGlb = gltfPipeline.gltfToGlb;
const gltf = fsExtra.readJsonSync('model.gltf');
gltfToGlb(gltf)
    .then(function(results) {
        fsExtra.writeFileSync('model.glb', results.glb);
    });

将glb转换为glTF

const gltfPipeline = require('gltf-pipeline');
const fsExtra = require('fs-extra');
const glbToGltf = gltfPipeline.glbToGltf;
const glb = fsExtra.readFileSync('model.glb');
glbToGltf(glb)
    .then(function(results) {
        fsExtra.writeJsonSync('model.gltf', results.gltf);
    });

将glTF转换为Draco glTF

const gltfPipeline = require('gltf-pipeline');
const fsExtra = require('fs-extra');
const processGltf = gltfPipeline.processGltf;
const gltf = fsExtra.readJsonSync('model.gltf');
const options = {
    dracoOptions: {
        compressionLevel: 10
    }
};
processGltf(gltf, options)
    .then(function(results) {
        fsExtra.writeJsonSync('model-draco.gltf', results.gltf);
    });

保存单独的纹理

const gltfPipeline = require('gltf-pipeline');
const fsExtra = require('fs-extra');
const processGltf = gltfPipeline.processGltf;
const gltf = fsExtra.readJsonSync('model.gltf');
const options = {
    separateTextures: true
};
processGltf(gltf, options)
    .then(function(results) {
        fsExtra.writeJsonSync('model-separate.gltf', results.gltf);
        // Save separate resources
        const separateResources = results.separateResources;
        for (const relativePath in separateResources) {
            if (separateResources.hasOwnProperty(relativePath)) {
                const resource = separateResources[relativePath];
                fsExtra.writeFileSync(relativePath, resource);
            }
        }
    });

命令行标志

旗	描述	需要
--help， -h	显示帮助	没有
--input， -i	glTF或glb文件的路径。	：white_check_mark：是
--output， -o	glTF或glb文件的输出路径。单独的资源将保存到同一目录。	没有
--binary， -b	将输入的glTF转换为glb。	不，默认 false
--json， -j	将输入的glb转换为glTF。	不，默认 false
--separate， -s	编写单独的缓冲区，着色器和纹理，而不是将其嵌入glTF中。	不，默认 false
--separateTextures， -t	仅写出单独的纹理。	不，默认 false
--stats	将统计信息打印到控制台以输出glTF文件。	不，默认 false
--keepUnusedElements	保留未使用的材料，节点和网格。	不，默认 false
--draco.compressMeshes， -d	使用Draco压缩网格。添加KHR_draco_mesh_compression扩展。	不，默认 false
--draco.compressionLevel	Draco压缩级别[0-10]，最大为10，最小为0。值0将应用顺序编码并保留面部顺序。	不，默认 7
--draco.quantizePositionBits	使用Draco压缩时，位置属性的量化位。	不，默认 14
--draco.quantizeNormalBits	使用Draco压缩时，普通属性的量化位。	不，默认 10
--draco.quantizeTexcoordBits	使用Draco压缩时，纹理坐标属性的量化位。	不，默认 12
--draco.quantizeColorBits	使用Draco压缩时，颜色属性的量化位。	不，默认 8
--draco.quantizeGenericBits	使用Draco压缩时，蒙皮属性（关节索引和关节权重）和自定义属性的量化位。	不，默认 12
--draco.unifiedQuantization	使用相同的量化网格对所有图元的位置进行量化。如果未设置，则单独应用量化。	不，默认 false

制作说明

运行测试：

npm run test

要在整个代码库上运行ESLint，请运行：

npm run eslint

要在保存文件时自动运行ESLint，请运行以下命令并在控制台窗口中将其保持打开状态：

npm run eslint-watch

构建CesiumJS集成

CesiumJS使用gltf-pipeline的某些功能作为第三方库。可以使用以下命令生成必要的文件：

npm run build-cesium

这会将gltf管道代码的一部分输出到该dist/cesium文件夹中，以便与浏览器中的CesiumJS一起使用。

运行测试范围

覆盖范围使用nyc。跑：

npm run coverage

有关完整的覆盖范围详细信息，请打开coverage/lcov-report/index.html。

测试和覆盖范围涵盖了Node.js模块；它不包含命令行界面，该界面很小。

产生文件

生成文档：

npm run jsdoc

文档将放置在doc文件夹中。

会费

拉取请求表示赞赏！请使用相同的贡献者许可协议（CLA）和编码指南用于铯。

当前标签

• 2.1.10                                ...           最新 （2个月前）
• 1.0.7                                ...           上一个 （4个月前）

36个版本

• 2.1.10                                ...           2个月前
• 2.1.9                                ...           4个月前
• 2.1.8                                ...           4个月前
• 1.0.7                                ...           4个月前
• 2.1.7                                ...           4个月前
• 2.1.6                                ...           5个月前
• 2.1.5                                ...           5个月前
• 2.1.4                                ...           9个月前
• 2.1.3                                ...           一年前
• 2.1.2                                ...           一年前
• 2.1.1                                ...           一年前
• 2.1.0                                ...           一年前
• 2.0.1                                ...           2年前
• 2.0.0                                ...           2年之前
• 1.0.6                                ...           2年前
• 1.0.5                                ...           2年前
• 1.0.4                                ...           2年前
• 1.0.3                                ...           2年前
• 1.0.2                                ...           3年之前
• 1.0.1                                ...           3年前
• 1.0.0                                ...           3年前
• 0.1.0-alpha15                                ...           3年之前
• 0.1.0-alpha14                                ...           3年之前
• 0.1.0-alpha13                                ...           3年之前
• 0.1.0-alpha12                                ...           3年之前
• 0.1.0-alpha11                                ...           3年之前
• 0.1.0-alpha10                                ...           4年之前
• 0.1.0-alpha9                                ...           4年之前
• 0.1.0-alpha8                                ...           4年之前
• 0.1.0-alpha7                                ...           4年之前
• 0.1.0-alpha6                                ...           4年之前
• 0.1.0-alpha5                                ...           4年之前
• 0.1.0-alpha4                                ...           4年之前
• 0.1.0-alpha3                                ...           4年之前
• 0.1.0-alpha2                                ...           4年之前
• 0.1.0-alpha1                                ...           4年之前