function createTween (params) {
new TWEEN.Tween(params.object) .to(params.to, params.duration) .onComplete(() => onComplete()) .onUpdate(params.onUpdate) .easing(params.easing) .start() } function onComplete() { console.log("onComplete") } var tweenParams = { targetTweenDuration: 2500, posTweenDuration: 2500, upTweenDuration: 2500, targetTweenEasing: { id: TWEEN.Easing.Quadratic.Out, name: "Linear" }, posTweenEasing: { id: TWEEN.Easing.Quadratic.Out, name: "Linear" }, upTweenEasing: { id: TWEEN.Easing.Quadratic.Out, name: "Linear" }, configManager: null, showLoader: true }
function tweenCameraTo (state, immediate) {
immediate = false; const targetEnd = new THREE.Vector3( state.viewport.target[0], state.viewport.target[1], state.viewport.target[2]) const posEnd = new THREE.Vector3( state.viewport.eye[0], state.viewport.eye[1], state.viewport.eye[2]) const upEnd = new THREE.Vector3( state.viewport.up[0], state.viewport.up[1], state.viewport.up[2]) const nav = viewer.navigation const target = new THREE.Vector3().copy( nav.getTarget()) const pos = new THREE.Vector3().copy( nav.getPosition()) const up = new THREE.Vector3().copy( nav.getCameraUpVector()) const targetTween = createTween({ easing: tweenParams.targetTweenEasing.id, onUpdate: (v) => { nav.setTarget(v) }, duration: immediate ? 0 : tweenParams.targetTweenDuration, object: target, to: targetEnd }) const posTween = this.createTween({ easing: tweenParams.posTweenEasing.id, onUpdate: (v) => { nav.setPosition(v) }, duration: immediate ? 0 :tweenParams.posTweenDuration, object: pos, to: posEnd }) const upTween = this.createTween({ easing: tweenParams.upTweenEasing.id, onUpdate: (v) => { nav.setCameraUpVector(v) }, duration: immediate ? 0 : tweenParams.upTweenDuration, object: up, to: upEnd }) Promise.all([ targetTween, posTween, upTween]).then(() => { animate = false console.log(11111) }) } // function animate(time) { // requestAnimationFrame(animate); // TWEEN.update(time); // console.log(1) // } // requestAnimationFrame(animate); function runAnimation (start) { if (start || animate) { this.animId = window.requestAnimationFrame( runAnimation) Tween.update() } }
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/103991.html
摘要:的粒子就不再举例,和用于的例子差不多,相信大家能够很快搞定。开始使用吧官方网站地址最后,多谢大家对的建议,有了你们中肯建议和意见,才让它变得更好更灵活更强大。 原文链接:https://github.com/AlloyTeam/AlloyTouch/wiki/Powerful-transformjs 写在前面 上星期在React微信群里,有小伙伴觉得transformjs直接给DOM添...
摘要:的粒子就不再举例,和用于的例子差不多,相信大家能够很快搞定。开始使用吧官方网站地址最后,多谢大家对的建议,有了你们中肯建议和意见,才让它变得更好更灵活更强大。 原文链接:https://github.com/AlloyTeam/AlloyTouch/wiki/Powerful-transformjs 写在前面 上星期在React微信群里,有小伙伴觉得transformjs直接给DOM添...
阅读 2579·2023-04-26 03:00
阅读 1392·2021-10-12 10:12
阅读 4190·2021-09-22 15:33
阅读 2908·2021-09-22 15:06
阅读 1530·2019-08-30 15:44
阅读 2145·2019-08-30 13:59
阅读 534·2019-08-30 11:24
阅读 2407·2019-08-29 17:07