three.js 一幅圖片多個精靈
阿新 • • 發佈:2018-12-02
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); }