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这样的动画库。他们可以非常舒服地处理这些问题。

Three.js对象移动到目标

1 个答案: