当前位置: 首页 > Web前端 > HTML

从零开始学习3D可视化模型动画

时间:2023-04-02 15:28:05 HTML

1.获取模型动画2.播放模型动画3.停止播放模型动画在搭建3D可视化场景的过程中,发现很多模型都内置了动画,很多模型都是正在制作的舞台有内置动画。如果模型有内置动画,您可以使用API调用在ThingJS中播放这些动画。比如官方的例子中,dbclick事件用于控制打开柜子,click事件用于控制鼠标右键关闭柜子。1、获取模型动画首先通过animationNames属性获取3D可视化模型的动画。console.log(obj1.animationNames);//在模型obj1的日志窗口中输出动画CampusBuilder模型库中的一些模型也有动画,比如柜子、人、动物等,你可以通过在CampusBuilder中查看模型的属性来判断模型是否有动画.2.播放模型动画使用playAnimation接口进行动画播放。加载3D可视化园区后,我以在3D可视化园区放置一个柜子为例,比如为柜子设置开场动画。循环播放动画,通过loopType控制循环类型,比如我下面举例的柜子开门动画。柜子模型开门动画代码很简单,代码如下:/***创建柜子模型并播放open1动画*/functionplayAnim(){reset();$('.warninfo3').text("创建柜子模型并播放柜子开门动画(open1)");cabinet=app.create({type:'Thing',name:'cabinet',url:'https://www.thingjs.com/static/models/cabinets/47f34ce2c5a14b6d8fd4e80974394a55',position:[0,0,0],angles:[0,0,0],complete:function(){$('.warninfo3').text("柜体创建完成,点击播放开门动画(open1)");cabinet.on('click',function(ev){//观察一些东西app.camera.fit(cabinet);cabinet.playAnimation({name:'open1',//looptype//THING.LoopType.Repeatendlessloop//THING.LoopType.PingPong往复循环loopType:THING.LoopType.no,//没有循环});});}})}模型动画也可以反向播放。obj.playAnimation("动画");也可以同时播放多个动画;obj.playAnimation({name:["open1","open2"],loopType:THING.LoopType.PingPong,speed:0.4});3.停止播放模型动画使用stopAnimation接口停止动画播放。//当一个对象有多个动画时,`stopAnimation`接口会停止所有的动画obj.stopAnimation();//指定停止哪个动画obj.stopAnimation("open1");模型动画是一个开发中的3D可视化项目,我不会用3D软件建模,所以直接使用ThingJS模型库中的模型,对于没有建模师的团队来说非常方便。模型动画技术的合理运用,可以让3D可视化场景更加生动,交互效果更好。学会设置模型动画后,就可以继续3D可视化项目的后续开发了。