ThingJS:如何快速生成3D动画?

从零开始学习3D可视化之模型动画 获取模型动画 播放模型动画 停止播放模型动画 在搭建3D可视化场景的过程中,我发现很多模型都有内置动画,很多模型在制作阶段就内置了动画,如果模型有内置动画,可以在 ThingJS 中利用 API 调用播放这些动画。 比如官方示例中通过 dbclick 事件来控制机柜开启,click 事件来控制鼠标右键关闭机柜。 1、获取模型动画 首先通过animationNames属性获取3D可视化模型都带有有什么动画。 console.log(obj1.animationNames); // 日志窗口.. 阅读详情

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

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

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

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

console.log(obj1.animationNames); 

输出:

  1. 播放模型动画
    我们使用 playAnimation 接口进行动画播放。
    • 简单播放动画
 obj.playAnimation({
 
ThingJS官方示例(三):3D标记“Marker”跳跃、闪烁和发光动画效果 物联网3D可视化场景中,经常用到标注元素作为线路标绘、业务区域标绘,比如定位物联网设备或危险源位置,进行安全作业或者路径导航规划,远程解决难题。 ThingJS的3D标记“Marker”,往往用于顶牌,有两个主要作用: 传入div, image或canvas写文字,展现在3D场景中或绑定在3D物体上; 添加一个图片放置到你希望的位置,作为孩子添加到对象身上,随着对象一同移动。 注意,标记Marker受距离远近影响,呈现近大远小的 3D 效果,也会在 3D 空间中实现前后遮挡。 功能列表更新Ma 阅读详情

相关推荐

ThingJS:十万多个三维空间模型请参考

数字孪生体属于信息空间的产物,而ThingJS提供的是信息可视化应用开发,与数字化未来无缝融合。 数字孪生体 产品数字孪生体是指产品物理实体的工作状态和工作进展在信息空间的全要素重建及数字化映射,是一个集成的多物理、多尺度、超写实、动态概率仿真模型,可用来模拟、监控、诊断、预测、控制产品物理实体在现实环境中的形成过程、状态和行为。 产品数字孪生体对应产品物理实体,一虚一实,我们称之为Thing(物)。ThingJS是一个3D可视化在线开发平台,开发的项目需连通物联网设备来收集感测数据,最终是以3D模型动画效

ThingJS的博客 750

ThingJS:如何一键生成3D城市地图

ThingJS除了PASS能力,还提供了CampusBuilder/CityBuilder等SAAS平台,用来实现3D地图的交互配置,属于ThingJS可视化搭建组件之一。而且,CityBuilder还支持JS代码编辑,无代码进行创作,让3D地图开发成为设计人员也能够上手、和开发人员良好协作的一款产品。 ThingJS提供了一个城市场景的搭建工具CityBuilder,可以自动搭建3D城市地图,不需要我们另外去使用3Ds max等工具来制作模型,否则的话项目开发复杂度会高很多。一个好消息就是,ThingJS

ThingJS的博客 5851

3D仿真教程:ThingJS全套环境搭建方案

在现实世界中,所有物体都不是独立存在的,周围都存在相应环境,常见的环境元素有雨、电、风、光束等,都是3D仿真的主要对象。ThingJS提供了全套环境搭建方案。 如何控制环境与效果?ThingJS 提供4种方式来控制天空和背景:  如何设置背景颜色  如何设置灯光效果  如何设置粒子效果  如何进行幕后处理 (一)设置背景颜色 • 使用 app.background 属性设置背景颜色; app.background = 0xff8844; 取消背景颜色可直接设置: app.background = n

ThingJS的博客 3057

快速搭建3D可视化场景之使用ThingJS解决问题

想要快速搭建3D场景需要掌握多少知识?其实有时候只需要了解JavaScript就行了,其他的你都可以在ThingJS中找到解决方法!为什么要快速搭建3D场景?在这个互联网时代,你领先了一步,可能就是领先了数万人甚至数百万人!而ThingJS将搭建3D可视化场景简化成了四个步骤:搭建场景、应用开发、数据对接、项目发布。而这四个步骤都十分简单,让你不用再操心其他方面! 随着互联网的不断发展壮大,...

qq_42739428的博客 1153

ThingJS,提升你的3D设计力!

如果一个设计中充斥着太多的内容,这个页面会显得杂乱无章,读者也无法从中很快看到所需的信息。ThingJS的3D开发也遵循同样的设计原则。 世界级设计师Robin Williams认为,复杂的设计原理不那么复杂,凝炼为亲密性、对齐、重复和对比4个基本原则。今天,来跟我了解什么是四大设计基本原则, 并且基于概念来找出自己目前面临的“形象设计”问题,不管是你的邮件还是文档,结果一定会让你刮目相看。 ThingJS平台提供的是3D开发平台,有场景搭建工具,也有3D开发应用,这都离不开设计审美力。因为3D不仅仅实现了

ThingJS的博客 1409

基于WebGL的3D技术在网页中的运用 ThingJS

Three.js、ThingJS这些引擎库可以加载3D制作软件的模型,大幅度提高了制作效率,改变WebGL开发困难的局面,让Web开发者享受便捷的3D开发服务。三者的开发难度对比如下: ThingJS(框架)< Three.js(引擎)< WebGL(接口) 3D绘图标准 - WebGL WebGL是一种3D绘图标准,通过结合Javascript和OpenGL ES 2.0,可以为HTML5的Canvas标签提供硬件3D加速渲染,这样Web开发人员可以借助系统显卡在浏览器里更流畅地展示3D

ThingJS的博客 2177

ThingJS 和three.js对比开发太空漫游技术!3D 可视化

ThingJS 3D用来增加视觉效果,给人以更加直观,真实的感觉。 ThingJS 3D框架简化了开发工作,面向对象和模块化的特点使得网页代码更加易于管理和维护,并且提供近200个官方示例,直接获取API能力,不需要基于3D概念进行开发,适合3D商业项目快速生成!距离您的业务仅一层之隔,是非开发者也容易理解的一种应用方法。 Three.js是更为底层的3D渲染器,提供各式各样的3D开发概念,例如材质、网格、shader、灯光,逐一进行定制化开发,要求程序员要有清晰的设计思路,尤其是在3D对象类的定义上。

ThingJS的博客 3448

ThingJS官方示例:7天学会管线3D可视化开发

对于城市来说,地下管线及其附属设施,是保障城市运行的重要基础设施和生命线,如今想要提升地下管线建设管理水平,3D可视化的需求应运而生。 如何使用thingjs迅速生成管线可视化demo,我来为你解答。 在物联网中,对于管线的检测始终存在难度,如何用可视化的方式来解决这个管线监管问题呢?不论是城市管线还是社区,商场、大厦里的管线,想要实时检测到管线的状态都是比较困难的。我们又该如何通过现如今的技术来实现管线的可视化管理呢? 智慧电力可视化系统构建发电、输电、变电、配电、用电、调度、通信信息各个环节逐级可视。具

ThingJS的博客 1541

基于WebGL的三维大屏可视化技术实践 thingjs 3d 开发

DataV, 腾讯云图,帆软等可视化大屏应用厂商,都提供三维可视化分析工具。ThingJS是近两年新兴的3D可视化开发组件,助力物联网3D可视化的未来发展。新基建浪潮汹涌,智慧城市建设也到了落地阶段,不再是纯粹的概念,很多物联网技术开始崭露头角,相较于之前的低调行为,3D可视化领域有何变化呢? 以前 三维可视化城市大屏应用属于保密项目,CVS(可视化展示服务)系统部署在安全消防、城市交通、智慧工厂、城市管理等运营管理客户端,属于小众需求,随着云模式部署比例加大,大屏应用支持可视化组件进行监控画面搭建,中小开

ThingJS的博客 3783

3D灯光教程仅需三个步骤,用ThingJS体验极速开发!

人生苦短,3D灯光教程仅需三个步骤,用ThingJS体验极速开发! 灯光有助于表达一种情感,或引导观众的目光看向具体的位置。灯光能够反映一种基调,对整个图像的外观至关重要。下面教你关于打灯光的技巧,以及轻便的开发方法。 ThingJS提供一套操作简便的灯光配置项,只要配置结束后,记得点击生成代码块并执行,一套完整的初级灯光效果就出来了。 主灯光 主灯光对象是对主光源的控制代码,可设置的变量包括阴影、颜色、强度和打灯角度。主光源通常放在四分之三的位置上,位置是从物体的正面转45度,并从中心线向上转45度。夜

ThingJS的博客 1671

ThingJS 3D开发如何实现进出层级?超简单!

作为开发真的不容易,要不就偷懒一下吧~偷懒也有好处,利用轻量化工具能节省很多时间,让你做出傲人的商业3D可视化项目效果! 好的开始是成功的一半。只要你拥有了JavaScript基础,同时也了解如何使用上传后的资源,我们就可以开始通过ThingJS在线开发平台制作我们的第一个“HelloWorld”项目了。不了解如何操作的,可以点击 学习如何上传js/css/图片等资源到ThingJS。 ThingJS项目初制作 在ThingJS开发中,最重要的就是我们的APP对象了,有关ThingJS App对象介绍,大家

ThingJS的博客 1765

ThingJS,像孩子搭乐高一样去开发3D商业项目!

ThingJS是一个基于JS代码进行开发的PAAS平台,通过轻量化的官方示例,快速上手3D可视化,只要懂得JS的设计师或者开发人员,都能够在短时间内有不错的开发成果。 启动平台之后,第一步该是创建对象APP,以便承载后期的3D功能开发。 ThingJS启动后创建核心对象APP ThingJS的核心对象APP创建方法如下: 1 var app = new THING.App(); 加载园区场景 这个是核心对象的创建方法,具体还有加载园区的方式,通过URL的方式将园区加载至ThingJS中: var app

ThingJS的博客 1510

多个物体模型快速制作爆炸图?试一试ThingJS

爆炸图,其实是一个外来词汇,英文的名称是Exploded Views。在日常生活中,购买的各种各样的日常生活用品的使用说明书上都有装配示意图,它是图解说明各构件的。可以说这个具有立体感的分解说明图就是个最简单的爆炸图。具体点说是轴测装配示意图。同时国家标准也作了相应规定,要求工业产品的使用说明书中的产品结构优先采用立体图示。可以说爆炸图就是立体装配图。 ​爆炸图是当今的三维CAD、CAM软件中的一项重要功能。有了这个相应的操作功能选项,工程技术人员在绘制立体装配示意图时就显得轻松多了,不仅提高了工作效率还

ThingJS的博客 4156

将三维模型(obj)导出js格式供threeJS中调用

前言 前段时间自己做过将在3Dmax中画的三维模型转换为js格式,通过threeJS中调用显示,最近又在做相关的项目,在这写个笔记吧。 1. 转换前准备 准备obj格式的三维模型 首先你肯定得需要一个obj格式的三维模型吧,我们可以打开Blender,或者3Dmax,随便构建一个三维模型;如图所示(这里我用3Dmax): 安装python 我的电脑是安装了python2.7.11,...

jiegiser博客 1万+

OpenCollada 3DMax 导出插件(支持max11-17)

支持3ds Max 2011 (32bit/64bit)、3ds Max 2012 (32bit/64bit)、3ds Max 2013 (32bit/64bit)、3ds Max 2014 (64bit)、3ds Max 2015 (64bit)、3ds Max 2016 (64bit)、3ds Max 2017 (64bit)。 3dmax导出dae格式时,会出现丢失贴图的情况,安装OpenCollada for 3DMax2017 插件可以导带贴图是我dae文件。 具体用法:1)安装:将COLLADAMaxNew.dle放到3DMAX的安装目录中的 plugins 文件夹中,然后重启3DMAX。 2)使用:打开一个后缀为max的3D模型,导出,在保存类型中就多了OpenCollada这一项,然后选择OpenCollada这一项,点击保存,勾选中”copy Images“ ,点击OK。

【机器学习入门】1.4 吃透这些基本术语,才算真正入门

本文通过"挑西瓜"的生活案例,形象解释了机器学习的基本术语。样本对应单个西瓜,特征如色泽、根蒂等是观察维度,特征值是其具体表现,标签是西瓜的好坏判断。数据集是样本集合,特征向量是样本的数学表达,特征空间是所有可能的样本组合。文章强调数据集需划分为训练集、验证集和测试集,以评估模型的泛化能力。最后整理了术语对照表,并解答了常见问题。这些基础概念是理解机器学习的关键,建议读者重点掌握。

国科大硕士在读,分享Python/GEE/Matlab/R专业代码实践,涵盖数据分析、算法开发与应用技巧等,以代码会友。 656

MIPI video mode 和 command mode 的区别

1、何为LCD RAM? LCD 是指字面意思是液晶显示屏(Liquid Crystal Display), 而RAM: 随机存取存储器(Random-Access Memory),两者完全是风马牛不相及的东西。 下图是一个标准的LCD的爆炸图(不含TP),请注意图中红色mark的地方:控制IC-- LCD的大脑。所谓的LCD RAM自然是指此大脑是否包含RAM. 题外话<不感兴趣的...

精诚所至 4691

ESP32S3学习——i2c,点亮0.96寸oled

ESP32S3学习——i2c,点亮0.96寸oled

HandBAI的博客 1万+

若依(RuoYi)项目里,Quartz定时任务踩坑实录:并发控制、事务回滚与异常处理

本文深入解析若依(RuoYi)项目中Quartz定时任务的并发控制、事务回滚与异常处理三大核心问题。通过实战案例揭示@DisallowConcurrentExecution注解的局限性和Redis分布式锁的应用,详细讲解Spring事务集成方案及多数据源事务管理,并提供生产级监控体系搭建指南,帮助开发者规避Quartz在生产环境中的常见陷阱。

weixin_28731223的博客 413

点云配准3:3d-ndt算法在pcl上的实现以及参数设置

3d-ndt算法在pcl上的使用方法以及参数设置

诺有缸的高飞鸟的博客 7894

selenium绕过检测,规避检测

现在不少大网站有对selenium采取了监测机制。比如正常情况下我们用浏览器访问淘宝等网站的 window.navigator.webdriver的值为 undefined或者为false。而使用selenium访问则该值为true。那么如何解决这个问题呢?我们正常浏览器登录查看,window.navigator.webdriver的值为false我们通过selenium打开的网页,测试,可见window.navigator.webdriver的值为true。

景天科技苑 1万+

UG\NX二次开发 获取对象的层、颜色、隐藏状态、线宽、线型、高亮显示状态

获取对象的层、颜色、隐藏状态、线宽、线型、高亮显示状态。

王牌飞行员_里海的博客 1984

最新Python爬虫实战(入门爬虫篇)——案例18:某气象局全国天气预报数据采集(详细爬虫思路截图 + 抓包动图演示+完整爬虫代码+详细注释)

本次案例针对某气象局天气预报网的静态HTML页面,实现了全国各地区天气数据的全自动化爬取,和之前案例17的动态接口爬虫不同,本次案例聚焦于静态页面的爬虫实现,覆盖了从抓包分析、请求模拟、数据解析到数据存储的完整爬虫流程,非常适合入门学习者巩固基础,核心知识点和实现要点总结如下:首先是页面分析的核心逻辑,静态HTML页面的数据爬取,核心在于通过浏览器开发者工具,完成完整的抓包分析和标签结构定位。

努力让自己发光,对的人才能迎着光而来 27万+

lwip-2.0.3

lwip是瑞典计算机科学院(SICS)的Adam Dunkels 开发的一个小型开源的TCP/IP协议栈。实现的重点是在保持TCP协议主要功能的基础上减少对RAM 的占用。

C# WinForm 基于DirectShow.dll编写的程序,可边预览边保存视频,音频和图片

基于微软的DirectShow.dll的二次开发1.自动识别连接的摄像头跟麦克风且可以对其进行选择(默认选中第一个)2.可录制wmv和avi两种格式的视频并且都带有音频,avi可以录制的分辨率和帧数进行选择,wmv默认进行了淸晰度优化如不喜欢可去除代码中有相关提示3.可在预览点开之后进行拍照,也可边录制视频边拍照4.添加了视频和音频的压缩功能(酌情使用)这次二次开发发现C#对DirectShow的相关信息太少,这次做完也不敢藏私共享出来,还望大家指正

NTscan扫描工具

ntscan是一个扫描器,可以扫描没有密码和弱密码的共享,先到配置文件中填写猜测的用户名和密码,扫描过程中右侧出现的是扫描日志。

温度PID控制PLC程序

温度PID稳定控制程序,适用于欧姆龙PLC,对其他PLC也具有很大参考价值

上一篇: 降低开发选择成本!用ThingJS实现3D线条渲染
下一篇: 3D仿真教程:ThingJS全套环境搭建方案
ThingJS_小锘
博客等级 码龄6年 170粉丝 254原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明:

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

余额充值