vue three.js 結合tween.js 實現動畫過渡
阿新 • • 發佈:2020-07-24
參考地址: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://blog.csdn.net/aosnowasp/article/details/8057315
https://www.cnblogs.com/qfly/p/7979075.html
three.js 模型外掛、
tween.js --過渡動畫外掛
概念:將模型場景內的某個引數改變為另一個引數、直接改變使用者視覺體驗不好、所以增加期間的動畫過渡效果
本次更改的是相機位置與控制點的位置、一般的網頁模型改變這兩個引數完全足夠使用了、當然、也有更改相機角度什麼的
坑:
1、所有關於模型基礎引數的資料更改函式必須放到模型建構函式前面、否則會報錯
2、tween.onUpdate() 這裡需要重新定義一下this、新手就是坑多。
3、網上看到的資料是target 但是我更改這個引數沒有效果、 列印之後發現有個target0 、嘗試更改之後發現可以執行、不知道是否符合常規操作、反正先實現效果吧
4、TWEEN.update() 必須新增到模型渲染函式內
使用到的引數:
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("動畫回撥函式+++") }