基于三维引擎实现自定义动画的方法、系统、装置及介质制造方法及图纸

本发明专利技术公开了一种基于三维引擎实现自定义动画的方法、系统、装置及介质，属于三维可视化技术领域。其中的方法特征包括：将DOM元素渲染到三维场景中；操控并监听场景内的DOM模型，获得分支动画及其动画配置数据；监听结束后，将所有分支动画的动化配置数据聚合为复合动画数组；将复合动画数组解构为动画配置项；将动画配置项生成动画对象；把动画配置数据转换为动画关键帧；将动画关键帧添加到动画对象，驱动模型在web3D场景中动作。本发明专利技术对web3D场景中用户操作DOM模型的行为（包括缩放、旋转、平移、显示隐藏）进行记录，识别处理后形成可视化的自定义动画配置，减少了代码依赖，实现方法简单高效。法简单高效。法简单高效。

【技术实现步骤摘要】
基于三维引擎实现自定义动画的方法、系统、装置及介质


[0001]本专利技术涉及三维可视化
，尤其涉及一种基于三维引擎实现自定义动画的方法、系统、装置及介质。

技术介绍

[0002]随着计算机技术的发展，三维可视化技术广泛应用于各行各业中，三维可视化将真实场景通过建模等方式制作成虚拟仿真的场景，尽可能的还原真实世界，但仅仅是场景表达的信息是有限的，更多的内容还是需要文字解释或者二维的图像、图表等传递给用户。因此目前大部分的场景都是将二维的内容渲染到三维引擎中，两者相结合，达到更好的交互体验。
[0003]WebGL技术广泛应用于开发三维的网页场景，如公开号为CN107680151A的中国专利技术专利，通过描述WebGL的工作流程披露了一种增强Web3D中的指示性动画实现能力的方法，验证了可以通过DOM元素屏幕坐标和实体空间三维坐标动态绑定，将HTML5+CSS3构建指示性动画应用在web3D场景。
[0004]上述现有技术通过数据驱动三维场景中的DOM元素，通过屏幕坐标与空间三维坐标及计算和判断，实现移动或者颜色变换等动作，本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种基于三维引擎实现自定义动画的方法，其特征在于，包括以下步骤：S1、将DOM元素以模型的方式渲染到三维场景中；S2、操控场景内的DOM模型并对其进行监听，将DOM模型在每一个触控操作周期内的动作轨迹记录为一个分支动画，将DOM模型在每一个触控操作周期内的尺寸、旋转角、旋转方向、位置、透明度的变化数据和周期时间对应整合为每一个分支动画的动画配置数据；监听结束后，将记录的所有分支动画的动化配置数据聚合为复合动画数组；S3、遍历所述复合动画数组，按照不同属性分类将所述复合动画数组分析解构为不同的动画配置项，并展示在可视化界面中；S4、通过调用Babylon.js提供的BABYLON.Animation函数将展示在可视化界面中的动画配置项对应生成动画对象；S5、通过定义三维场景请求的每秒帧数，把动画配置数据中的动画时长由秒数转换为帧数，获得动画关键帧；S6、通过Babylon.js提供的animationBox.setKeys函数把生成的动画关键帧添加到动画对象中，最后调用Babylon.js提供的scene.beginAnimation()函数驱动模型，使得DOM模型渲染在web3D场景中，复现S2的动作。2.如权利要求1所述的一种基于三维引擎实现自定义动画的方法，其特征在于，所述方法S3之后，还包括以下步骤：对所述复合动画数组提供可配置的缓动函数。3.如权利要求1所述的一种基于三维引擎实现自定义动画的方法，其特征在于，所述S1的具体步骤包括：通过使用Babylon.js提供的Babylon.GUI库和HTML文本纹理，将DOM元素以模型的方式添加到三维场景中。4.如权利要求1所述的一种基于三维引擎实现自定义动画的方法，其特征在于，所述S2中，将鼠标对模型的每一次“按下
‑
释放”作为一个触控操作周期，每个触控操作周期的时间即为每个分支动画的时间。5.如权利要求1所述的一种基于三维引擎实现自定义动画的方法，其特征在于，所述S2的具体步骤包括：S21、点击“开始记录动画”按钮，通过为场景添加监听事件，将DOM模型在每一个触控操作周期内的动作轨迹记录为一个分支动画；S22、监听模型在每一个触控操作周期内的动作的尺寸、旋转角、旋转方向、位置、透明度的变化数据和周期时间，将其对应整合为每一个分支动画的动画配置数据；...

【专利技术属性】
技术研发人员：朱春华，焦丽丽，杨磊，李明阳，王秋茹，王凯文，
申请(专利权)人：山东捷瑞数字科技股份有限公司，
类型：发明
国别省市：