Three.js lookat seems to be flipped

Question

I have a demo of what I mean here: Test Site or (Backup)

For some reason, even though the mouse vector is correct my object is rotated by 90 degrees always in favor of the positive Y axis. The only call that this could be going wrong, as far as I can tell, in is the call: ship.mesh.lookAt(mouse);, I call this every time the screen is animated.

Can anyone tell me what to do to fix this and why it is doing it?

Answer 1

object.lookAt( position ) orients the object so that the object's local positive z-axis points toward the desired position.

Your "ship's" front points in the direction of the local positive y-axis.

EDIT:

To re-orient your geometry, apply a matrix right after the geometry is created, like so:

geometry.applyMatrix( new THREE.Matrix4().makeRotationX( Math.PI / 2 ) );