ITPub博客

首页 > 应用开发 > Javascript > ThingJS:3D动画模拟物联网可视化,简单实现!

ThingJS:3D动画模拟物联网可视化,简单实现!

原创 Javascript 作者:ThingJS 时间:2020-08-28 18:19:41 0 删除 编辑

 

三维动画是由计算机自动产生的具有真实感的连续动态图像,ThingJS通过3D开发深度模拟智慧建筑、仓储物流等可视化效果!

 

对于 Thing 类的对象,是通过 url 加载的模型,很多模型在制作阶段就内置了动画。

如果模型有内置动画,则可以在 ThingJS 中利用 API 调用播放这些动画。

如果是动态创建的物体,由于模型加载是异步的,则必须在模型加载完成后才能调用动画。


1 . 获取模型动画

首先我们通过 animationNames 属性获取上图中的模型都有什么动画。

示例:

console.log(obj1.animationNames);


输出:

 

2. 播放模型动画

我们使用 playAnimation 接口进行动画播放。

•   简单播放动画


 obj.playAnimation({
    name: "animation",
    reverse: true//反转数组
});

•   可以反向播放动画


obj.playAnimation("animation");


•   可以循环播放动画,并且可以同 loopType ,来控制循环类型


obj.playAnimation({
    name: "open1",
    loopType: THING.LoopType.Repeat
});

•   还可以同时播放多个动画;


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


3. 停止播放模型动画

我们使用 stopAnimation 接口来停止动画播放


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

### 官方模型动画介绍

我们有提供各个行业的模型供用户选择,这些模型有部分在制作阶段就内置了动画。例如:

仓储

以下面的粮仓为例:

在CamBuilder中我们可以通过选中该模型,查看模型是否带有动画,例如这个粮仓动画名为‘CloseRoof’和‘OpenRoof’,分别控制粮仓开盖关盖动画。

 

ThingJS利用JS语言封装,实现起来更简单!


来自 “ ITPUB博客 ” ,链接:https://blog.itpub.net/69980539/viewspace-2715650/ ,如需转载,请注明出处,否则将追究法律责任。

请登录后发表评论 登录
全部评论

注册时间:2020-07-29

  • 博文量
    161
  • 访问量
    95276