Move object in direction indicated by a vector

Questions
1

As we have gone through here:

It is possible to have objects move alongside their axis.
Translate x/y/z for each respective axis.
And if I want to move on all of them at the same time, I can use TranslateOnAxis.

But those just move the object by quantity in each axis.

How do I move, say, into the following direction:
x rotation: 0.1 radians.
y rotation: 0.2 radians.

So I can move the object into a vector determined angle, relative to where it is heading.
Rather than just pixel quantities on xyz.

?

2

It’s not pixel but world units.

Your terminology is mathematically wrong. Two rotation values do not define a direction. A complete Euler angle definition defines an orientation in 3D space. If you want to transform a 3D object from one orientation to another one, use Object3D.lookAt(). Or Quaternion.rotateTowards() if you want to animate the transition.

1 Like
3

I dont’t need the transition to be animated, as I am calling the function again and again via requestanimationframe.

I looked up 3js lookat, here:
https://threejs.org/docs/#api/en/core/Object3D.lookAt
It says that it rotates the object in the given direction. But I absolutely do not want it to rotate in this given direction. I just want it to move a bit in this direction.

I looked up quaternions.
Wasn’t helpful.

How should I use quaternions and lookat to achieve this?

4

Then forget Object3D.lookAt(). If say you start with an Euler angle e you can try this:

const q = new THREE.Quaternion().setFromEuler( e );
const v = new THREE.Vector3( 0, 0, 1 ).applyQuaternion( q );

const offset = 1; // world units
object.position.add( v.multiplyScalar( offset ) );

However, this code is not much different from Object3D.translateOnAxis().

2 Likes
5

It would be great if we could skip the offset/distance, for now.

And it would be great if you could post the whole sample.
Like the simplest possible example, but still a working one.

I saw how to make a euler, here:
https://threejs.org/docs/#api/en/math/Euler

So according to that I do

const e = new THREE.Euler( 0, 1, 1.57, 'XYZ' );

But when I add that infront of your first line

const q = new THREE.Quaternion.setFromEuler( e );

I get error:
THREE.Quaternion.setFromEuler is not a constructor

So I can’t run this code.

It’s also very confusing.
Because euler is apparently an angle.
Which is good.
But then, that vector is also representing an angle.
LIke, which one is the angle?

Also, if this is not much different from translateOnAxis.
Which method is better?
Which one should we go for?

6

Sorry, I’ve had a typo in my code. It should be:

const q = new THREE.Quaternion().setFromEuler( e );
1 Like
8

Here is what I ended up with:

var speed=  2;  
var xrot=   0;  
var yrot=   0;                                                                                                                      

const euler     =new THREE.Euler(xrot,yrot,0,'XYZ');
const quat      =new THREE.Quaternion().setFromEuler(euler);
const vector    =new THREE.Vector3(0,0,-speed).applyQuaternion(quat);

this.renderer.position.add(vector);

From now on I can manipulate xrot,yrot and speed.
And just put that code part under the hood.

1 Like