THREE.js:为什么我的对象沿样条线移动时会翻转? [英] THREE.js: Why is my object flipping whilst travelling along a spline?

问题描述

根据我的原始帖子 Three.JS对象遵循样条路径-旋转/切线问题&恒定速度问题，但仍然存在对象在路径上某些点翻转的问题.

Following up from my original post Three.JS Object following a spline path - rotation / tangent issues & constant speed issue, I am still having the issue that the object flips at certain points along the path.

查看此小提琴上发生的情况: http://jsfiddle.net/jayfield1979/T2t59/7 /

View this happening on this fiddle: http://jsfiddle.net/jayfield1979/T2t59/7/

function moveBox() {
if (counter <= 1) {

    box.position.x = spline.getPointAt(counter).x;
    box.position.y = spline.getPointAt(counter).y;

    tangent = spline.getTangentAt(counter).normalize();

    axis.cross(up, tangent).normalize();

    var radians = Math.acos(up.dot(tangent));

    box.quaternion.setFromAxisAngle(axis, radians);

    counter += 0.005
} else {
    counter = 0;
}

}

上面的代码是使我的对象沿着定义的样条路径(在这种情况下为椭圆形)移动的过程. @WestLangley提到:警告:如果两个向量平行，则叉积定义不明确."

The above code is what moves my objects along the defined spline path (an oval in this instance). It was mentioned by @WestLangley that: "Warning: cross product is not well-defined if the two vectors are parallel.".

如您所见，从路径的形状来看，我将遇到许多并行向量.我有什么办法可以防止这种翻转的发生?

As you can see, from the shape of the path, I am going to encounter a number of parallel vectors. Is there anything I can do to prevent this flipping from happening?

推荐答案

回答标题中的为什么"问题.它发生的原因是在曲线的某些点上，向量up(1,0,0)和切线是平行的.这意味着它们的叉积为零，四元数的构造失败.

To answer the why question in the title. The reason its happening is that at some points on the curve the vector up (1,0,0) and the tangent are parallel. This means their cross product is zero and the construction of the quaternion fails.

您可以遵循WestLangley的建议.您确实希望向上方向垂直于轨道所在的平面.

You could follow WestLangley suggestion. You really want the up direction to be the normal to the plane the track is in.

四元数旋转很难理解setFromAxisAngle函数绕轴旋转给定角度的情况.

Quaternion rotation is tricky to understand the setFromAxisAngle function rotates around the axis by a given angle.

如果轨道位于X-Y平面，则我们将要绕Z轴旋转.要找到角度，请使用Math.atan2来找到切线的角度

If the track lies in the X-Y plane then we will want to rotate around the Z-axis. To find the angle use Math.atan2 to find the angle of the tangent

var angle = Math.atan2(tangent.y,tangent.x);

将其放在一起

var ZZ = new THREE.Vector3( 0, 0, 1 );

和

tangent = spline.getTangentAt(counter).normalize();
var angle = Math.atan2(tangent.y,tangent.x);    
box.quaternion.setFromAxisAngle(ZZ, angle);

如果轨道离开X-Y平面，则事情将变得更加棘手.

If the track leaves the X-Y plane things will get trickier.

这篇关于THREE.js:为什么我的对象沿样条线移动时会翻转?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！