/three-sprite-player

一个适用于小程序Threejs的分块序列图播放工具,包含cli工具用于生成分块序列图。

Primary LanguageTypeScript

three-sprite-player

一个适用于小程序 Threejs 的分块序列图播放工具,包含 cli 工具用于生成分块序列图。

解决的问题

由于微信小程序不支持 2048*2948 以上大小的纹理图片(小米 8,IOS),所以合成的序列帧需要每张 2048*2048 以下,多张加载的方式。

纹理的 encoding 设置默认 sRGBEncoding

注: JIMP resize 透明图片会导致颜色不对 jimp/issues/442

效果图

使用

> npm i -S three-sprite-player
> tsp-cli -h

  -h --help                                                                      显示帮助
  -v --version                                                                   显示版本
  -i --input [dir] [?tileW] [?w] [?h] [?cropX] [?cropY] [?cropW] [?cropH]        合成分块序列帧
  -r --recurse [dir] [?tileW] [?w] [?h] [?cropX] [?cropY] [?cropW] [?cropH]      递归文件夹合成分块序列帧

Examples:
  tsp-cli -i '../examples/img/frames' 1024
  tsp-cli -i '../examples/img/frames' 1024 100 100 0 0 100 100
  tsp-cli -r '../examples' 1024 100 100 0 0 100 100
const tile = {
  url: Array(3)
    .fill(0)
    .map((v, k) => `../img/output-${k}.png`),
  x: 0,
  y: 0,
  z: -15,
  w: (10 * 358) / 358,
  h: 10,
  col: 2,
  row: 2,
  total: 10,
  fps: 16,
};

Promise.all(tile.url.map(i => textureLoader.loadAsync(i))).then(tiles => {
  const spritePlayer = new ThreeSpritePlayer(
    tiles,
    tile.total,
    tile.row,
    tile.col,
    tile.fps,
  );

  const geometry = new THREE.PlaneGeometry(tile.w, tile.h);
  const material = new THREE.MeshBasicMaterial({
    map: spritePlayer.texture,
    transparent: true,
  });
  const mesh = new THREE.Mesh(geometry, material);
  mesh.position.set(tile.x, tile.y, tile.z);
  scene.add(mesh);

  function render() {
    requestAnimationFrame(render);
    spritePlayer.animate();
    // 更新material.map
    material.map = spritePlayer.texture;
    renderer.render(scene, camera);
  }

  render();
});

网页示例的使用请参考examples/web 小程序示例的使用请参考examples/mini-program

合成后的图片推荐使用Imagine或者TinyPNG进行进一步压缩体积

TODO

  1. 支持生成 2 的幂次方 tile(done 通过 jimp.contain 实现,默认取大于素材宽高大的 2 的幂次方
  2. 生成 glTF(待定
  3. 批处理(done

感谢

https://github.com/MaciejWWojcik/three-plain-animator

精简代码,适配小程序,支持分块序列帧,无 threejs 依赖

LICENSE

MIT