These posts and examples are about movement on a curve.
Struggling with paths - #14 by hofk
Car Racing - For lovers of fast cars!
MotionAlongCurve
MovementOnCurve
CarRacing
However, the solution via matrices requires computational effort. I have been looking for a solution with quaternions that requires fewer formula steps.
The solution is a new method in the quaternion class.
I added it to three.module.129.Quaternion.js in the example BasisToQuaternion.
This makes the calculation of the correct orientation quite simple.
// t tangent, n normal, b binormal
t = curve.getTangent( f );
b.crossVectors( t, n ).normalize( );
n.crossVectors( t, b.negate( ).normalize( ) );
p = curve.getPoint( f );
// added method .quaternion.setFromBasis( ) from ../jsm/three.module.129.Quaternion.js;
dice.quaternion.setFromBasis( t, b, n );
dice.position.set( p.x, p.y - 0.1, p.z );
box.quaternion.setFromBasis( t, b, n );
box.position.set( p.x, p.y, p.z );
modelBee.quaternion.setFromBasis( t.negate( ), n, b ); // another orientation
modelBee.position.set( p.x, p.y, p.z );
class Quaternion {
...
setFromBasis( e1, e2, e3 ) {
const m11 = e1.x, m12 = e1.y, m13 = e1.z,
m21 = e2.x, m22 = e2.y, m23 = e2.z,
m31 = e3.x, m32 = e3.y, m33 = e3.z,
trace = m11 + m22 + m33;
if ( trace > 0 ) {
const s = 0.5 / Math.sqrt( trace + 1.0 );
this._w = 0.25 / s;
this._x = -( m32 - m23 ) * s;
this._y = -( m13 - m31 ) * s;
this._z = -( m21 - m12 ) * s;
} else if ( m11 > m22 && m11 > m33 ) {
const s = 2.0 * Math.sqrt( 1.0 + m11 - m22 - m33 );
this._w = ( m32 - m23 ) / s;
this._x = -0.25 * s;
this._y = -( m12 + m21 ) / s;
this._z = -( m13 + m31 ) / s;
} else if ( m22 > m33 ) {
const s = 2.0 * Math.sqrt( 1.0 + m22 - m11 - m33 );
this._w = ( m13 - m31 ) / s;
this._x = -( m12 + m21 ) / s;
this._y = -0.25 * s;
this._z = -( m23 + m32 ) / s;
} else {
const s = 2.0 * Math.sqrt( 1.0 + m33 - m11 - m22 );
this._w = ( m21 - m12 ) / s;
this._x = -( m13 + m31 ) / s;
this._y = -( m23 + m32 ) / s;
this._z = -0.25 * s;
}
this._onChangeCallback();
return this;
}
...
}
UPDATE: typo Fom => From
If someone doesn’t want to change the original three.js, they can also integrate the method into their code using .prototype .
THREE.Quaternion.prototype.setFromBasis = function( e1, e2, e3 ) { ... }