如何在three.js中旋转精灵对象？

【问题标题】：how to rotate a sprite object in three.js?如何在three.js中旋转精灵对象？
【发布时间】：2020-05-28 04:15:15
【问题描述】：

我需要旋转一个精灵对象，但这似乎不可行，如果不可行，有没有办法实现旋转效果，可能通过精灵材质的UV坐标，或者自定义着色器？最好的方法是什么？

【问题讨论】：

是SpriteMaterial.rotation 你在找什么？ threejs.org/examples/webgl_sprites.html
@WestLangley 谢谢！

【解决方案1】：

Sprite 的旋转由其材质的 rotation 参数设置。比如像这样：

var material = new THREE.SpriteMaterial( {
    color: 0xffffff, 
    map: texture,
    rotation: Math.PI / 4
} );

var sprite = new THREE.Sprite( material );

three.js r.67

【讨论】：

一个快速说明：如果你想动画旋转参数你可以改变sprite.material.rotation

【解决方案2】：

我花了很长时间，但事实证明你需要旋转精灵材质而不是精灵本身。像这样：

var scale = 1;

function animate() {
    requestAnimationFrame(animate);

    // Rotate the sprite:
    sprite.material.rotation += 0.01;

    // Resize the sprite:
    scale += 0.01
    sprite.scale.set(scale, scale, 0);

    // Move the sprite:
    sprite.position.x += 0.01;

    renderer.render(scene, camera);
}

【讨论】：