Three.js OrbitControls 补间动画到目标对象的正面（正面）答案

【问题标题】：Three.js OrbitControls tween animation to face(front) of the target objectThree.js OrbitControls 补间动画到目标对象的正面（正面）
【发布时间】：2019-09-26 01:43:06
【问题描述】：

当我点击一个按钮时，我希望 OrbitControls(camera) 使用 tween.js 平滑地位于对象(face side)的前面。

我用这段代码，但是发现改controls.target后平移远离目标对象，只能放大一点，放大后就不能平移了。

还有其他方法可以查看对象吗？谢谢！

var from = {
    x: controls.target.x,
    y: controls.target.y,
    z: controls.target.z
};

var to = {
    x: object.getWorldPosition().x,
    y: object.getWorldPosition().y,
    z: object.getWorldPosition().z
};

var tween = new TWEEN.Tween(from)
    .to(to, 1000)
    .easing(TWEEN.Easing.Quadratic.InOut) // | TWEEN.Easing.Linear.None
    .onUpdate(function () {
        controls.target.set( this.x, this.y, this.z )
    })
    .onComplete(function () {
        controls.target.set( this.x, this.y, this.z )
    })
    .start();

【问题讨论】：

你说相机应该在一个物体的前面。为什么不对相机的位置设置动画呢？更改OrbitControls.target时，摄像头不会改变位置。

标签： javascript animation three.js tween.js

【解决方案1】：

尝试以下操作：当动画开始时，通过controls.enabled = false; 禁用控件以防止对动画产生任何干扰。接下来，像这样实现一个补间的onComplete() 回调：

.onComplete(function() {

    controls.enabled = true;
    camera.getWorldDirection( lookDirection );
    controls.target.copy( camera.position ).add( lookDirection.multiplyScalar( 10 ) );

})

这个想法是再次启用控件，计算视图的当前外观方向，然后为控件设置新目标。如果您需要为每个摄像机位置设置一个准确的目标点，您还可以设置一个预定义的目标。 10 的值是世界单位，它决定了目标应该沿着观察方向的距离。

更新小提琴：https://jsfiddle.net/ckgo7qu8/

【讨论】：

你能解释一下为什么使用controls.target.copy( camera.position ).add( lookDirection.multiplyScalar( 10 ) );吗？
必须更新控件的目标，否则您的问题将无法解决。目标只是设置为相机位置，然后将一定量转换为观察方向。不这样做会导致您的相机在控件再次启用后立即“跳跃”。