Three.js 将对象移动到相机前面

Question

您好，我正在尝试将一个物体移动到相机前面，当它到达目标位置时，我希望它停止。但它不起作用。

function objectToCamera(mX, mY, object)
{
                var vector = new THREE.Vector3(mX, mY, 1);
                vector.unproject(camera);
                vector.sub(object.position);        

                var dx = object.position.x - camera.position.x;
                var dy = object.position.y - camera.position.y;
                var dz = object.position.z - camera.position.z;

                var distance = Math.sqrt(dx*dx + dy*dy + dz*dz);

                if(lastDistance < distance && lastDistance != -1)
                    keepOut = -1;

                lastDistance = distance;

                setTimeout(function(){
                    if( distance > 200 && keepOut == 1)
                    {
                        var amount = (1)*(indexForZoom/3);

                        amount = (amount>15) ? 15 : (1)*(indexForZoom/3);

                        if(distance - amount < 200)
                            amount = (distance-200)+1;

                        indexForZoom++;
                        object.translateZ(amount);
                        controls.target.addVectors(controls.target,vector.setLength(amount));
                        objectToCamera(mX, mY, object)
                    }
                    else
                    {
                    //  stopForZoom = 1;
                        keepOut = -1;
                        objectClickHandler(object.name, object);
                    }
                }, 10);
}

我正在检查相机和物体之间的距离，如果达到目标距离，我会让它停止，但它不起作用。在坐标中，如果 i 在正 X 坐标中，则距离减小，否则，距离增大。

我认为，在我的代码中，距离应该总是减少，但事实并非如此。

请帮忙。谢谢。

Answer 1

您可以用来object.position.lerp(target, amount)将物体移向目标。金额是从 0 到 1 的值，其中 1 = 100% 一直达到目标，0.5 = 50% 达到目标。

如果你想以固定速度移动，那么你可以得到到目标的距离

distance = object.position.distanceTo(target);

假设每次交互最多需要 0.1 个单位。然后

moveSpeed = 0.1;
distance = object.position.distanceTo(target);
amount = Math.min(moveSpeed, distance) / distance;
object.position.lerp(target, amount)

剩下的就是你选择一个目标了。

相机前面的位置是

const distanceFromCamera = 3;  // 3 units
const target = new THREE.Vector3(0, 0, -distanceToCamera);
target.applyMatrix4(camera.matrixWorld);

例如，如果您移动相机（用鼠标拖动，使用滚轮）。注意：在代码中，速度被调整为与帧速率无关。

distance = object.position.distanceTo(target);

moveSpeed = 0.1;
distance = object.position.distanceTo(target);
amount = Math.min(moveSpeed, distance) / distance;
object.position.lerp(target, amount)

const distanceFromCamera = 3;  // 3 units
const target = new THREE.Vector3(0, 0, -distanceToCamera);
target.applyMatrix4(camera.matrixWorld);

请注意，您可能需要camera.updateMatrixWorld()在所有数学运算之前调用，以确保目标不会晚一帧。

如果对象位于层次结构中，则需要执行更多操作。您可以进行数学计算，也可以仅将对象附加到场景，然后将其附加回其在层次结构中的位置

const parent = object.parent;

// move object to scene without changing it's world orientation
scene.attach(object);

// do stuff above

// move object to parent without changing it's world orientation
parent.attach(object);