Orientacja obrotu obiektu na styczną punktu splajnu w TRZY

ja używamSplineCurve3 Aby narysować linię tylko na osi X i Y, mam sześcian pomyślnie animowany wzdłuż tej linii za pomocąspline.getPoint(t) gdzie t wynosi 0-1 w czasie. Próbuję zorientować sześcian do linii poprzez wektor w górę, który jest Y za pomocą produktu kropkowego.

Jest prawie wyrównany, ale tak nieznacznie. Pomyślałem, że użyję iloczynu kropkowego wektora Y i tangensa bieżącego punktu jako kąta do obrócenia kwaternionu.

Oto moja funkcja renderowania:

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

A oto skrzypce demonstrujące mój problem, czy ktoś może mi powiedzieć, gdzie się mylę z aspektem rotacji?

Możesz edytować moje -przykład jsfiddle

questionAnswers(1)

yourAnswerToTheQuestion