vue three.js 結合tween.js 實現動畫過渡

 

參考地址：https://www.jianshu.com/p/d6e3b4b153bb

https://www.jqhtml.com/10513.html

官方文檔：https://github.com/tweenjs/tween.js/blob/master/docs/user_guide.md

曲線經典講解：https://www.cnblogs.com/cloudgamer/archive/2009/01/06/tween.html#!comments

 

 

three.js 模型插件、

tween.js --過渡動畫插件

概念：將模型場景內的某個參數改變為另一個參數、直接改變用戶視覺體驗不好、所以增加期間的動畫過渡效果

本次更改的是相機位置與控制點的位置、一般的網頁模型改變這兩個參數完全足夠使用了、當然、也有更改相機角度什么的

坑：

1、所有關於模型基礎參數的數據更改函數必須放到模型構造函數前面、否則會報錯

2、tween.onUpdate() 這里需要重新定義一下this、新手就是坑多。

3、 網上看到的資料是  target 但是我更改這個參數沒有效果、 打印之后發現有個target0 、嘗試更改之后發現可以執行、不知道是否符合常規操作、反正先實現效果吧  

備注: 后續發現問題、更改target0 可以實現效果、但是target0是以當前屏幕為中心點進行變化、target 應該是場景中心點

　　　　

 

 4、TWEEN.update() 必須添加到模型渲染函數內

 5、記得重置一下模型位置、如果你是使用的  OrbitControls 控制器的話 

 

 

使用到的參數：

this.camera.position //相機坐標
this.orbitControls.target //控制點坐標

 

tween使用到的函數：

tween = new TWEEN.Tween({}) // 動畫起點坐標
tween.to({) // 動畫終點坐標
tween.onUpdate（dunction(object){}） // 每一幀執行函數 、這個地方就是核心了、每變一幀跟新一次頁面元素

tween.onComplete(function(){})  // 動畫完成后的執行函數

tween.easing(TWEEN.Easing.Cubic.InOut)  // 動畫曲線、上面鏈接有其他的效果、我反正是沒有實現。
tween.start()  // 這個函數必須有、這個是啟動函數、不加不能啟動


TWEEN.update() // 動畫更新函數、這個函數需要加到加載模型時使用的動畫執行函數內、不加不能正常執行、但是也不會報錯、需要注意

 

 

 

模型渲染函數：

重點是要在這里加上 TWEEN.update() 。。卡了我半天。

    animate() {
      // 渲染
      this.renderer.render(this.scene, this.camera);
      this.setanimation(); // 旋轉事件綁定
      window.requestAnimationFrame(() => this.animate());  
      TWEEN.update()
    },

 

 

相機位置更改函數：

setcamera(e){
      let cameralist = [
        { x: 10, y: 10, z: 10 },
        { x: 20, y: 20, z: 10 },
        { x: 50, y: 30, z: 20 }
      ];
      this.animateCamera(this.camera.position,this.orbitControls.target,cameralist[e],{ x: 20, y: 20, z: 10 },this.callBack())

}

 

實際執行函數：

  animateCamera(oldP, oldT, newP, newT, callBack){


    console.log(oldP, oldT, newP, newT)
        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
        });
        tween.to({
            x1: newP.x,
            y1: newP.y,
            z1: newP.z,
            x2: newT.x,
            y2: newT.y,
            z2: newT.z
        },1000);
        console.log(this.camera.position)
        let slef = this
        tween.onUpdate(function(object){
          
          console.log(this)
          slef.camera.position.set(this.x1,this.y1,this.z1)
            // this.camera.position.x = this.x1;
            // this.camera.position.y = this.y1;
            // this.camera.position.z = this.z1;
            slef.orbitControls.target0.x = this.x2;  
            slef.orbitControls.target0.y = this.y2;
            slef.orbitControls.target0.z = this.z2;
            slef.orbitControls.update();
            console.log(slef.camera,slef.orbitControls)

        })
    //     console.log('執行過渡動畫。。。')
        tween.onComplete(function(){
            // this.orbitControl.enabled = true;
            console.log(this.camera,this.orbitControls)
            callBack&&callBack()
        })
        tween.easing(TWEEN.Easing.Cubic.InOut);
        tween.start();
    }

 

回調函數：

  callBack(){
    console.log("動畫回調函數+++")
  }