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

程序员文章站 2022-06-25 09:14:56

gltf-pipeline：https://cnpmjs.org/package/gltf-pipeline安装npm install -g gltf-pipeline将glTF转换为Draco glTFgltf-pipeline -i model.gltf -o modelDraco.gltf -d压缩前：压缩后：“使用gltf-pipeline作为命令行工具：将glTF转换为glbgltf-pipeline -i model.gltf -o mod......

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`

制作说明

运行测试：

<span style="color:#333333"><code><span style="color:#333333">npm run test</span></code></span>

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

<span style="color:#333333"><code><span style="color:#333333">npm run eslint</span></code></span>

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

<span style="color:#333333"><code><span style="color:#333333">npm run eslint</span><span style="color:#333333">-</span><span style="color:#333333">watch</span></code></span>

构建CesiumJS集成

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

<span style="color:#333333"><code><span style="color:#333333">npm run build</span><span style="color:#333333">-</span><span style="color:#333333">cesium</span></code></span>

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

运行测试范围

覆盖范围使用nyc。跑：

<span style="color:#333333"><code><span style="color:#333333">npm run coverage</span></code></span>

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

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

产生文件

生成文档：

<span style="color:#333333"><code><span style="color:#333333">npm run jsdoc</span></code></span>

文档将放置在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年之前

本文地址：https://blog.csdn.net/rexfow/article/details/107378041