时间戳

首页 > 解决方案 > Three.js OrbitControls 补间动画到目标对象的正面（正面）

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

问题描述

当我单击一个按钮时，我希望 OrbitControls（相机）使用 tween.js 平滑地位于对象（正面）的前面。

我使用这段代码但是发现在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();

标签： javascriptanimationthree.jstween.js

解决方案

请尝试以下操作：当动画开始时，禁用控件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/

推荐阅读