使用tween.js移动three.js相机创建转场动画

three.js借助tween.js快速创建补间动画，可以非常方便的控制机械、游戏角色运动。当然也可以控制three.js相机的移动。

 

注：从github上能够搜到两个tweenjs相关的项目，本示例为使用tweenjs/tween.js。

 

一、引入tween.js：

从官网检出代码，并打包.

git clone https://github.com/tweenjs/tween.js
cd tween.js
npm i .
npm run build

生成dist目录，并打包成以下文件，选择对应的js包引入即可:

• UMD : tween.umd.js
• AMD : tween.amd.js
• CommonJS : tween.cjs.js
• ES6 Module : tween.es.js

比如引入tween.umd.js：

<script src="js/tween.umd.js"></script>

二、编写代码创建动画效果

/**
     * 相机移动方法
     */ 
    function move(){
        // 设定相机初始位置
        var coords = {x:100,y:350,z:700};
        const tween = new TWEEN.Tween(coords) 
          .to({x: 100, y: 100, z:100}, 1000) // 指定目标位置和耗时.
          .easing(TWEEN.Easing.Quadratic.Out) // 指定动画效果曲线.
          .onUpdate(() => {
            // 渲染时每一帧执行：设定相机位置
            camera.position.set(coords.x,coords.y,coords.z);
          })
          .onComplete(()=>{
            // 动画结束后执行
          })
          .start() // 即刻开启动画
    }