使用three.js将旋转和平移结合起来

Question

我将使用Three.js（无需着色器，仅使用现有对象方法）来实现动画效果，但我的问题非常简单：我确信这是可能的，但您能告诉我（或帮助我）如何在一个形状上结合多个动画吗？例如，将球体旋转和平移。当我执行以下操作时：

three.sphere.rotation.y += 0.1;
three.sphere.translateZ += 1;

球体在旋转，但平移向量也在旋转，因此平移没有效果。 我了解一些OpenGL，并且已经使用过glPushMatrix和glPopMatrix函数，所以它们在这个框架中存在吗？ 谢谢

- antho

---

我建议您使用http://jsfiddle.net/来展示您的问题。 - leonbloy

Answer 1

每个three.js Object3D 都有一个position、rotation和scale; rotation（始终相对于其原点或“中心”）定义了其自己的本地轴坐标（比如，该对象视作其自己的“前，上，右”方向），当您调用translateZ时，对象沿着这些局部方向移动（而不是沿着世界-或父级-Z轴移动）。如果您想要后者，请使用three.sphere.position.z += 1。

- leonbloy

---

非常感谢，这确实是一个严重的错误。你解决了我的问题 :) - antho

截至今天（r68），位置、旋转和缩放属性是不可变的：https://plus.google.com/+RicardoCabello/posts/WTwRMQznX6y 使用：object1.position.copy（object2.position）; - kihu

所以，与其直接操作位置属性，你可以使用Vector3方法，如add、sub、copy。 - kihu

Answer 2

变换的顺序很重要。如果您先翻译，然后再旋转，则结果会与您先旋转，然后再翻译时不同。当然，对于一个球体来说，很难看到旋转。

- gaitat

---

我可以看到球体的旋转，这要归功于我放在里面的特定材料。但是我尝试改变它们的顺序，却没有任何变化，总是出现同样的问题 :/ 但我发现了我的错误：只是一个错误的函数拼写 :) 无论如何还是谢谢！ - antho

这并不是技术上的真相 - 尽管您可能会得到不希望的结果。旋转始终在变换之前应用，无论您如何定义它们的顺序。改变这种情况的唯一方法是嵌套对象，使其创建网格、变换网格、将网格嵌套在Object3D中，然后旋转对象。 - plyawn

Answer 3

"plyawn" 的评论是正确的，"旋转总是在变换之前应用的，无论您如何定义它们的顺序。唯一改变这种情况的方法是嵌套对象，使其创建网格、变换网格、将网格嵌套在 Object3D 中，然后旋转对象。

obj1 = ...
const obbj2 = new THREE.Object3D();
obj2.add(obj1)
obj2.rotation.x = ... 
obj2.position.set(...)
return obj2

- dragansr