ThingJS:仅需不到5行代码,实现炫酷3D动画

简介: 在物联网领域,Thing都有哪些动效呢?

在物联网领域,Thing都有哪些动效呢?调用ThingJS API看看。

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

如果模型有内置动画,则可以在 ThingJS 中利用 API 调用播放这些动画。
如果是动态创建的物体,由于模型加载是异步的,则必须在模型加载完成后才能调用动画。

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

输出:

  1. 播放模型动画
    我们使用 playAnimation 接口进行动画播放。

• 简单播放动画

    name: "animation",
    reverse: true//反转数组
}); 

• 可以反向播放动画

obj.playAnimation("animation");
• 可以循环播放动画,并且可以同 loopType ,来控制循环类型

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

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

    name: ["open1", "open2"],
    loopType: THING.LoopType.PingPong,
    speed: 0.4
}); 
  1. 停止播放模型动画
    我们使用 stopAnimation 接口来停止动画播放

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


### 官方模型动画介绍
我们有提供各个行业的模型供用户选择,这些模型有部分在制作阶段就内置了动画。例如:
仓储
以下面的粮仓为例:
在CamBuilder中我们可以通过选中该模型,查看模型是否带有动画,例如这个粮仓动画名为‘CloseRoof’和‘OpenRoof’,分别控制粮仓开盖关盖动画。
 ![](https://img2020.cnblogs.com/blog/1494719/202008/1494719-20200828181710705-691213668.png)
相关文章
|
数据可视化 JavaScript 前端开发
推荐8个炫酷的数据可视化大屏项目
推荐8个炫酷的数据可视化大屏项目
6081 1
|
11月前
|
JavaScript 数据可视化 前端开发
基于 Vue 与 D3 的可拖拽拓扑图技术方案及应用案例解析
本文介绍了基于Vue和D3实现可拖拽拓扑图的技术方案与应用实例。通过Vue构建用户界面和交互逻辑,结合D3强大的数据可视化能力,实现了力导向布局、节点拖拽、交互事件等功能。文章详细讲解了数据模型设计、拖拽功能实现、组件封装及高级扩展(如节点类型定制、连接样式优化等),并提供了性能优化方案以应对大数据量场景。最终,展示了基础网络拓扑、实时更新拓扑等应用实例,为开发者提供了一套完整的实现思路和实践经验。
1408 78
|
前端开发 JavaScript
electron ui框架
Electron是一个使用JavaScript, HTML和CSS等前端技术构建跨平台桌面应用程序的框架。
842 0
|
9月前
|
JSON API UED
汇率查询API实战指南:通过Python调用获取多国汇率信息
本文介绍如何通过 Python 快速集成多币种汇率查询接口,实现实时获取全球主要货币汇率数据。适用于跨境电商价格换算、国际贸易结算等场景,帮助提升用户体验并规避汇率波动风险。
1630 0
汇率查询API实战指南:通过Python调用获取多国汇率信息
|
缓存 网络协议 算法
Golang简单实现 分布式缓存+一致性哈希+节点再平衡(gossip + consistent + rebalance)
Golang简单实现 分布式缓存+一致性哈希+节点再平衡(gossip + consistent + rebalance)
531 0
|
编译器 Go API
go generate指南:代码自动生成
go generate指南:代码自动生成
4387 0
|
SQL 安全 前端开发
Go语言Gin框架安全加固:全面解析SQL注入、XSS与CSRF的解决方案
Go语言Gin框架安全加固:全面解析SQL注入、XSS与CSRF的解决方案
|
Oracle Java 关系型数据库
windows 下 win11 JDK17安装与环境变量的配置(配置简单详细,包含IJ中java文件如何使用命令运行)
本文介绍了Windows 11中安装JDK 17的步骤,包括从官方网站下载JDK、配置环境变量以及验证安装是否成功。首先,下载JDK 17的安装文件,如果没有Oracle账户,可以直接解压缩文件到指定目录。接着,配置系统环境变量,新建`JAVA_HOME`变量指向JDK安装路径,并在`Path`变量中添加。然后,通过命令行(cmd)验证安装,分别输入`java -version`和`javac -version`检查版本信息。最后,作者分享了如何在任意位置运行Java代码,包括在IntelliJ IDEA(IJ)中创建的Java文件,只需去掉包声明,就可以通过命令行直接运行。
8117 1
|
存储 NoSQL 关系型数据库
Redis Sorted Set 底层实现原理深度解读与排行榜实战
Redis Sorted Set 底层实现原理深度解读与排行榜实战
561 0
|
数据可视化 数据挖掘 数据管理
架构之争:数用一体VS数用分离,谁才是永远滴神
架构之争:数用一体VS数用分离,谁才是永远滴神