lazy-gltf-loader

一个能让 GLTF 局部懒加载的 Loader

入门
GitHub在线演示
Stars:12
License:未知
更新:2025/2/10

README

lazy-gltf-loader

一个能让 GLTF 局部懒加载的 Loader

注: 适用于THREE R129,较老 THREE 版本可能需要从对应的 GLTFLoader 重新适配

DEMO

DEMO 地址

使用

> pnpm/npm i -S lazy-gltf-loader

详细接口说明请参考types/lazy-gltf-loader.d.ts

import * as THREE from 'three';
import { LazyGLTFLoader } from 'lazy-gltf-loader';

const loader = new LazyGLTFLoader();

loader
  .loadAsync('./banzi+bag/banzi+bag.gltf', {
    include: ['FENDI_PAIZI', 'close-brown'],
  })
  .then(gltf => {
    console.log(gltf);

    gltf.parser
      .lazyNodes(['FENDI_PAIZI.001', 'close-red'])
      .then(([banziNode, closeNode]) => {
        console.log(banziNode, closeNode);
      });
  });

loader
  .loadAsync('./banzi2/banzi2.gltf', {
    exclude: ['FENDI_PAIZI'],
  })
  .then(gltf => {
    console.log(gltf);

    gltf.parser.lazyAnimation(name).then(animation => {
      console.log(animation);
    });
  });

Blender 设置 mesh material texture 动画复用方法

blender 有关联复制: ALT+D

合并 mesh(注: 使用了骨骼绑定+vertex group, 体积仍会翻倍)

合并 material

批量把 material 关联到节点

安装 MaterialUtilities 最新版(直接下载.zip),通过Shift+Q打开面板(如果左边 Shift 不好使,试试右边的)

材质独立化

合并 texture

动画独立化

TODO

  1. 批量切换时候,全部加载完成后再挂载(done 新增 autoMount 选项,而 lazyNodes 的行为是加载完成再批量 mount,需要手动挂载,则需要通过 getLazyNodeParent 获取对应��节点
  2. blender 的合并 texture 不完全,导出的 gltf 会多个相同 source(见 examples/banzi2/banzi2.gltf), sampler 的 texture,目前通过修改 texture cacheKey 实现合并
  3. 增加按照节点拆分动画,可避免动画独立化导致冗余问题 done

已知问题

  1. 动画有 samplers.output 冗余,input 复用的问题(已通过按照节点拆分动画解决

CHANGELOG

赞助

如果项目对您有帮助或者有适配需求,欢迎打赏

赞赏码