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

Question

我需要旋转一个精灵对象，但似乎这不可行，如果不行，有没有办法实现旋转效果，也许可以通过spriteMaterial的UV坐标或自定义着色器来实现？哪种方法最好？

- Memo Lestas

---

SpriteMaterial.rotation 是你正在寻找的内容吗？http://threejs.org/examples/webgl_sprites.html - WestLangley

@WestLangley 谢谢你！ - Memo Lestas

Answer 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

=>

three.js 版本号为 r.67

- WestLangley

---

快速提示：如果您想使旋转参数动画化，可以更改 sprite.material.rotation。 - Ben Clayton

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

- Dirk R