Method for processing and playing three-dimensional model animation
By configuring script files and animation players to play camera animations and model animations simultaneously, the problems of insufficient flexibility and poor user experience of the three-dimensional model animation system in the existing technology are solved, dynamic configuration and cost control are realized, and animation viewing effect is improved.
Patent Information
- Application Number
- CN202510538454.2
- Authority / Receiving Office
- CN · China
- Patent Type
- Applications(China)
- Current Assignee / Owner
- Filing Date
- 2025-04-27
- Publication Date
- 2025-08-08
AI Technical Summary
The existing three-dimensional model animation system lacks flexibility during playback, cannot dynamically configure animation content, and users find it difficult to grasp the key animation effects, resulting in poor viewing.
By using the model loader to parse the model file, configure the camera animation and model firmware animation parameters in the script file, and use the animation player to synchronize the corresponding camera animation and model firmware animation for each step of the model animation, including camera position, viewing angle, model component display and hiding, highlighting and flashing, etc.
It realizes dynamic configuration of animation content, improves playability and user experience, optimizes animation viewing effects, and reduces costs.
Smart Images
Figure CN120451345A_ABST
Abstract
Description
Technical Field
[0001] The present invention relates to the field of three-dimensional animation production, and in particular to a method for processing and playing three-dimensional model animation. Background Art
[0002] Systems that process and play 3D model animations on web pages are typically only able to continuously play built-in animations from gltf (GLTransmission Format) or glb (Graphics Transmission Format Binary) files, and cannot dynamically configure animation content, lacking flexibility. Furthermore, existing 3D model animation systems often struggle to capture key points during animation playback. For example, when disassembling a device, the components being removed in the previous animation step may obstruct the components being removed in the current step, forcing the user to manually control the camera. This results in the animation being played without the appropriate camera position and viewing angle, resulting in a poorly rendered animation.
[0003] The statements herein merely provide background information related to the present invention and do not necessarily constitute prior art. Summary of the Invention
[0004] The purpose of the present invention is to provide a method for processing and playing three-dimensional model animation, so as to realize dynamic configuration of animation content, thereby improving flexibility, controlling costs, optimizing animation viewing effects and improving user experience.
[0005] In order to achieve the above-mentioned purpose, a method for processing and playing three-dimensional model animation includes: using a model loader to parse and load a model file into memory, obtaining the model animation built into the model file, setting a script file, configuring camera animation and model firmware animation corresponding to each animation step of the model animation in the script file, performing data processing on the configuration parameters in the script file, and using an animation player to execute the script file, so that when the animation player plays the model animation, it also plays the camera animation and model firmware animation corresponding to each animation step of the model animation.
[0006] The camera animation includes: camera position and camera angle of view;
[0007] The model firmware animation includes: model components that need to be displayed, model components that need to be hidden, and model components that need to be highlighted and flashed.
[0008] The method for obtaining the model animation built into the model file includes: a model loader parses the model file to generate a model object, the model object includes an animation array, the animation array stores frame animation data, and the frame animation data at least includes: the name of the model animation, the model animation steps, and the time required to execute the model animation steps.
[0009] The configuration script file methods include:
[0010] The script file includes multiple arrays, each array corresponds to a model animation step, and the array is used to store configuration parameters;
[0011] The configuration parameters in each array include: model animation name, camera animation parameters, and model firmware animation parameters;
[0012] The camera animation parameters include: camera position parameters when playing the model animation steps, camera viewing angle parameters when playing the model animation steps, and the time required to play the camera animation;
[0013] The model firmware animation parameters include: display and hiding parameters, highlight flashing parameters, and the time required to play the model firmware animation;
[0014] The display and hiding parameters include: the name of the model component to be displayed before the model animation step is played, the name of the model component to be hidden before the model animation step is played, the name of the model component to be displayed after the model animation step is played, and the name of the model component to be hidden after the model animation step is played;
[0015] The highlight flashing parameters include: the names of the model components that need to be highlighted and flashed when playing the model animation steps.
[0016] The method for processing the configuration parameters in the script file comprises: parsing the configuration parameters in the script file into variables and storing them in a variable array;
[0017] Storing the camera animation parameters corresponding to each model animation step in a first variable array;
[0018] Storing display parameters and hidden parameters corresponding to each model animation step in a second variable array;
[0019] The highlight flashing parameters corresponding to each model animation step are stored in the third variable array;
[0020] The model file names that distinguish the executed animations are stored in the fourth variable array.
[0021] The method for the animation player to simultaneously play the camera animation and the model firmware animation corresponding to each animation step of the model animation when playing the model animation comprises:
[0022] The frame animation data is stored in a first global variable;
[0023] Create a global step index to record the model animation step currently being executed, and the initial value of the global step index is 0;
[0024] Traverse the first variable array storing the camera animation parameters, obtain the camera animation parameters equal to the global step index value and pass them into the function that executes the camera animation;
[0025] Traverse the third variable array storing the highlight flashing parameters, obtain the highlight flashing parameter equal to the global step index value and pass it into the function that executes the highlight flashing;
[0026] Traverse the second variable array storing display parameters and hidden parameters, obtain the display parameters and hidden parameters that are less than or equal to the global step index and pass them into the function that executes display and hiding;
[0027] Extract the frame animation data from the first global variable and pass it into the function that executes the frame animation;
[0028] Traverse the second variable array storing display parameters and hidden parameters, obtain the display parameters and hidden parameters that are greater than the global step index and pass them into the function that executes display and hiding;
[0029] Increase the global step index by one and proceed to the next animation step.
[0030] Create a second global variable, the value of which determines whether to play the configured camera animation simultaneously when playing each model animation step.
[0031] Use the tween animation in the animation player to play the model animation, camera animation, and model firmware animation, and execute the next step in the callback function of the previous step.
[0032] The present invention also provides a computer-readable storage medium having a computer program stored thereon, wherein when the computer program is executed by a processor, the method of processing and playing three-dimensional model animation is implemented.
[0033] The present invention also provides an electronic device comprising a processor and a memory, wherein the memory stores a computer program, and when the computer program is executed by the processor, the method of processing and playing three-dimensional model animation is implemented.
[0034] By configuring scripts, the present invention can control the camera position and viewing angle, the display and hiding of the model, and the highlight flashing of the model at each step of the animation playback when playing the model animation, thereby realizing dynamic configuration of the animation content, improving flexibility and controlling costs. It also allows the selection of viewing angle follower and free viewing angle modes, optimizing the animation viewing effect and improving the user experience. BRIEF DESCRIPTION OF THE DRAWINGS
[0035] Figure 1 The present invention provides a flowchart of a method for processing and playing three-dimensional model animation.
[0036] Figure 2 This is a flowchart of a method for processing and playing three-dimensional model animation provided in one embodiment of the present invention. DETAILED DESCRIPTION
[0037] The following is based on Figures 1 and 2 , specifically describe the preferred embodiments of the present invention.
[0038] like Figure 1 As shown, the present invention provides a method for processing and playing a three-dimensional model animation, comprising:
[0039] Use the model loader to parse and load the model file into the memory, obtain the model animation built into the model file, set a script file, configure the camera animation and model firmware animation corresponding to each animation step of the model animation in the script file, perform data processing on the configuration parameters in the script file, and use the animation player to execute the script file. When the animation player plays the model animation, it also plays the camera animation and model firmware animation corresponding to each animation step of the model animation.
[0040] The camera animation includes: camera position and camera viewing angle; the model firmware animation includes: model components that need to be displayed, model components that need to be hidden, and model components that need to be highlighted and flashed.
[0041] In one embodiment of the present invention, Figure 2 As shown, a method for processing and playing a three-dimensional model animation is provided, comprising the following steps:
[0042] Step S1: Load a model file (the model file is a GLB format file or a GLTF format file) through the model loader GLTFLoader, parse and generate a model object Object, the model object Object contains an animation array animation, and the animation array stores frame animation data. The frame animation data at least includes: the name of the model animation, the model animation steps, and the time required to execute the model animation steps. The frame animation data is stored in a first global variable;
[0043] Create a global step index index, which is used to record the model animation step currently being executed. The initial value of the global step index index is 0;
[0044] Step S2: Create a script file (in json format), which contains multiple arrays, each array corresponds to a model animation step, and the array is used to store configuration parameters;
[0045] The configuration parameters in each array include: model animation name, camera animation parameters, and model firmware animation parameters;
[0046] The model animation name is used to distinguish the parameters of the animation of which model file is to be executed. If there are multiple model files that play animations together, for example, the first step plays the first animation of the a.glb file, and the second step plays the first animation of the b.glb file, the model animation name needs to be used to distinguish them;
[0047] The camera animation parameters include: the camera position parameter position when playing the model animation step, the camera angle parameter lookAt when playing the model animation step, and the time required to play the camera animation;
[0048] The model firmware animation parameters include: display and hiding parameters, highlight flashing parameters, and the time required to play the model firmware animation;
[0049] The display and hiding parameters include: the name of the model component to be displayed before the model animation step is played, the name of the model component to be hidden before the model animation step is played, the name of the model component to be displayed after the model animation step is played, and the name of the model component to be hidden after the model animation step is played;
[0050] The highlight flashing parameters include: the name of the model component that needs to be highlighted and flashed when playing the model animation step;
[0051] Step S3: Process the configuration parameters in the script file, parse the configuration parameters into variables, and store them in a variable array;
[0052] Storing the camera animation parameters corresponding to each model animation step in a first variable array;
[0053] Storing display parameters and hidden parameters corresponding to each model animation step in a second variable array;
[0054] The highlight flashing parameters corresponding to each model animation step are stored in the third variable array;
[0055] The model file name that distinguishes the executed animation is stored in the fourth variable array;
[0056] A second global variable is created. The second global variable is used to determine whether to play the configured camera animation simultaneously when playing each model animation step. In this embodiment, the user can modify the value of the second global variable on the web page. When the value of the second global variable is true, the camera animation is played simultaneously with the model animation. When the value of the second global variable is false, the camera animation is not played when playing the model animation.
[0057] On the web page, you can choose between two modes: view follow and free time. View follow means that the camera will follow the configured camera data when playing each step of the animation according to the configured animation script. Free view means that the user can control the view by himself and the camera will not move according to the configured animation data.
[0058] Step S4: using an animation player to execute the script file, and when the animation player plays the model animation, it also plays the camera animation and the model firmware animation corresponding to each animation step of the model animation;
[0059] In this embodiment, the camera animation and the model firmware animation are played using the tween animation in the animation player;
[0060] Step S4.1, call the function playAnimation() to execute the entire animation process;
[0061] Step S4.2: Determine whether the value of the global step index index is greater than the total number of steps in the model animation. If so, end the playback and set the value of the global step index index to 0. If not, proceed to step S4.3.
[0062] Step S5.3: Determine whether to play the camera animation based on the value of the second global variable. If yes, proceed to step S4.4; if not, proceed to step S4.5.
[0063] On a web page, you can choose whether to play the camera animation configured by the script when playing a model animation. If you play the camera animation while playing a model animation, the camera on the web page will be locked and the user cannot control it. Therefore, you can choose not to play the camera animation. Then, the user can freely operate the camera while playing the model animation.
[0064] Step S4.4: Call the executeCameraTo() function to play the camera animation corresponding to the current model animation step.
[0065] Traverse the first variable array storing the camera animation parameters and compare them with the global step index index. When the subscript of the camera animation parameter is equal to the global step index index, get the corresponding camera animation parameters position and lookAt, and pass the camera animation parameters to the executeCameraTo(): function that executes the camera animation.
[0066] Because camera animation has a time parameter, for example, it takes 1 second to execute camera animation, and the animation player that executes camera animation has the first callback parameter onComplete, subsequent operations need to be written in the first callback parameter onComplete;
[0067] Step S4.5, call the executeHighLightTo() function to execute the model components that need to be highlighted and flashed in the current model animation step;
[0068] In the first callback parameter onComplete of step S4.4, the third variable array storing the highlight blinking parameters is traversed. During the traversal, the subscript of the highlight blinking parameter is compared with the global step index index. When the subscript of the highlight blinking parameter is equal to the global step index index, the highlight blinking parameter is obtained, and the model component in the highlight blinking parameter is retrieved to perform stroke highlight blinking.
[0069] Because the highlight flashing animation player takes time to execute, this time parameter will also be configured in the script parameters. There will also be a second callback parameter onComplete when executing the highlight flashing animation player.
[0070] Step S4.6: Call the transparency function executeBeforeOpacityTargets() to execute the model components that need to be displayed and hidden before the current model animation step;
[0071] In the above-mentioned second callback parameter onComplete, the second variable array storing the display parameters and the hidden parameters is traversed. Before executing the entire method, this method must be synchronized to avoid asynchronous operations. Because if the animation is jumped, it may cause omission of components that need to be displayed or hidden. Therefore, when traversing the second variable array, the subscript of the display parameter and the subscript of the hidden parameter are compared with the global step index index. When the subscript of the display parameter and the subscript of the hidden parameter are less than or equal to the global step index index, the specific parameters of whether to hide or display are obtained and passed to the method for executing transparency to execute display or hiding. Because the method for executing transparency also uses the animation player for execution, it also requires a time parameter. Therefore, after execution, there is also a third callback parameter onComplete. In this third callback parameter, the frame animation recorded in the model file is executed;
[0072] Step S4.7, call the executeClipTo() function of playing the model animation to execute the frame animation of the current model animation step;
[0073] In the above-mentioned third callback parameter onComplete, the process of the frame animation to be executed needs to be written, and the frame animation data is extracted from the first global variable. The parameters required when executing the frame animation include the name of the model animation. For example, if you want to execute the animation of the turbine model file file1.glb, usually the overall animation name of this model file will also be parsed as file1.glb, so the first parameter is file1.glb. The second parameter is the step of the animation to be executed, and the global step index index is used. For example, if you want to execute the first step, the global step index index is 0, and so on. The third parameter is the time required to execute the current animation. For example, the current animation step is a total of 2s, and the passed parameter is 0.5, then you can use the animation player AnimationMixer object .time / 0.5, then the animation playback time will be 4s. The fourth parameter is the callback parameter. The animation player will provide an event finished, which will be triggered after the current animation step is executed. Listen for this event and call the fourth callback parameter onComplete passed in this event.
[0074] Step S4.8: Call the transparency function executeAfterOpacityTargets() to execute the model components that need to be displayed and hidden after the current model animation step;
[0075] In the fourth callback parameter onComplete mentioned above, the second variable array storing the display parameters and hidden parameters is traversed. When traversing, the subscripts of the display parameters and the hidden parameters are compared with the global step index index. When the subscripts of the display parameters and the hidden parameters are greater than the global step index index, the parameters to be hidden or displayed and the time required to execute the current animation are taken out from the second variable array, and the transparency animation is executed. Synchronous processing is also required at this time, because executing the animation requires process time to prevent asynchrony.
[0076] Step S4.9: Increase the value of the global step index by one, and return to step S5.1.
[0077] Because the animation player's tween animation is used to execute the animation, there is a fifth callback parameter. In the fifth callback parameter, the global animation step index is increased by one, and then the animation function that was executed at the beginning is called to complete the closed loop.
[0078] By configuring scripts, the present invention can control the camera position and viewing angle, model display and hiding, and model highlight flashing at each step of the animation playback when playing the model animation, thereby realizing dynamic configuration of the animation content, improving flexibility and controlling costs. In addition, the present invention can also select two modes: viewing angle follow and free time, thereby optimizing the animation viewing effect and improving the user experience.
[0079] It should be noted that, in the embodiments of the present invention, the terms "center", "longitudinal", "lateral", "length", "width", "thickness", "up", "down", "front", "back", "left", "right", "vertical", "horizontal", "top", "bottom", "inside", "outside", "clockwise", "counterclockwise", "axial", "radial", "circumferential", etc., indicating the orientation or positional relationship, are based on the orientation or positional relationship shown in the accompanying drawings, and are only for the convenience of describing the embodiments, and do not indicate or imply that the device or element referred to must have a specific orientation, be constructed and operate in a specific orientation, and therefore should not be understood as limiting the present invention. In addition, the terms "first", "second", and "third" are used for descriptive purposes only and should not be understood as indicating or implying relative importance.
[0080] In the present invention, unless otherwise expressly specified or limited, the terms "mounted," "connected," "connect," "fixed," etc. should be understood broadly. For example, they may refer to fixed connection, detachable connection, or integration; mechanical connection or electrical connection; direct connection or indirect connection through an intermediate medium; internal communication between two components or interaction between two components. Those skilled in the art will understand the specific meanings of the above terms in the present invention based on specific circumstances.
[0081] It will be understood that when used in this specification and the appended claims, the term "comprising" indicates the presence of described features, integers, steps, operations, elements and / or components, but does not preclude the presence or addition of one or more other features, integers, steps, operations, elements, components and / or groups thereof.
[0082] It should also be understood that the terms used in this specification are for the purpose of describing specific embodiments only and are not intended to limit the present application. As used in this specification and the appended claims, the singular forms "a," "an," and "the" are intended to include the plural forms unless the context clearly indicates otherwise.
[0083] It should be further understood that the term "and / or" used in this specification and the appended claims refers to and includes any and all possible combinations of one or more of the associated listed items.
[0084] As used in this specification and the appended claims, the term "if" can be interpreted as "when" or "upon" or "in response to determining" or "in response to detecting," depending on the context. Similarly, the phrase "if it is determined" or "if [described condition or event] is detected" can be interpreted as meaning "upon determination" or "in response to determining" or "upon detection of [described condition or event]" or "in response to detecting [described condition or event]," depending on the context.
[0085] Although the present invention has been described in detail through the above preferred embodiments, it should be appreciated that the above description should not be considered as limiting the present invention. Obviously, the described embodiments are only a portion of the embodiments of the present invention, rather than all of them. Based on the embodiments of the present invention, all other embodiments obtained by those of ordinary skill in the art without creative work are within the scope of protection of the present invention. After reading the above, various modifications and substitutions of the present invention will be apparent to those skilled in the art. Therefore, the scope of protection of the present invention should be defined by the appended claims.
Claims
1. A method for processing and playing a three-dimensional model animation, characterized in that: The method includes: using a model loader to parse and load a model file into memory, obtaining a model animation built into the model file, setting a script file, configuring a camera animation and a model firmware animation corresponding to each animation step of the model animation in the script file, performing data processing on the configuration parameters in the script file, and using an animation player to execute the script file. When the animation player plays the model animation, it also plays the camera animation and the model firmware animation corresponding to each animation step of the model animation.
2. The method for processing and playing a three-dimensional model animation according to claim 1, wherein: The camera animation includes: camera position and camera angle of view; The model firmware animation includes: model components that need to be displayed, model components that need to be hidden, and model components that need to be highlighted and flashed.
3. The method for processing and playing a three-dimensional model animation according to claim 1, wherein: The method for obtaining the model animation built into the model file includes: a model loader parses the model file to generate a model object, the model object includes an animation array, the animation array stores frame animation data, and the frame animation data at least includes: the name of the model animation, the model animation steps, and the time required to execute the model animation steps.
4. The method for processing and playing a three-dimensional model animation according to claim 1, wherein: The configuration script file methods include: The script file includes multiple arrays, each array corresponds to a model animation step, and the array is used to store configuration parameters; The configuration parameters in each array include: model animation name, camera animation parameters, and model firmware animation parameters; The camera animation parameters include: camera position parameters when playing the model animation steps, camera viewing angle parameters when playing the model animation steps, and the time required to play the camera animation; The model firmware animation parameters include: display and hiding parameters, highlight flashing parameters, and the time required to play the model firmware animation; The display and hiding parameters include: the name of the model component to be displayed before the model animation step is played, the name of the model component to be hidden before the model animation step is played, the name of the model component to be displayed after the model animation step is played, and the name of the model component to be hidden after the model animation step is played; The highlight flashing parameters include: the names of the model components that need to be highlighted and flashed when playing the model animation steps.
5. The method for processing and playing three-dimensional model animation according to claim 1, wherein: The method for processing the configuration parameters in the script file comprises: parsing the configuration parameters in the script file into variables and storing them in a variable array; Storing the camera animation parameters corresponding to each model animation step in a first variable array; Storing display parameters and hidden parameters corresponding to each model animation step in a second variable array; The highlight flashing parameters corresponding to each model animation step are stored in the third variable array; The model file names that distinguish the executed animations are stored in the fourth variable array.
6. The method for processing and playing three-dimensional model animation according to claim 1, wherein: The method for the animation player to simultaneously play the camera animation and the model firmware animation corresponding to each animation step of the model animation when playing the model animation comprises: The frame animation data is stored in a first global variable; Create a global step index to record the model animation step currently being executed, and the initial value of the global step index is 0; Traverse the first variable array storing the camera animation parameters, obtain the camera animation parameters equal to the global step index value and pass them into the function that executes the camera animation; Traverse the third variable array storing the highlight flashing parameters, obtain the highlight flashing parameter equal to the global step index value and pass it into the function that executes the highlight flashing; Traverse the second variable array storing display parameters and hidden parameters, obtain the display parameters and hidden parameters that are less than or equal to the global step index and pass them into the function that executes display and hiding; Extract the frame animation data from the first global variable and pass it into the function that executes the frame animation; Traverse the second variable array storing display parameters and hidden parameters, obtain the display parameters and hidden parameters that are greater than the global step index and pass them into the function that executes display and hiding; Increase the global step index by one and proceed to the next animation step.
7. The method for processing and playing a three-dimensional model animation according to claim 1, wherein: Contains a second global variable, the value of which determines whether the configured camera animation is played simultaneously when playing each model animation step.
8. The method for processing and playing three-dimensional model animation according to claim 1, wherein: Use the tween animation in the animation player to play the model animation, camera animation, and model firmware animation, and execute the next step in the callback function of the previous step.
9. A computer-readable storage medium having a computer program stored thereon, characterized in that: When the computer program is executed by a processor, the method for processing and playing three-dimensional model animation according to any one of claims 1 to 8 is implemented.
10. An electronic device, characterized in that: The invention comprises a processor and a memory, wherein a computer program is stored in the memory, and when the computer program is executed by the processor, the method for processing and playing three-dimensional model animation according to any one of claims 1 to 8 is implemented.