ThreeJS object quaternion rotation not following axis

Question

I am trying to get a 3D object to follow a 3D path so that it always faces the direction in which it is traveling. I try to do this by doing:

fishObject.quaternion.setFromAxisAngle(axis, radians)

where radians is the angle between an up vector and the direction of travel

In the following pen, the axes are depicted for clarity. The blue line is the axis, the purple one is just up, and the moving red line is the direction the fish should be facing (tangent). They all move in the right way, but when I set the quaternion, the rotation of the object does not seem to follow its axis

There is a bit of clutter in the pen (to build the fish), but all I am looking at is line 281 and its arguments: fishObject.quaternion.setFromAxisAngle(axis, radians)

I am just new to this. Should be simple to someone familiar with 3D rotation.

https://codepen.io/nth-chile/pen/ELQqqb

Thanks, and please let me know if I can be more clear.

Maybe this will help: https://stackoverflow.com/a/18409167/1461008 — WestLangley, May 10 '18 at 04:31
@WestLangley Thanks, but still no luck. The problem is that the Z rotation of the fish does not adjust when the axis changes direction. The code here manages the fish's rotation on the axis perfectly well, but the fish's direction is not tied to the axis' direction. The fish's rotation from the global Z is always the same, so the fish is always facing to the right — nth-chile, May 13 '18 at 14:57
You are trying to do too much in one program with out having a clear understanding of the fundamentals. — WestLangley, May 13 '18 at 20:33

score 0 · Accepted Answer · answered May 13 '18 at 20:32

One way to get a tangent frame that is well-behaved is use the lookAt() method.

var axes = new THREE.AxesHelper( 10 );
scene.add( axes );

. . .

// then, in the render loop

pt = swimPath.spline.getPoint( t );

tangent = swimPath.spline.getTangent( t );

axes.position.copy( pt );
axes.lookAt( pt.add( tangent ) );

Now, make sure your "fish" is oriented so it faces the local positive-z axis by default. It is not, in your case, so you will have to apply a rotation. Add the object as a child of the tangent frame.

fishObject.rotation.set( 0, - Math.PI / 2, 0 );
axes.add( fishObject );

three.js r.92

ThreeJS object quaternion rotation not following axis

1 Answers1