Baylon.js 第三节连接动画

Jake N

于 2022-09-03 18:20:14 发布

阅读量257

点赞数

分类专栏： Babylon.js教程文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/m0_73334402/article/details/126680692

版权

Babylon.js教程专栏收录该内容

37 篇文章 39 订阅

订阅专栏

首先要定义一个接下来展示的动画，获取一个动画使用：

    var nextAnimation=function (){
        scene.beginDirectAnimation(box,[up],0,4*framerate,true)
    }

然后展示动画：

scene.beginDirectAnimation(box,[rotation],0,4*framerate,false,0.5,nextAnimation)

其中的参数Loop必须为false，0.5是动画的相对播放速度，nextAnimation就是即将播放的下一个动画。

	let camera=lightAndCamera()
    let ground=BABYLON.MeshBuilder.CreateGround('ground',
        {width:100,height:100},scene)
    let box=BABYLON.MeshBuilder.CreateBox('box',{width:5,height:3,depth:2},scene)
    const framerate=10
    const up=new BABYLON.Animation('animation','position',framerate,
        BABYLON.Animation.ANIMATIONTYPE_VECTOR3,
        BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE)
    const keysFrames=[]
    keysFrames.push({
        frame:framerate,
        value:new BABYLON.Vector3(0,0,0)
    })
    keysFrames.push({
        frame:2*framerate,
        value:new BABYLON.Vector3(10,5,0)
    })
    keysFrames.push({
        frame:4*framerate,
        value:new BABYLON.Vector3(6,10,10)
    })
    up.setKeys(keysFrames)
    let rotation=new BABYLON.Animation('animation','rotation.x',framerate,
        BABYLON.Animation.ANIMATIONTYPE_FLOAT,
        BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE)
    const framArr=[]
    framArr.push({
        frame:framerate,
        value:0
    })
    framArr.push({
        frame:2*framerate,
        value:Math.PI
    })
    framArr.push({
        frame:4*framerate,
        value:Math.PI*2
    })
    rotation.setKeys(framArr)
    //scene.beginDirectAnimation(box,[rotation,up],0,4*framerate,true)
    var nextAnimation=function (){
        scene.beginDirectAnimation(box,[up],0,4*framerate,true)
    }
    scene.beginDirectAnimation(box,[rotation],0,4*framerate,false,0.5,nextAnimation)