当前位置: 首页 > Web前端 > HTML5

Sovit3D可视化开发平台组件动画特效零代码实现

时间:2023-04-05 23:56:46 HTML5

“动画”特效是3D可视化开发中必不可少的元素之一,它可以直观、生动地还原真实场景。近日,3D可视化开发工具——Sovit3D更新了“在线动画定义功能”,零代码实现模型组件在3D场景下的动画。例如,我们在开发智能风电场项目时,可以利用数字孪生技术对风力发电机进行数字化映射和建模,然后通过传感器获取风力发电机的各种数据,将数据绑定驱动风的动画风力发电机旋转,1:1还原风力发电机真实发电场景。▲旋转、变色、展开等动画效果目前支持的动画特效类型旋转动画:设置三维组件实现旋转,设置360度数旋转或只转一个小角度。变色显示:设置绑定某个数据触发变色,可以根据不同的情况变化出不同的颜色。心跳动画:设置3D组件,实现循环跳动的效果。显隐闪烁:绑定的数据满足指定条件后,会不断实现“显隐”的效果。变色闪烁:绑定数据达到指定条件后,“变色”效果不断闪烁。所有动画都可以绑定动态数据,动画效果由数据变化触发。下面以风扇为例设置动画,选择需要动画的组件。上图选择“BladeandHub”组。(风力机建模时已经分好组,三个叶片+轮毂属于同一组。同时该组与“IntegralNacelle”组合并为“BladeandOverallNacelle”组).#进入【动画】设置页签。·在【动画类型】中选择“旋转”动画。·【旋转轴】选择“Z轴”(场景中蓝色轴为Z轴)。【执行类型】选择“无限循环”(选择无限循环时,旋转角度只能是360度),“执行时间”(数字“6”表示转一圈需要6秒).注意:设置动画时,可以选择数据集绑定动态数据,设置数据触发条件。不同的数据条件以不同的速度旋转。#接下来用同样的方法给“叶片和机舱整体”组设置转动一定角度的动画,实现机舱“偏航”的效果。同时绑定一个动态数据,实现两个角度变化的效果,设置好后保存。动画设置好后,可以通过预览或者发帖的方式查看动画效果。下面是风扇动画效果图演示。更多动画效果将陆续更新发布。关注SovitJs微信公众号或进入官网(www.SovitJs.com),获取最新产品动态。