three.js lookAt() : how to point some local axis which *isn't* the positive Z axis towards another object

2
votes

I'm creating an app where a person (right now I'm using a cone-shape) is standing on some surface (right now I'm using a cylinder laid lengthwise) and I'd like their feet to orient toward some point (right now it's the center of the cylinder).

The intended result. (edit: I just realized that my Z axis in this photo is pointing in the wrong direction; it should be pointing towards the camera, but the question remains unchanged.)

Here is a version of the code similar to what I'm trying to accomplish. https://codepen.io/liamcorbett/pen/YMWayJ (Use arrow keys to move the cone)

//...

person = CreatePerson();
person.mesh.up = new THREE.Vector3(0, 0, 1);

//
// ...
// 

function updateObj(obj, aboutObj=false){
    let mesh = obj.mesh;
    if (aboutObj) {
        mesh.lookAt(
            aboutObj.mesh.position.x, 
            aboutObj.mesh.position.y, 
            mesh.position.z)
    };
}

//
// ...
//

function animate() {
    // ...

    updateObj(person);

    // ...
}

The code above gives me something similar to what I'm looking for, but the issue is that lookAt() seems to always point the local Positive Z-axis in some direction, and I'd much prefer that it point the local Negative Y-axis instead.

I'd prefer to not change the x,y,z axes of the model itself, as I feel that's going to be a pain to deal with when I'm applying other logic to the person object.

Is there a way to change which axis lookAt() uses? Or am I going to have to roll my own lookAt() function? Thanks ~

2
javascriptthree.js

2 Answers

3
votes

Is there a way to change which axis lookAt() uses?

No, the default local forward vector for 3D objects (excluding cameras) is (0, 0, 1). Unlike other engines, three.js does not allow to configure the forward vector, only the up vector. But this is not really helpful in your case.

You can try to transform the geometry in order to achieve a similar effect.

If you don't want to do this for some reasons and you still want to use Object3D.lookAt(), you have to compute a different target vector (so not the cylinder's center).

2
votes

Even if the forward vector of the lookAt method can't be changed (as @Mugen87 said), you can still adjust the local rotation afterwards by knowing in advance the difference between the forward Z axis used, and the axis you consider your mesh to be "upward" (ex: a person standing up on the Y axis).

Basically, in your case, just add this line after the lookAt method :

mesh.rotateOnAxis( new THREE.Vector3(1,0,0), Math.PI * -0.5 );

And the cone will look up :)