Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

combine rotation and translation with three.js

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 combine 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

like image 409
antho Avatar asked Oct 29 '25 20:10

antho


1 Answers

Each 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.

like image 115
leonbloy Avatar answered Nov 01 '25 09:11

leonbloy



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!