V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
deepkolos
V2EX  ›  分享创造

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

  •  1
     
  •   deepkolos ·
    deepkolos · 2021-06-23 23:57:04 +08:00 · 1231 次点击
    这是一个创建于 1282 天前的主题,其中的信息可能已经有所发展或是发生改变。

    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

    1 条回复    2021-06-24 14:06:14 +08:00
    rookielzy
        1
    rookielzy  
       2021-06-24 14:06:14 +08:00
    牛!学习了
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2798 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 27ms · UTC 13:47 · PVG 21:47 · LAX 05:47 · JFK 08:47
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.