Applying Animation in the FVS 3D Component

Application scenarios: If you have installed the FVS plugin, you can view this article to learn about functions related to FVS templates.

Note: Mobile devices are not supported.

Version

Scenario Introduction

This article mainly introduces how to add model animation and how to interact with other components and animations if the model has animation schemes when uploading custom models in FVS 3D components.

Implementation Idea

This article only demonstrates the application of model animation, and the effect is as follows:

1) Page 1 and Page 2 use the same model. The model has animation enabled on Page 1 but not on Page 2. By using the title component to switch pages, you can stop or play the animation.

2) The model used in page 3 contains two different animation effects. The title component is also used to link the 3D component animation, achieving the expansion and merging animation of the model.

Click to download the model file: SMT model.zip

Creating a Template

Create a FVS Report. You can customize the name, canvas size, etc. As is shown below:

Click 3D > Custom Model to add the component to the canvas, click Edit Component on the right, and enter the editing page. As is shown below:

Creating a Scene

When entering the custom model component editing page for the first time, you need to create an empty scene or import a scene.

Here we choose a style and click Generate Scene.

Adding a Model

After going to the scene editing page, the right configuration area displays the Model settings panel by default. Click Add Model > Upload New Model and upload the downloaded glb model file to the model library.

Multiple selection is not supported when uploading models, because the model needs to be preprocessed after uploading. In this example, keep the default settings.

Note: Different custom model components within the same template share the same model library. In this case, you can upload two model files separately and then select the model directly in the following steps.

After uploading the model, select SMT Single production line movement.glb and click Finish, and the selected model will appear.

As is shown below:

Setting up SMT Production Line Mobile Animation

Enabling Model Animation

In Model configuration panel, click Manage Animation, tick Turn on model animation, and then click Add Animation Scheme.

If the model has animation, you can choose the animation and set the way it is played.

The SMT Single production line movement.glb model has four types of animation schemes. Choose any one of the four types, select play animation at once, and tick turn on loop playback.

As is shown below:

Copying a Page and Closing a Model Animation

After setting up, click Return to editor in the upper left corner of the model boundary to return to the canvas, and adjust the size and perspective of the custom model components according to the actual situation.

Select Page 1, right-click and select Copy Page, then name the new page Page 2.

In Page 2, click Edit Component on the right, unselect Turn on model animation, choose a suitable perspective, and finally return to editor.

As is shown below:

Setting the Title Component to Switch Pages

On page 1, add a Title with the content Stop Playing. Add a click event by clicking Interaction > Add Click Event > Page Jump to jump to page 2 without animation.

After setting up, copy and paste the title component to page 2, then change the content to Keep playing, and change the content of the page jump event to jump to page 1.

As is shown below:

Setting up the Animation for Expanding and Merging the Mounter

Adding a Model Object

Click New Page at the bottom of the canvas, create a page named Page 3, and add a custom model component to page 3.

See section "Adding a Model" for the operation demonstration. Select the uploaded SMT mounter explode+reset.glb model file.

Starting Model Animation

Click Manage Animation, and tick Turn on model animation. There is no need to add animation scheme here, because the animation will be triggered through the title component.

Setting the Title Component to Link with the 3D Component Animation

After setting up, click Return to editor in the upper left corner of the model boundary to return to the canvas, and adjust the size and perspective of the custom model components according to the actual situation.

Add a title component on page 3, modify the content to Model Expansion, and click Interaction > Add Click Event > 3D Component Animation.

After selecting the 3D component, if the model used contains animation schemes, you can choose to trigger the animation. Choose Explosion animation here, and set Trigger as Right After Click.

As is shown below:

After setting up, copy another title component and change the trigger animation to Reset animation.

When previewing, clicking different titles will have different animation effects. As shown in section "Implementation Idea".

Click to download the sample template and data of this article: 

Model animation application example.zip