1. 程式人生 > >three.js 一幅圖片多個精靈

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);
}