Three.js -相机平滑移动

一、安装

npm i @tweenjs/tween.js

二、引入

import * as TWEEN from '@tweenjs/tween.js';

三、使用

function animateCamera(oldP, oldT, newP, newT) {
    // oldP  相机原来的位置
    // oldT  target原来的位置
    // newP  相机新的位置
    // newT  target新的位置
    var tween = new TWEEN.Tween({
        x1: oldP.x, // 相机x
        y1: oldP.y, // 相机y
        z1: oldP.z, // 相机z
        x2: oldT.x, // 控制点的中心点x
        y2: oldT.y, // 控制点的中心点y
        z2: oldT.z  // 控制点的中心点z
    }).to({
        x1: newP.x,
        y1: newP.y,
        z1: newP.z,
        x2: newT.x,
        y2: newT.y,
        z2: newT.z
    }, 1000)
        .easing(TWEEN.Easing.Cubic.InOut)
        .onUpdate(function (object) {
            camera.position.x = object.x1;
            camera.position.y = object.y1;
            camera.position.z = object.z1;
            controls.target.x = object.x2;
            controls.target.y = object.y2;
            controls.target.z = object.z2;
            controls.update();
        }).start();
}

最后不要忘了在render中执行TWEEN.update();