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

是 否 +2 论坛币

k人 参与回答

经管之家送您一份

应届毕业生专属福利!

求职就业群

赵安豆老师微信：zhaoandou666

经管之家联合CDA

送您一个全额奖学金名额~ !

立即领取

感谢您参与论坛问题回答

经管之家送您两个论坛币！

+2 论坛币

1、 获取模型动画

2、 播放模型动画

3、 停止播放模型动画

在搭建3D可视化场景的过程中，我发现很多模型都有内置动画，很多模型在制作阶段就内置了动画，如果模型有内置动画，可以在 ThingJS 中利用 API 调用播放这些动画。

比如官方示例中通过 dbclick 事件来控制机柜开启，click 事件来控制鼠标右键关闭机柜。





1、获取模型动画
首先通过 animationNames属性获取3D可视化模型都带有有什么动画。

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

复制代码

CampusBuilder 模型库中的模型，有的是也是带有动画的，如机柜、人、动物等。可以通过查看 CampusBuilder 中模型的属性，来了解模型是否带有动画。




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




机柜模型开门动画代码非常的简单，代码如下：

1. /**
   
2. 
   
3. * 创建机柜模型并播放open1动画
   
4. 
   
5. */
   
6. 
   
7. function playAnim() {
   
8. 
   
9.     reset();
   
10. 
    
11.     $('.warninfo3').text("创建机柜模型并播放机柜开门动画（open1）");
    
12. 
    
13. 
    
14. 
    
15.     cabinet = app.create({
    
16. 
    
17.         type: 'Thing',
    
18. 
    
19.         name: '机柜',
    
20. 
    
21.         url: 'https://www.thingjs.com/static/models/cabinets/47f34ce2c5a14b6d8fd4e80974394a55',
    
22. 
    
23.         position: [0, 0, 0],
    
24. 
    
25.         angles: [0, 0, 0],
    
26. 
    
27.         complete: function () {
    
28. 
    
29.             $('.warninfo3').text("机柜创建完成，点击即可播放开门动画（open1）");
    
30. 
    
31.             cabinet.on('click', function (ev) {
    
32. 
    
33.                 // 观察某物体
    
34. 
    
35.                 app.camera.fit(cabinet);
    
36. 
    
37.                 cabinet.playAnimation({
    
38. 
    
39.                     name: 'open1',
    
40. 
    
41.                     // 循环类型
    
42. 
    
43.                     // THING.LoopType.Repeat 不断循环
    
44. 
    
45.                     // THING.LoopType.PingPong 往复循环
    
46. 
    
47.                     loopType: THING.LoopType.no, // 不循环
    
48. 
    
49.                 });
    
50. 
    
51.             });
    
52. 
    
53.         }
    
54. 
    
55.     })
    
56. 
    
57. }

复制代码

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

1. obj.playAnimation("animation");

复制代码

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

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

复制代码

3、停止播放模型动画
使用 stopAnimation 接口来停止动画播放。

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

复制代码

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

扫码加我 拉你入群

请注明：姓名-公司-职位

以便审核进群资格，未注明则拒绝

分享0 收藏0 回帖

关键词：从零开始学习 从零开始 可视化 animation function