javascript - Three.js 对象移动到目标

Question

我有一个移动到目标的物体。问题是 x 位置比 z 位置快，或者 z 位置比 x 位置快。

如果 z 位置需要更多时间移动，我该怎么做才能使我的对象在 x 位置减慢？

我在动画函数中的代码:

var distanceX = objectX - targetX;
var distanceZ = objectZ - targetZ;

if( distanceX < 0) {
    visitor.translateX( 0.05 );
}else {
    if( distanceX > 0) {
        visitor.translateX( -0.05 );
    }
}

if( distanceZ < 0) {
    visitor.translateZ( 0.05 );
}else{
    if( distanceZ > 0) {
        visitor.translateZ( -0.05 );
    }
}

Answer 1

我建议将当前值计算为绝对值而不是增量值。你所做的基本上是这样的:

x = xLast + constantValue;

相反，您可以在不需要最后一个值的情况下执行此操作(这称为线性插值):

progress = Math.min((Date.now() - startTime) / duration, 1);
x = xStart + progress * (xEnd - xStart);

本例中的进度值是从 0(动画开始)到 1(动画结束)的值。

如果您像这样编写动画，则只需将两个部分的持续时间设置为相同的值即可。使用 Three.js 数学实用程序，您甚至可以一次性完成所有这些操作:

var end = new THREE.Vector3(1, 0, 2);
var start = new THREE.Vector3(2, 0, -1);

// in animation-loop
var tmp = new THREE.Vector3();
var progress = Math.min((Date.now() - startTime) / duration, 1);

// tmp = progress * (end - start)
tmp.copy(end).sub(start).multiplyScalar(progress);        
object.position.copy(from).add(tmp);

这样，您的位置的所有组件都会以恒定的速度移动，并同时到达目的地。

您可能想看看动画库，例如 tween.js 。他们可以轻松地处理很多事情。