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