i'm using Three.js (without shaders, only with existing objects methods) in order to realize animations, but my question is very simple : i'm sure it's possible, but can you tell me (or help me) how should i bine several animations on a shape ? For example, rotating and translating a sphere. When i'm doing :
three.sphere.rotation.y += 0.1;
three.sphere.translateZ += 1;
the sphere rotates but the translation vector is also rotating, so the translation has no effect. I know a bit openGL and i already have used glPushMatrix and glPopMatrix functions, so do them exist in this framework ? Cheers
i'm using Three.js (without shaders, only with existing objects methods) in order to realize animations, but my question is very simple : i'm sure it's possible, but can you tell me (or help me) how should i bine several animations on a shape ? For example, rotating and translating a sphere. When i'm doing :
three.sphere.rotation.y += 0.1;
three.sphere.translateZ += 1;
the sphere rotates but the translation vector is also rotating, so the translation has no effect. I know a bit openGL and i already have used glPushMatrix and glPopMatrix functions, so do them exist in this framework ? Cheers
Share Improve this question edited Dec 30, 2015 at 16:31 WestLangley 105k11 gold badges287 silver badges283 bronze badges asked Mar 8, 2013 at 11:05 anthoantho 851 gold badge2 silver badges6 bronze badges 1- I suggest you to use jsfiddle to show us your problem. – leonbloy Commented Mar 8, 2013 at 12:27
3 Answers
Reset to default 7Each three.js object3D has a position, rotation and scale; the rotation (always relative to its origin or "center") defines its own local axis coordinates (say, what the object sees as its own "front,up, right" directions) and when you call translateZ, the object is moved according to those local directions (not along the world -or parent- Z axis). If you want the later, do three.sphere.position.z += 1 instead.
The order of transformation is important. You get a different result if you translate first and then rotate than if you rotate first and then translate. Of course with a sphere it will be hard to see the rotation.
the ment by "plyawn" is correct "The rotation is always applied before the transformation, regardless of the order you define them. The only way to change this is to nest objects such that: create mesh, transform mesh, nest mesh in Object3D, rotate object"
obj1 = ...
const obbj2 = new THREE.Object3D();
obj2.add(obj1)
obj2.rotation.x = ...
obj2.position.set(...)
return obj2