关于前端:从零开始学习3D可视化之模型动画

1、 获取模型动画
2、 播放模型动画
3、 进行播放模型动画
在搭建3D可视化场景的过程中，我发现很多模型都有内置动画，很多模型在制作阶段就内置了动画，如果模型有内置动画，能够在 ThingJS 中利用 API 调用播放这些动画。
比方官网示例中通过 dbclick 事件来管制机柜开启，click 事件来管制鼠标右键敞开机柜。

1、获取模型动画
首先通过 animationNames属性获取3D可视化模型都带有有什么动画。
console.log(obj1.animationNames); // 日志窗口中输入模型 obj1 所带有的动画
CampusBuilder 模型库中的模型，有的是也是带有动画的，如机柜、人、动物等。能够通过查看 CampusBuilder 中模型的属性，来理解模型是否带有动画。

2、播放模型动画

应用 playAnimation 接口进行动画播放。加载3D可视化园区后，我在3D可视化园区内搁置一个机柜来举例，比方给机柜设置开启动画。循环播放动画，通过loopType ，来管制循环类型，比方上面我举例的机柜开门动画。

机柜模型开门动画代码十分的简略，代码如下：

/** * 创立机柜模型并播放open1动画 */function playAnim() { 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可视化我的项目开发中的重要组成部分，我本人不会应用3D软件建模所以间接应用ThingJS模型库中的模型，对于没有建模师的团队来说十分不便。模型动画技术的正当应用，能够让3D可视化场景更加活泼，交互成果更优，学会设置模型动画后就能够持续3D可视化我的项目的后续开发了。