three.js 一幅图片多个精灵

https://blog.csdn.net/zhulx_sz/article/details/79105359

核心代码

// 把一幅外部图片中包含的5种精灵存入一个精灵材质数组
var spriteMaterials = [];
var loader = new THREE.TextureLoader()
for (var i = 0; i < 5; i++) {
    var spriteMaterial = material.clone();
    // 每种精灵必须单独加载同一幅外部图片
    spriteMaterial.map = loader.load('./assets/textures/particles/sprite-sheet.png');
    spriteMaterial.map.offset = new THREE.Vector2(0.2 * (i % 5), 0); // 水平方向(从左)和垂直方向(从上), 偏移比例, 取值 0~1
    spriteMaterial.map.repeat = new THREE.Vector2(1 / 5, 1); // 从 offset 处开始向右下截取的比例, 取值 0~1
    spriteMaterials.push(spriteMaterial);
}