Orientieren Sie die Drehung des Objekts an einer Spline-Punkt-Tangente in THREE.JS
ich benutzeSplineCurve3 Um eine Linie nur auf der X- und Y-Achse zu zeichnen, kann ein Würfel mithilfe von erfolgreich entlang dieser Linie animiert werdenspline.getPoint(t)
Dabei ist t 0-1 in der Zeit. Ich versuche, den Würfel über seinen Aufwärtsvektor, der Y ist, unter Verwendung des Punktprodukts an der Linie auszurichten.
Es ist fast ausgerichtet, aber immer etwas heraus. Ich dachte, ich würde das Punktprodukt des Y-Vektors und den Tangens des aktuellen Punkts als Winkel verwenden, um eine Quaternion zu drehen.
Hier ist meine Renderfunktion:
function render() {
var updateMatrix = new THREE.Matrix4();
updateMatrix.setPosition(spline.getPoint(t));
var angle = new THREE.Vector3(0,1,0).dot(spline.getTangent(t).normalize());
var quat = new THREE.Quaternion;
quat.setFromAxisAngle(new THREE.Vector3(0,0,1), angle);
updateMatrix.setRotationFromQuaternion(quat);
marker.rotation.getRotationFromMatrix(updateMatrix);
marker.matrixWorld = updateMatrix;
t = (t >= 1) ? 0 : t += 0.002;
renderer.render(scene, camera);
}
Und hier ist eine Geige, die mein Problem demonstriert. Kann mir jemand sagen, wo ich mit dem Rotationsaspekt falsch liege?
Sie können meine bearbeiten -jsfiddle Beispiel