Orientar a rotação do objeto para uma tangente de ponto de spline em THREE.JS

estou usandoSplineCurve3 para plotar uma linha somente nos eixos X e Y, eu tenho um cubo que anima com sucesso ao longo desta linha usandospline.getPoint(t) onde t é 0-1 no tempo. Eu estou tentando orientar o cubo para a linha através de seu vetor para cima, que é Y usando o produto de ponto.

Está quase alinhado, mas ligeiramente fora. Eu pensei que eu usaria o produto ponto do vetor Y e a tangente do ponto atual como o ângulo para girar um quatérnio.

Aqui está minha função de renderização:

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

E aqui está um violino demonstrando meu problema, alguém pode me dizer onde eu estou errado com o aspecto de rotação?

Você pode editar meu -exemplo de jsfiddle

questionAnswers(1)

yourAnswerToTheQuestion