使用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() // 即刻開啟動畫
    }