资讯专栏INFORMATION COLUMN

3d 下摄像机自动漫游 利用tween.js

quietin / 2178人阅读

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

相关文章

  • transformjs 污染了 DOM?是你不了解它的强大

    摘要:的粒子就不再举例,和用于的例子差不多,相信大家能够很快搞定。开始使用吧官方网站地址最后,多谢大家对的建议,有了你们中肯建议和意见,才让它变得更好更灵活更强大。 原文链接:https://github.com/AlloyTeam/AlloyTouch/wiki/Powerful-transformjs 写在前面 上星期在React微信群里,有小伙伴觉得transformjs直接给DOM添...

    cncoder 评论0 收藏0
  • transformjs 污染了 DOM?是你不了解它的强大

    摘要:的粒子就不再举例,和用于的例子差不多,相信大家能够很快搞定。开始使用吧官方网站地址最后,多谢大家对的建议,有了你们中肯建议和意见,才让它变得更好更灵活更强大。 原文链接:https://github.com/AlloyTeam/AlloyTouch/wiki/Powerful-transformjs 写在前面 上星期在React微信群里,有小伙伴觉得transformjs直接给DOM添...

    SmallBoyO 评论0 收藏0

发表评论

0条评论

quietin

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<