Ориентация вращения объекта на касательную точку сплайна в THREE.JS

Я использую SplineCurve3для построения линии только по осям X и Y, у меня есть куб, который успешно анимируется вдоль этой линии с помощью сплайна .getPoint(t), где t равно 0-1 во времени. Я пытаюсь сориентировать куб по линии через его восходящий вектор, который равен Y, используя скалярное произведение.

Он почти выровнен, но слегка отклоняется. Я думал, что буду использовать скалярное произведение вектора Y и касательной к текущей точке в качестве угла для поворота кватерниона.

Вот моя функция рендеринга:

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); 
}

А вот скрипка, демонстрирующая мою проблему, может ли кто-нибудь сказать мне, где я ошибаюсь с аспектом вращения?

Вы можете редактировать мой - пример jsfiddle