学习三维动画

学习3D动画(从头开始学习3D视觉模型动画)

1.获取模型动画

2.播放模型动画。

3.停止播放模型动画。

在构建3D视觉场景的过程中，我发现很多模型都内置了动画，很多模型在 *** 阶段就内置了动画。如果模型有内置动画，可以使用API调用在Thing *** 中播放这些动画。

比如在官方的例子中，用dbclick事件控制柜子打开，用click事件控制鼠标右键关闭柜子。

1.获取模型动画

首先，通过animationNames属性获取三维可视化模型的动画。

console.log(obj1.animationNames);//日志窗口中输出模型obj1所带有的动画

CampusBuilder模型库中的一些模型是动画的，比如柜子、人和动物。您可以在CampusBuilder中检查模型的属性，以查看模型是否是动画的。

2.播放模型动画。

使用playAnimation界面播放动画。加载完3D可视化园区后，我在3D可视化园区放了一个柜子作为例子，比如为柜子设置开门动画。循环播放动画，通过loopType控制looptype，比如下面我给的柜门开门动画。

模型柜门打开的动画代码很简单。代码如下:

/***创建机柜模型并播放open1动画*/functionplayAnim{reset;$('.warninfo3').text("创建机柜模型并播放机柜开门动画（open1）");cabinet=app.create({type:'Thing',name:'机柜',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',//循环类型//THING.LoopType.Repeat不断循环//THING.LoopType.PingPong往复循环loopType:THING.LoopType.no,//不循环});});}})}

也可以反向播放模型动画。

obj.playAnimation("animation");

也可以同时播放多个动画；

obj.playAnimation({name:["open1","open2"],loopType:THING.LoopType.PingPong,speed:0.4});

3.停止播放模型动画。

使用stopAnimation接口停止动画。

//当物体带有多个动画时，`stopAnimation`接口将会停止所有动画播放obj.stopAnimation;//指定停止哪个动画obj.stopAnimation("open1");

模型动画是三维可视化项目开发的重要组成部分。我自己不会用3D软件建模，所以没有建模师的团队直接用Thing *** 模型库里的模型非常方便。合理使用模型动画技术可以使三维可视化场景更加生动，交互效果更好。学会设置模型动画后，可以继续三维可视化项目的后续开发。

本文链接：https://xueyangyi.cn/zhishi/5179.html