ThingJS：如何快速生成3D动画？

最新推荐文章于 2021-07-08 13:56:03 发布
最新推荐文章于 2021-07-08 13:56:03 发布
阅读量1k 收藏 1
点赞数
分类专栏： ThingJS 3D可视化 物联网 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ThingJS/article/details/108284931
版权
本文介绍了如何在ThingJS中利用API播放内置动画的3D模型。内容包括通过animationNames属性获取模型动画，使用playAnimation接口进行播放，支持正向、反向、循环播放以及同时播放多个动画。同时，也讲解了如何使用stopAnimation接口停止动画播放，支持停止所有动画或指定动画。
摘要由CSDN通过智能技术生成

场景搭建之后，内置动画的模型如何快速生成？

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

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

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

console.log(obj1.animationNames);

输出：

  1. 播放模型动画
    我们使用 playAnimation 接口进行动画播放。
    • 简单播放动画
最低0.47元/天 解锁文章
ThingJS_小锘
关注
专栏目录
将三维模型（obj）导出js格式供threeJS中调用
jiegiser博客
05-14 1万+
前言 前段时间自己做过将在3Dmax中画的三维模型转换为js格式，通过threeJS中调用显示，最近又在做相关的项目，在这写个笔记吧。 1. 转换前准备 准备obj格式的三维模型 首先你肯定得需要一个obj格式的三维模型吧，我们可以打开Blender，或者3Dmax，随便构建一个三维模型；如图所示（这里我用3Dmax）： 安装python 我的电脑是安装了python2.7.11，...
ThingJS不仅实现矩形、多边形的创建，也能够开发控制圆形
ThingJS的博客
09-17 977
只有封闭曲线才有"内部"与"外部"之别.例如,椭圆是封闭曲线,故有椭圆的内部与椭圆的外部的概念。ThingJS不仅实现矩形、多边形的创建，也能够开发控制圆形。 矩形区域和圆形区域都很好画，大部分建模工具可直接拖拽生成，但多边形区域则需要确定多边形要经过的点，得出多边形的最终形状。 ThingJS绘制多边形区域，以矩形和圆形为例，效果展示如下图。 ThingJS在线平台通过获取多个点坐标来确定多边形的形状，例如矩形获取4个世界坐标系下的坐标组合，构成多边形或矩形的点。 var points = [[0,
ThingJS让物联网3D动效开发简化并加速渲染
ThingJS的博客
09-16 1051
UV动画主要用于序列帧，用来模拟无限重复的背景。ThingJS系列组件支持开发UV动画，轻松媲美游戏动画效果。 UV是什么？通过改变纹理坐标，实现动态效果的纹理动画。在3D场景中，一些动态水面、流动的岩浆、跳动的火焰等等，都是通过操作UV做的动画。在CampusBuilder可以根据功能项的曲线属性设置动画效果，修改流动速度、线宽大小、贴图位移、贴图重复等样式。 下载CamBuilder编辑器，免费注册账号，在右侧菜单栏找到“功能”一项。 在CampusBuilder中，选择功能项下的曲线，手动添加一条曲
thingJS模模搭(campusbuilder/momoda)及3dsmax插件遇到的坑
Lingyun0251的博客
07-08 1245
momoda、网页端和max插件momoda3dsmax插件 momoda 一个账号不要多端同时使用，每个人的增删改在同步后不知会发生什么问题。 上传模型要好久才能出现在“上传模型”文件夹里，还要不知什么时候才会在打开场景里看到；所以要多次点击同步和场景选项里的“场景同步”， 耐心等待。 摆放场景时会有各种各样的问题，大多是模型问题导致momoda不兼容。目前出现过的情况有：物体摆放完点击属性面板后会莫名复位甚至透明消失；模型表面法线与建模软件内不一样（之前用C4D建模时好像平滑标签的问题）；
从零开始学习3D可视化之模型动画
ThingJS的博客
06-09 1503
获取模型动画 播放模型动画 停止播放模型动画 在搭建3D可视化场景的过程中，我发现很多模型都有内置动画，很多模型在制作阶段就内置了动画，如果模型有内置动画，可以在 ThingJS 中利用 API 调用播放这些动画。 比如官方示例中通过 dbclick 事件来控制机柜开启，click 事件来控制鼠标右键关闭机柜。 1、获取模型动画 首先通过animationNames属性获取3D可视化模型都带有有什么动画。 console.log(obj1.animationNames); // 日志窗口..
ThingJS：探索3D信息技术发展应用之3D城市地图搭建
ThingJS的博客
08-14 1078
智慧城市不仅仅是智能化、高效化，它也需要考虑人居因素，ThingJS面向智慧城市提供3D可视化方案，对探索信息技术发展应用具有重要意义。 Citybuilder是ThingJS旗下三维地图城市搭建工具，使用Citybuilder能将我们的geojson数据直接转化成对应的三维城市模型建筑，面数据可以在Citybuilder中选择为面图层样式，也可以选择建筑图层样式或者水系图层样式，除此之外还有点数据和线数据，这些都可以生成对应的点图层和道路图层样式。 作为ThingJS旗下搭建工具，Citybuilder和
ThingJS：3D开发基于js就可以实现change表单事件啦
ThingJS的博客
09-30 213
改变能改变的,接受不能改变的。Change事件也是如此，它只能识别组件数据，ThingJS新功能出炉！3D开发基于js就可以实现change表单事件啦！ Change有“改变”的意思，当元素的值发生改变时，会触发 change 事件。 如何结合2D图形面板和js语法来做3D开发？ThingJS做个好示范，教你着手开发不同物体的温度、雾效和iframe页面。官方新推出change事件的功能，对应各种3D效果元素的值的变化，方便在GUI（图形界面）手动操作，直接生成js代码。 Change事件指代一系列用于改变
ThingJS：十万多个三维空间模型请参考
ThingJS的博客
09-01 653
数字孪生体属于信息空间的产物，而ThingJS提供的是信息可视化应用开发，与数字化未来无缝融合。 数字孪生体 产品数字孪生体是指产品物理实体的工作状态和工作进展在信息空间的全要素重建及数字化映射，是一个集成的多物理、多尺度、超写实、动态概率仿真模型，可用来模拟、监控、诊断、预测、控制产品物理实体在现实环境中的形成过程、状态和行为。 产品数字孪生体对应产品物理实体，一虚一实，我们称之为Thing（物）。ThingJS是一个3D可视化在线开发平台，开发的项目需连通物联网设备来收集感测数据，最终是以3D模型动画效
ThingJS官方示例：7天学会管线3D可视化开发
ThingJS的博客
07-29 1427
对于城市来说，地下管线及其附属设施，是保障城市运行的重要基础设施和生命线，如今想要提升地下管线建设管理水平，3D可视化的需求应运而生。 如何使用thingjs迅速生成管线可视化demo，我来为你解答。 在物联网中，对于管线的检测始终存在难度，如何用可视化的方式来解决这个管线监管问题呢？不论是城市管线还是社区，商场、大厦里的管线，想要实时检测到管线的状态都是比较困难的。我们又该如何通过现如今的技术来实现管线的可视化管理呢？ 智慧电力可视化系统构建发电、输电、变电、配电、用电、调度、通信信息各个环节逐级可视。具
js＋vml创建3D页面效果代码
10-30
js vml制作的3D效果
Javascript html5 实现生成3D三维立体图
01-10
3D图像处理部分参考自刘红石老师的Turbo C源码 http://www.liuhs.com/ 改写成Javascript版本，支持Html5的浏览器打开就可以运行，得到自己的3D画。 在Chrome(版本 48.0.2564.10 64-bit)、Firefox42.0下运行通过，IE9运行有问题。 Convert your pictures to magical sterograms(3D pictures).
ThingJS官方示例（三）：3D标记“Marker”跳跃、闪烁和发光动画效果
ThingJS的博客
12-25 1444
物联网3D可视化场景中，经常用到标注元素作为线路标绘、业务区域标绘，比如定位物联网设备或危险源位置，进行安全作业或者路径导航规划，远程解决难题。 ThingJS的3D标记“Marker”，往往用于顶牌，有两个主要作用： 传入div, image或canvas写文字，展现在3D场景中或绑定在3D物体上； 添加一个图片放置到你希望的位置，作为孩子添加到对象身上，随着对象一同移动。 注意，标记Marker受距离远近影响，呈现近大远小的 3D 效果，也会在 3D 空间中实现前后遮挡。 功能列表更新Ma
3D仿真教程：ThingJS全套环境搭建方案
ThingJS的博客
08-31 2834
在现实世界中，所有物体都不是独立存在的，周围都存在相应环境，常见的环境元素有雨、电、风、光束等，都是3D仿真的主要对象。ThingJS提供了全套环境搭建方案。 如何控制环境与效果？ThingJS 提供4种方式来控制天空和背景：  如何设置背景颜色  如何设置灯光效果  如何设置粒子效果  如何进行幕后处理 （一）设置背景颜色 • 使用 app.background 属性设置背景颜色； app.background = 0xff8844; 取消背景颜色可直接设置： app.background = n
Thingjs 开门示例：以3D机柜为例 演示thingjs如何开门
delouyou5212的博客
10-15 704
动画的播放和暂停是3D场景中常用的功能，本文以机柜为例为您讲解在thingjs中使用playAnimation(params)接口控制机柜门开启和关闭，同理，房门开关、电器运行停止等3D模型的动画启停均可以使用此方法。 用到的Thingjs API： 播放动画 playAnimation(params) 参数 NameTypeDescription ...
ThingJS之了解ThingJS的在线开发平台来创建可视化项目
qq_42739428的博客
04-20 743
作为一个物联网可视化方面的PaaS平台，ThingJS提供了在线开发环境，那么新手该如何使用ThingJS的在线开发环境来开发一个3D可视化项目呢？第一个关键之处就是使用ThingJS的前置要求，必须会javaScript，也就是说，这个也有一定的门槛，会java转javaScript也是较为简单的事情，如果完全不会编程，不建议直接学习和使用。 创建项目 创建项目之前需登录ThingJS账号，如果...
快速搭建3D可视化场景之使用ThingJS解决问题
qq_42739428的博客
10-09 999
想要快速搭建3D场景需要掌握多少知识？其实有时候只需要了解JavaScript就行了，其他的你都可以在ThingJS中找到解决方法！为什么要快速搭建3D场景？在这个互联网时代，你领先了一步，可能就是领先了数万人甚至数百万人！而ThingJS将搭建3D可视化场景简化成了四个步骤：搭建场景、应用开发、数据对接、项目发布。而这四个步骤都十分简单，让你不用再操心其他方面！ 随着互联网的不断发展壮大，...
基于Threejs可着色和旋转的3D模型动画特效，附学习源码
web前端开发
10-22 987
这是一款基于Threejs可着色和旋转的3D模型动画特效。在该特效中，通过鼠标的拖动和滚动，可以旋转和缩放3D模型。最大的特点是你可以对模型的各个部分进行自定义着色。下面...
前端实现Thing.js 3D模型展示Demo
qq_39339668的博客
04-30 5397
记录一下自己本周学习Thing.js的一些心得，然后自己写了一个demo。
Unity3D中文教程：快速掌握3D游戏开发
"Unity3D中文快速入门教程.pdf" Unity3D是一款广受欢迎的跨平台3D游戏开发工具，以其强大的功能和易用性深受开发者喜爱。随着技术的不断更新和升级，Unity3D的最新版本在游戏制作领域表现出色，甚至在画质上可以与...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值