three.js通过精灵图渲染 热点

const spriteSheetTexture = new THREE.TextureLoader().load('src/assets/sprite.png');
const numFrames = 26; // 总帧数
const frameWidth = 1 / numFrames; // 一帧的宽度

const material = new THREE.SpriteMaterial({map: spriteSheetTexture});
const spritePng = new THREE.Sprite(material);
spritePng.scale.set(5, 5, 5); // 设置精灵的大小
spritePng.position.set(0, 50, 0)
scene.add(spritePng);
let currentFrame = 0; // 当前帧索引

const animate = () => {

    requestAnimationFrame(animate);
    controls.update();
    const frameX = currentFrame * frameWidth;
    material.map.offset.set(frameX, 0);
    material.map.repeat.set(frameWidth, 1);
    currentFrame = (currentFrame + 1) % numFrames;
   

    renderer.render(scene, camera);

    window.addEventListener('resize', onWindowResize);
}