I imported a “.gltf” model (called myModel) into my Three.JS project and it’s working perfectly - it looks like this:
However, as soon as I apply the .lookAt() command to it, it suddenly lays it FLAT, like so:
Here’s my code:
`myModel.lookAt(anotherVector)`
I tried to fix the problem by applying all sorts of transform Matrix’s to it - like so:
const defaultTransform = new THREE.Matrix4()
.makeRotationX(-0.5);
modelMesh.applyMatrix4(defaultTransform);
…but nothing seems to correct this issue (I tried .makeRotationX, .makeRotationY, and .makeRotationZ - but nothing worked.)
To be clear: the target Vector I’m trying to get myModel to follow, is of an animated object which is making a slow circular motion around the perimeter of the entire Grid. So myModel just needs to spin so that it’s always facing the target.
What can I do to solve this?
(Note: the photos I attached here show a simple BoxGeometry object which I quickly made just to illustrate the problem, but I am using a fully-fledged 3D Model created in Blender, which was then exported as a “.gltf” file.)
Okay but does the model actually move or lays flat on the ground ? From what I understand, your lookAt is not in animate ?
function animate() {
myModel.lookAt(movingModel.position);
renderer.render(scene, camera);
requestAnimationFrame(animate);
}
animate();
Also keep in mind that the lookAt axis is -z, so you may need to adjust the rotation of your model. Also to note, that the origin point matters aswell, it should be center of the 3D mass.
My model does move and animate and does follow the Vector of the Target, so in that sense lookAt()is working fine.
My lookAt()is in animate(), so it is working fine.
It’s simply that as soon as I call lookAt() it causes the imported model to lie FLAT.
To be clear: prior to calling lookAt() the model stands up straight, correctly. But when I add lookAt() to the code, the model suddenly lays FLAT.
As I said in my original question, I did try to rotate the model using:
const defaultTransform = new THREE.Matrix4()
.makeRotationX(-0.5);
modelMesh.applyMatrix4(defaultTransform);
I also tried .makeRotationY and .makeRotationZ - but nothing worked.
I’d love to understand more about the final thing you wrote, which was:
Well the fastest way to do this all is in a 3D program. To apply all transforms, the rotations and adjust the origin. Maybe your origin is already in place, who knows. Dont have you model. But if you want to do it in code, you probably can by editing the last values in the matrix4. I think the last 3 values are for the origin point, so you can try to adjust that, but you would have to adjust your position values to compensate for the offsets.I wouldnt bother in code, its 10 seconds of work in a 3D program.
Yeah that’s kind of what I was thinking (despite my not really knowing my way around Blender,) but… the coder in me just sorta stubbornly wants a code-based answer, y’know?
Just open Blender, rotate it toward where you want the model to face, in Blender its -y. Then Object-Apply-Rotation and Scale. And to set the origin, just Object-Set Origin-Origin to Geometry and thats it. Reexport your model. Do note im just speculating on whats wrong with your scene, since I havent really had problems with lookAt myself, these seem to be the most likely faults.
