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

2021-06-23 23:57:04 +08:00
 deepkolos

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 动画复用方法

合并 mesh

合并 material

合并 texture

动画独立化

TODO

  1. 批量切换时候,全部加载完成后再挂载( done 新增 autoMount 选项,而 lazyNodes 的行为是加载完成再批量 mount,需要手动挂载,则需要通过 getLazyNodeParent 获取对应父节点
  2. blender 的合并 texture 不完全,导出的 gltf 会多个相同 source(见 examples/banzi2/banzi2.gltf), sampler 的 texture,目前通过修改 texture cacheKey 实现合并

已知问题

  1. 动画有 samplers.output 冗余,input 复用的问题

CHANGELOG

1051 次点击
所在节点    分享创造
1 条回复
rookielzy
2021-06-24 14:06:14 +08:00
牛!学习了

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/785419

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX