Currently, I am in the process of developing an application in which a character (depicted as a cone shape for now) is positioned on a specific surface (currently represented by a cylinder placed horizontally). My goal is to have the character's feet face a designated point (which is currently set as the center of the cylinder).
(Update: I have just realized that the orientation of my Z-axis in the image is incorrect; it should align towards the camera, although the main query remains unchanged.)
Below is a code snippet resembling what I am striving to achieve. https://codepen.io/liamcorbett/pen/YMWayJ (Navigate the cone using arrow keys)
//...
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 provided code somewhat aligns with my objective, however, the problem lies in the fact that lookAt() always directs the local Positive Z-axis in a particular direction, whereas I would prefer it to align with the local Negative Y-axis instead.
I would rather refrain from altering the x, y, z axes of the model itself, as I anticipate complications when implementing additional logic to the character object.
Is it possible to modify the axis used by lookAt()? Or will I need to create a custom lookAt() function? Thank you ~