CN116188638A - 基于三维引擎实现自定义动画的方法、***、装置及介质 - Google Patents

基于三维引擎实现自定义动画的方法、***、装置及介质 Download PDF

Info

Publication number
CN116188638A
CN116188638A CN202310464431.2A CN202310464431A CN116188638A CN 116188638 A CN116188638 A CN 116188638A CN 202310464431 A CN202310464431 A CN 202310464431A CN 116188638 A CN116188638 A CN 116188638A
Authority
CN
China
Prior art keywords
animation
model
scene
dom
dimensional
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Granted
Application number
CN202310464431.2A
Other languages
English (en)
Other versions
CN116188638B (zh
Inventor
朱春华
焦丽丽
杨磊
李明阳
王秋茹
王凯文
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Shandong Jierui Information Technology Industry Research Institute Co ltd
Shandong Jerei Digital Technology Co Ltd
Original Assignee
Shandong Jierui Information Technology Industry Research Institute Co ltd
Shandong Jerei Digital Technology Co Ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Shandong Jierui Information Technology Industry Research Institute Co ltd, Shandong Jerei Digital Technology Co Ltd filed Critical Shandong Jierui Information Technology Industry Research Institute Co ltd
Priority to CN202310464431.2A priority Critical patent/CN116188638B/zh
Publication of CN116188638A publication Critical patent/CN116188638A/zh
Application granted granted Critical
Publication of CN116188638B publication Critical patent/CN116188638B/zh
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Images

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
    • G06T13/00—Animation
    • G06T13/20—3D [Three Dimensional] animation
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0484—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
    • G06F3/04845—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range for image manipulation, e.g. dragging, rotation, expansion or change of colour
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0487—Interaction techniques based on graphical user interfaces [GUI] using specific features provided by the input device, e.g. functions controlled by the rotation of a mouse with dual sensing arrangements, or of the nature of the input device, e.g. tap gestures based on pressure sensed by a digitiser
    • G06F3/0488—Interaction techniques based on graphical user interfaces [GUI] using specific features provided by the input device, e.g. functions controlled by the rotation of a mouse with dual sensing arrangements, or of the nature of the input device, e.g. tap gestures based on pressure sensed by a digitiser using a touch-screen or digitiser, e.g. input of commands through traced gestures
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00—Arrangements for software engineering
    • G06F8/30—Creation or generation of source code
    • G06F8/34—Graphical or visual programming
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00—Arrangements for software engineering
    • G06F8/30—Creation or generation of source code
    • G06F8/38—Creation or generation of source code for implementing user interfaces
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
    • G06T19/00—Manipulating 3D models or images for computer graphics
    • G06T19/20—Editing of 3D images, e.g. changing shapes or colours, aligning objects or positioning parts
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
    • G06T2213/00—Indexing scheme for animation
    • G06T2213/04—Animation description language
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
    • G06T2213/00—Indexing scheme for animation
    • G06T2213/08—Animation software package
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
    • G06T2219/00—Indexing scheme for manipulating 3D models or images for computer graphics
    • G06T2219/20—Indexing scheme for editing of 3D models
    • G06T2219/2016—Rotation, translation, scaling
    • Y—GENERAL TAGGING OF NEW TECHNOLOGICAL DEVELOPMENTS; GENERAL TAGGING OF CROSS-SECTIONAL TECHNOLOGIES SPANNING OVER SEVERAL SECTIONS OF THE IPC; TECHNICAL SUBJECTS COVERED BY FORMER USPC CROSS-REFERENCE ART COLLECTIONS [XRACs] AND DIGESTS
    • Y02—TECHNOLOGIES OR APPLICATIONS FOR MITIGATION OR ADAPTATION AGAINST CLIMATE CHANGE
    • Y02D—CLIMATE CHANGE MITIGATION TECHNOLOGIES IN INFORMATION AND COMMUNICATION TECHNOLOGIES [ICT], I.E. INFORMATION AND COMMUNICATION TECHNOLOGIES AIMING AT THE REDUCTION OF THEIR OWN ENERGY USE
    • Y02D10/00—Energy efficient computing, e.g. low power processors, power management or thermal management

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • General Engineering & Computer Science (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Software Systems (AREA)
  • Human Computer Interaction (AREA)
  • Architecture (AREA)
  • Computer Graphics (AREA)
  • Computer Hardware Design (AREA)
  • Processing Or Creating Images (AREA)
  • User Interface Of Digital Computer (AREA)

Abstract

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

Description

基于三维引擎实现自定义动画的方法、***、装置及介质
技术领域
本发明涉及三维可视化技术领域，尤其涉及一种基于三维引擎实现自定义动画的方法、***、装置及介质。
背景技术
随着计算机技术的发展，三维可视化技术广泛应用于各行各业中，三维可视化将真实场景通过建模等方式制作成虚拟仿真的场景，尽可能的还原真实世界，但仅仅是场景表达的信息是有限的，更多的内容还是需要文字解释或者二维的图像、图表等传递给用户。因此目前大部分的场景都是将二维的内容渲染到三维引擎中，两者相结合，达到更好的交互体验。
WebGL技术广泛应用于开发三维的网页场景，如公开号为CN107680151A的中国发明专利，通过描述WebGL的工作流程披露了一种增强Web3D中的指示性动画实现能力的方法，验证了可以通过DOM元素屏幕坐标和实体空间三维坐标动态绑定，将HTML5+CSS3构建指示性动画应用在web3D场景。
上述现有技术通过数据驱动三维场景中的DOM元素，通过屏幕坐标与空间三维坐标及计算和判断，实现移动或者颜色变换等动作，这就要求使用者能够熟练掌握三维场景中的空间位置的计算。即便如此，现有技术仍无法对场景中的DOM元素实现缩放、旋转、平移等复合型动作。由此可见，想要实现自定义的动画效果需要掌握的专业技术较多，每一步动画都需要准确的数据，非专业的开发人员无法实现自定义的动画效果。
发明内容
为解决上述问题，本发明提供一种基于三维引擎实现自定义动画的方法、***、装置及介质，通过从记录动画到复现动画的方式，在三维引擎中不依赖代码驱动DOM元素完成复杂动画的呈现，提升开发工作的效率及灵活性。
本发明解决其技术问题采取的技术方案是：
第一方面，本发明提供一种基于三维引擎实现自定义动画的方法，包括以下步骤：
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的动作。
进一步地，所述方法S3之后，还可以包括以下步骤：
对所述复合动画数组提供可配置的缓动函数，以控制动画执行的时间曲线，使得动画执行更加流畅。
在一种具体的实施方式中，所述S1具体包括：
通过使用Babylon.js提供的Babylon.GUI库和HTML文本纹理，将DOM元素以模型的方式添加到三维场景中。
在一种具体的实施方式中，所述S2中，将鼠标对模型的每一次“按下-释放”作为一个触控操作周期，每个触控操作周期的时间即为每个分支动画的时间。
在一种具体的实施方式中，所述S2的具体步骤包括：
S21、点击“开始记录动画”按钮，通过为场景添加监听事件，将DOM模型在每一个触控操作周期内的动作轨迹记录为一个分支动画；
S22、监听模型在每一个触控操作周期内的动作的尺寸、旋转角、旋转方向、位置、透明度等模型变化数据和周期时间，将其对应整合为每一个分支动画的动画配置数据；
S23、点击“结束记录动画”按钮，停止对用户操作的监听，将记录的所有分支动画的动画配置数据聚合为复合动画数组。
在一种具体的实施方式中，所述S3中，用户可以通过展示在可视化界面中的动画配置项，对整体复合动画或每一个分支动画编辑修改或删除。
第二方面，本发明基于功能模块的角度，提供一种基于三维引擎实现自定义动画的***，包括：
模型创建模块，将DOM元素以模型的方式渲染到三维场景中；
监听采集模块，用以操控场景内的DOM模型并对其进行监听，将DOM模型在每一个触控操作周期内的动作轨迹记录为一个分支动画，将DOM模型在每一个触控操作周期内的尺寸、旋转角、旋转方向、位置、透明度的变化数据和周期时间对应整合为每一个分支动画的动画配置数据；监听结束后，将记录的所有分支动画的动化配置数据聚合为复合动画数组；
配置项生成模块，用以遍历所述复合动画数组，按照不同属性分类将所述复合动画数组分析解构为不同的动画配置项，并展示在可视化界面中；
动画对象生成模块，用以通过调用Babylon.js提供的BABYLON.Animation函数将展示在可视化界面中的动画配置项对应生成动画对象；
关键帧获取模块，用以通过定义三维场景请求的每秒帧数，把动画配置数据中的动画时长由秒数转换为帧数，获得动画关键帧；
模型渲染模块，用以通过Babylon.js提供的animationBox.setKeys函数把生成的动画关键帧添加到动画对象中，最后调用Babylon.js提供的scene.beginAnimation()函数驱动模型，使得DOM模型渲染在web3D场景中，复现S2的动作。
在一种具体的实施方式中，所述自定义动画的装置，还包括：
缓动模块，用以对所述复合动画数组提供可配置的缓动函数，以控制动画执行的时间曲线，使得动画执行更加流畅。
所述的监听采集模块，进一步包括：
分支动画记录单元，用以将DOM模型在每一个触控操作周期内的动作轨迹记录为一个分支动画；
动画数据获取单元，用以监听模型在每一个触控操作周期内的动作的尺寸、旋转角、旋转方向、位置、透明度变化数据和周期时间，将其对应整合为每一个分支动画的动画配置数据；
动画数据聚合单元，用以将记录的所有分支动画的动画配置数据聚合为复合动画数组。
第三方面，本发明基于硬件的角度，提供一种基于三维引擎实现自定义动画的装置，包括：
存储器，用以存储计算机程序；
处理器，用以执行所述计算机程序时实现如上所述的基于三维引擎实现自定义动画的方法的步骤。
第四方面，本发明还提供一种计算机可读储存介质，所述计算机可读储存介质上存储有计算机程序，所述计算机程序被处理器执行时实现如上述的基于三维引擎实现自定义动画的方法的步骤。
与现有技术相比，本发明的有益效果在于：
1、本发明将原本需要使用代码编写的动画配置，通过用户行为采集加可视化配置的方式，实现了低代码开发，不会编程的用户也能实现出复杂的动画效果。
2、本发明提供“所见即所得”的动画生成方式，在web3D场景中，记录想要达到的动画效果，将自动生成出复杂的轨迹动画，解决传统的自定义动画是经过“代码—动画”多次调试后，才能得到满意效果的弊端。
3、本发明将用户行为采集后的处理结果反馈给用户，用户可在此基础上补充、删减、配置缓动函数等功能，解决行为采集时操作不流畅导致的动画卡顿问题。
附图说明
图1是一种基于三维引擎实现自定义动画的***结构示意图；
图2是一种基于三维引擎实现自定义动画的装置结构示意图。
具体实施方式
为能清楚说明本方案的技术特点，下面将通过具体实施方式并结合其附图，对本发明的技术方案进行详细阐述。下文的公开提供了许多不同的实施例用来实现本发明的不同结构。为了简化本发明的公开，下文中对特定例子的部件和设置进行描述。此外，本发明可以在不同例子中重复参考数字和/或字母。这种重复是为了简化和清楚的目的，其本身不指示所讨论各种实施例和/或设置之间的关系。应当注意，在附图中所图示的部件不一定按比例绘制。本发明省略了对公知组件和处理技术及工艺的描述以避免不必要地限制本发明。
为了有助于快速理解本发明具体实施例的技术方案，在描述本发明具体方案之前，以下先对实施例中所涉及的某些专业术语，作出相关解释：
DOM元素：是指在网页中通常经由文档对象模型（Document Object Model，简称DOM）渲染的二维内容。
Web3D：是一种利用Web技术创建和展示3D场景和模型的技术，让用户可以通过浏览器直接访问和浏览3D内容。
WebGL(Web Graphics Library）：是一种能够让3D模型在网页中实现的程序语言。
Babylon.js：是一个使用HTML5和WebGL构建3D场景的JavaScript框架，广泛应用于开发三维的网页场景。
Babylon.GUI库：是一款可用于Web3D用户界面的UI组件库，使用Babylon.GUI可以使我们像在2D平面中布局UI那样在3D场景中放置按钮、文本标签和面板等各种控件，此外它还支持在WebVR中布局UI。
实施例一
一种基于三维引擎实现自定义动画的方法，首先对三维场景中用户操作DOM模型的过程进行记录，操作行为可以包含缩放、旋转、平移、显示、隐藏中的一种或者多种复合，操作结束后，对记录的用户行为进行识别处理，解析为可视化的动画配置，最终根据动画配置驱动场景中的DOM模型，复现用户的记录的动画过程。
具体的方法步骤如下：
S1、采用HTML5编写DOM元素，使用Babylon.GUI库在三维场景中创建一个GUI平面，创建HTML文本纹理并将其应用于创建好的GUI平面，便可以将编写好的DOM元素以模型的方式渲染在三维场景中。
S21、点击可视化界面中的“开始记录动画”按钮，对用户的操作开始监听，监听用户的鼠标左键从按下到释放之间、对DOM模型所作出的包括旋转、缩放、显示隐藏和平移在内的所有行为，将鼠标的每次“按下—释放”作为一个触控操作周期，将每一个触控操作周期内的行为记录为一个分支动画，每一个触控操作周期的时间即为每一个分支动画的时间；
S22、每个触控操作周期行为结束后，获取DOM模型的尺寸、旋转角、旋转方向、位置、透明度等模型变化数据和周期时间，将其对应整合为分支动画的动画配置数据；
S23、点击可视化界面中的“结束记录动画”按钮，停止对用户操作的监听，将记录的多个分支动画的动画配置数据聚合为复合动画数组。
S3、通过增强for循环对复合动画数组进行遍历处理，并按照分类进行解构，具体是将所有沿X轴移动的动画属性汇总在一起，将所有缩放宽度的动画属性汇总在一起，将所有缩放高度的动画属性汇总在一起，将所有旋转的动画属性汇总在一起；最终获得不同分类的动画配置项，展示在可视化界面中，用户可以通过不同的动画配置项对复合动画进行补充，也可以对每一个分支动画进行修改和删除。
S4、为动画提供可配置的缓动函数，通过缓动函数控制动画执行的时间曲线，让动画执行更加流畅。
S5、对用户调整确认后的动画配置进行分析计算，通过调用Babylon.js提供的BABYLON.Animation函数将展示在可视化界面中的不同分类的动画配置项生成对应的动画对象，所述动画对象包括旋转动画、缩放动画、显示隐藏动画和平移动画。
S6、通过定义三维场景请求的每秒帧数为30，把动画配置数据中的动画时长由秒数转换为帧数，如本实施例将原配置为3秒钟的动画，转换为90帧，据此换算方式获得动画关键帧。
S7、通过Babylon.js提供的animationBox.setKeys函数把生成的动画关键帧添加到动画对象中，最后调用Babylon.js提供的scene.beginAnimation()函数驱动模型，使得DOM模型渲染在web3D场景中，复现S2的动作。
实施例二
基于功能模块的角度，本实施例提供一种基于三维引擎实现自定义动画的***，如图1所示，包括以下技术模块：
模型创建模块，将DOM元素以模型的方式渲染到三维场景中；
监听采集模块，用以操控场景内的DOM模型并对其进行监听，将DOM模型在每一个触控操作周期内的动作轨迹记录为一个分支动画，将DOM模型在每一个触控操作周期内的尺寸、旋转角、旋转方向、位置、透明度的变化数据和周期时间对应整合为每一个分支动画的动画配置数据；监听结束后，将记录的所有分支动画的动化配置数据聚合为复合动画数组；
配置项生成模块，用以遍历所述复合动画数组，按照不同属性分类将所述复合动画数组分析解构为不同的动画配置项，并展示在可视化界面中；
缓动模块，用以对所述复合动画数组提供可配置的缓动函数，以控制动画执行的时间曲线，使得动画执行更加流畅；
动画对象生成模块，用以通过调用Babylon.js提供的BABYLON.Animation函数将展示在可视化界面中的动画配置项对应生成动画对象；
关键帧获取模块，用以通过定义三维场景请求的每秒帧数，把动画配置数据中的动画时长由秒数转换为帧数，获得动画关键帧；
模型渲染模块，用以通过Babylon.js提供的animationBox.setKeys函数把生成的动画关键帧添加到动画对象中，最后调用Babylon.js提供的scene.beginAnimation()函数驱动模型，使得DOM模型渲染在web3D场景中，复现S2的动作。
其中，所述的监听采集模块，进一步包括：
分支动画记录单元，用以将DOM模型在每一个触控操作周期内的动作轨迹记录为一个分支动画；
动画数据获取单元，用以监听模型在每一个触控操作周期内的动作的尺寸、旋转角、旋转方向、位置、透明度变化数据和周期时间，将其对应整合为每一个分支动画的动画配置数据；
动画数据聚合单元，用以将记录的所有分支动画的动画配置数据聚合为复合动画数组。
实施例三
基于硬件的角度，本实施例提供一种基于三维引擎实现自定义动画的装置，其结构如图2所示，包括处理器、存储器和总线，所述存储器存储有计算机程序，当所述计算机设备运行时，所述处理器与所述存储器之间通过总线通信，所述处理器执行所述计算机程序，以执行如上所述的一种基于三维引擎实现自定义动画的方法的步骤。
本实施例提供的一种基于三维引擎实现自定义动画的装置可以包括但不限于智能手机、平板电脑、笔记本电脑或台式电脑等。
具体地，上述存储器和处理器能够为通用的存储器和处理器，这里不做具体限定，当处理器运行存储器存储的计算机程序时，能够执行上述一种基于三维引擎实现自定义动画的方法的步骤。
本领域技术人员可以理解，图2中示出的装置结构并不构成对计算机设备的限定，可以包括比图示更多或更少的部件，或者组合某些部件，或者拆分某些部件，或者不同的部件布置。
在一些实施例中，该装置还可以包括触摸屏可用于显示图形用户界面（例如，应用程序的启动界面）和接收用户针对图形用户界面的操作（例如，针对应用程序的启动操作）。具体的触摸屏可包括显示面板和触控面板。其中显示面板可以采用LCD(Liquid CrystalDisplay，液晶显示器)、OLED(Organic Light-Emitting Diode,有机发光二极管)等形式来配置。触控面板可收集用户在其上或附近的接触或者非接触操作，并生成预先设定的操作指令，例如，用户使用手指、触笔等任何适合的物体或附件在触控面板上或在触控面板附近的操作。另外，触控面板可包括触摸检测装置和触摸控制器两个部分。其中，触摸检测装置检测用户的触摸方位、姿势，并检测触摸操作带来的信号，将信号传送给触摸控制器；触摸控制器从触摸检测装置上接收触摸信息，并将它转换成处理器能够处理的信息，再送给处理器，并能接收处理器发来的命令并加以执行。此外，可以采用电阻式、电容式、红外线以及表面声波等多种类型实现触控面板，也可以采用未来发展的任何技术实现触控面板。进一步的，触控面板可覆盖显示面板，用户可以根据显示面板显示的图形用户界面，在显示面板上覆盖的触控面板上或者附近进行操作，触控面板检测到在其上或附近的操作后，传送给处理器以确定用户输入，随后处理器响应于用户输入在显示面板上提供相应的视觉输出。另外，触控面板与显示面板可以作为两个独立的部件来实现也可以集成而来实现。
实施例四
本发明实施例还提供了一种计算机可读储存介质，所述计算机可读储存介质上存储有计算机程序，所述计算机程序被处理器执行时实现如上述的基于三维引擎实现自定义动画的方法的步骤。
可以理解的是，如果上述实施例中的方法以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本申请的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的全部或部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，执行本申请各个实施例所述方法的全部或部分步骤。而前述的存储介质包括：U盘、移动硬盘、只读存储器（Read-OnlyMemory，ROM）、随机存取存储器（RandomAccessMemory，RAM）、磁碟或者光盘等各种可以存储程序代码的介质。
本领域内的技术人员应明白，本申请的实施例可提供为方法、***、或计算机程序产品。因此，本申请可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。
在本申请所提供的实施例中，应该理解到，所揭露装置和方法，可以通过其它的方式实现。以上所描述的装置实施例仅仅是示意性的，例如，模块的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式，又例如，多个模块或组件可以结合或者可以集成到另一个***，或一些特征可以忽略，或不执行。另一点，所显示或讨论的相互之间的耦合或直接耦合或通信连接可以是通过一些通信接口，装置或模块的间接耦合或通信连接，可以是电性，机械或其它的形式。
作为分离部件说明的模块可以是或者也可以不是物理上分开的，作为模块显示的部件可以是或者也可以不是物理模块，即可以位于一个地方，或者也可以分布到多个网络模块上。可以根据实际的需要选择其中的部分或者全部模块来实现本实施例方案的目的。
另外，在本申请提供的实施例中的各功能模块可以集成在一个处理模块中，也可以是各个模块单独物理存在，也可以两个或两个以上模块集成在一个模块中。
本申请是参照根据本申请实施例的方法、设备（***）、和计算机程序产品的流程图和／或方框图来描述的。应理解可由计算机程序指令实现流程图和／或方框图中的每一流程和／或方框、以及流程图和／或方框图中的流程和／或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理设备的处理器以产生一个机器，使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和／或方框图一个方框或多个方框中指定的功能的装置。
这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理设备以特定方式工作的计算机可读存储器中，使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品，该指令装置实现在流程图一个流程或多个流程和／或方框图一个方框或多个方框中指定的功能。
这些计算机程序指令也可装载到计算机或其他可编程数据处理设备上，使得在计算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处理，从而在计算机或其他可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和／或方框图一个方框或多个方框中指定的功能的步骤。
最后应当说明的是：以上实施例仅用以说明本发明的技术方案而非对其限制，尽管参照上述实施例对本发明进行了详细的说明，所属领域的普通技术人员应当理解：依然可以对本发明的具体实施方式进行修改或者等同替换，而未脱离本发明精神和范围的任何修改或者等同替换，其均应涵盖在本发明的权利要求保护范围之内。

Claims (10)

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、监听模型在每一个触控操作周期内的动作的尺寸、旋转角、旋转方向、位置、透明度的变化数据和周期时间，将其对应整合为每一个分支动画的动画配置数据；
S23、点击“结束记录动画”按钮，停止对用户操作的监听，将记录的所有分支动画的动画配置数据聚合为复合动画数组。
6.如权利要求1所述的一种基于三维引擎实现自定义动画的方法，其特征在于，所述S3中：
用户通过展示在可视化界面中的动画配置项，对整体复合动画或每一个分支动画进行编辑修改或删除。
7.一种基于三维引擎实现自定义动画的***，其特征在于，包括：
模型创建模块，将DOM元素以模型的方式渲染到三维场景中；
监听采集模块，用以操控场景内的DOM模型并对其进行监听，将DOM模型在每一个触控操作周期内的动作轨迹记录为一个分支动画，将DOM模型在每一个触控操作周期内的尺寸、旋转角、旋转方向、位置、透明度的变化数据和周期时间对应整合为每一个分支动画的动画配置数据；监听结束后，将记录的所有分支动画的动化配置数据聚合为复合动画数组；
配置项生成模块，用以遍历所述复合动画数组，按照不同属性分类将所述复合动画数组分析解构为不同的动画配置项，并展示在可视化界面中；
动画对象生成模块，用以通过调用Babylon.js提供的BABYLON.Animation函数将展示在可视化界面中的动画配置项对应生成动画对象；
关键帧获取模块，用以通过定义三维场景请求的每秒帧数，把动画配置数据中的动画时长由秒数转换为帧数，获得动画关键帧；
模型渲染模块，用以通过Babylon.js提供的animationBox.setKeys函数把生成的动画关键帧添加到动画对象中，最后调用Babylon.js提供的scene.beginAnimation()函数驱动模型，使得DOM模型渲染在web3D场景中，复现S2的动作。
8.如权利要求7所述的一种基于三维引擎实现自定义动画的***，其特征在于，还包括：
缓动模块，用以对所述复合动画数组提供可配置的缓动函数，以控制动画执行的时间曲线，使得动画执行更加流畅。
9.一种基于三维引擎实现自定义动画的装置，其特征在于，包括：
存储器，用以存储计算机程序；
处理器，用以执行所述计算机程序时实现如权利要求1至6任意一项所述的基于三维引擎实现自定义动画的方法的步骤。
10.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质上存储有计算机程序，所述计算机程序被处理器执行时实现如权利要求1至6任意一项所述的基于三维引擎实现自定义动画的方法的步骤。
CN202310464431.2A 2023-04-27 2023-04-27 基于三维引擎实现自定义动画的方法、***、装置及介质 Active CN116188638B (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202310464431.2A CN116188638B (zh) 2023-04-27 2023-04-27 基于三维引擎实现自定义动画的方法、***、装置及介质

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202310464431.2A CN116188638B (zh) 2023-04-27 2023-04-27 基于三维引擎实现自定义动画的方法、***、装置及介质

Publications (2)

Publication Number Publication Date
CN116188638A true CN116188638A (zh) 2023-05-30
CN116188638B CN116188638B (zh) 2023-08-01

Family

ID=86452587

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202310464431.2A Active CN116188638B (zh) 2023-04-27 2023-04-27 基于三维引擎实现自定义动画的方法、***、装置及介质

Country Status (1)

Country Link
CN (1) CN116188638B (zh)

Citations (7)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN102866886A (zh) * 2012-09-04 2013-01-09 北京航空航天大学 一种基于Web的算法动画可视化开发***
JP2017176699A (ja) * 2016-03-31 2017-10-05 サン電子株式会社 管理システム
CN108733290A (zh) * 2018-05-21 2018-11-02 张宗良 绘画控制方法、装置及电子设备
CN111324334A (zh) * 2019-11-12 2020-06-23 天津大学 一种基于叙事油画作品开发虚拟现实体验***的设计方法
CN113901352A (zh) * 2021-10-21 2022-01-07 深圳壹账通智能科技有限公司 网页操作回放方法、装置、设备及存储介质
CN114581565A (zh) * 2022-02-17 2022-06-03 南方电网数字电网研究院有限公司 动画路径可视化编辑方法、装置、计算机设备、存储介质
CN115080886A (zh) * 2022-06-20 2022-09-20 睿囿信息技术(上海)有限公司 一种基于移动端的三维医学模型glb文件解析与展示方法

Patent Citations (7)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN102866886A (zh) * 2012-09-04 2013-01-09 北京航空航天大学 一种基于Web的算法动画可视化开发***
JP2017176699A (ja) * 2016-03-31 2017-10-05 サン電子株式会社 管理システム
CN108733290A (zh) * 2018-05-21 2018-11-02 张宗良 绘画控制方法、装置及电子设备
CN111324334A (zh) * 2019-11-12 2020-06-23 天津大学 一种基于叙事油画作品开发虚拟现实体验***的设计方法
CN113901352A (zh) * 2021-10-21 2022-01-07 深圳壹账通智能科技有限公司 网页操作回放方法、装置、设备及存储介质
CN114581565A (zh) * 2022-02-17 2022-06-03 南方电网数字电网研究院有限公司 动画路径可视化编辑方法、装置、计算机设备、存储介质
CN115080886A (zh) * 2022-06-20 2022-09-20 睿囿信息技术(上海)有限公司 一种基于移动端的三维医学模型glb文件解析与展示方法

Non-Patent Citations (2)

* Cited by examiner, † Cited by third party
Title
IKROM NISHANBAEV: "A web repository for geo-located 3D digital cultural heritage models", DIGITAL APPLICATIONS IN ARCHAEOLOGY AND CULTURAL HERITAGE, vol. 16, pages 1 - 9 *
何博 等: "基于WebGL的三维物理模型设计与开发", 中国教育信息化, pages 75 - 79 *

Also Published As

Publication number Publication date
CN116188638B (zh) 2023-08-01

Similar Documents

Publication Publication Date Title
Thoravi Kumaravel et al. TutoriVR: A video-based tutorial system for design applications in virtual reality
CN104216691B (zh) 一种创建应用的方法及装置
Chi et al. MixT: automatic generation of step-by-step mixed media tutorials
Mullen Mastering blender
CA2719138C (en) Lightweight three-dimensional display
US8823744B2 (en) Method for indicating annotations associated with a particular display view of a three-dimensional model independent of any display view
US20100194778A1 (en) Projecting data dimensions on a visualization data set
US8886669B2 (en) File access via conduit application
CN103425485A (zh) 面向普通用户应用的界面编辑、运行***及方法
US9159168B2 (en) Methods and systems for generating a dynamic multimodal and multidimensional presentation
US11783534B2 (en) 3D simulation of a 3D drawing in virtual reality
Peng et al. Autocomplete 3D sculpting
CN109636885B (zh) 一种用于h5页面的序列帧动画制作方法和***
Dörner et al. Content creation and authoring challenges for virtual environments: from user interfaces to autonomous virtual characters
KR101523328B1 (ko) 3차원 애니메이션 캐릭터에 대한 포즈 라이브러리 제공 방법, 이를 수행하는 포즈 라이브러리 제공 장치 및 이를 저장한 기록매체
CN116188638B (zh) 基于三维引擎实现自定义动画的方法、***、装置及介质
Rungta et al. ManyVis: Multiple applications in an integrated visualization environment
Moioli Introducing Blender 3.0
CN117093069A (zh) 一种混合应用的跨维度交互方法、装置及设备
Zacharia et al. Modelling Gesture Based Ubiquitous Applications
KR101420820B1 (ko) 처리 속도 개선을 위한 3차원 애니메이션 구현 방법, 이를 수행하는 3차원 애니메이션 구현 장치 및 이를 저장한 기록매체
CN114820115A (zh) 一种个性化商家活动页面生成方法、装置及计算机设备
BR112021023257B1 (pt) Sistema de construção de site da web e método para um sistema de construção de site da web

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination
GR01 Patent grant
GR01 Patent grant