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

2022-08-02,,,,

 

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

《Gltf模型太大,Threejs加载耗时怎么办?答:Blender导出Gltf可以被gltf-pipeline压缩90%.doc》

下载本文的Word格式文档,以方便收藏与打印。