Model Animation in 3D Scenes

This document is applicable to users who have installed the FineVis Data Visualization plugin to learn plugin functions.

Version

Application Scenario

In the 3D custom scene, you can add model animations to a 3D scene whose model is set with an animation solution or a wireframe animation. The following figure shows the effect.

Linkage effects can be displayed when you link the model animation with other components. For details, see Applying Animation in the FVS 3D Component. This document only introduces how to set the model animation.

If an animation solution exists in a model, you can add animations in the following three ways.

• Custom model component editing page: Choose Model > Manage Model Animation.

• Components including the title component: Choose Interaction > Add Event, click Click, and select 3D Model Animation to add a 3D model animation event.

• Components including the title component: Choose Interaction > Add Event, click Click, and select JavaScript to add a JavaScript event.

Note:

If the animation object involved in the animation solution is deleted due to the deletion of the GLB file/imported model, the corresponding animation solution will not be deleted. You will be prompted that no animation is found in Animation Object.

Model Animation Management

1. On the Model configuration panel, click Manage Model Animation, and then click Add Animation Solution.

Note:

1. In versions earlier than V2.10.0, you need to first select Enable Model Animation, and then add an animation solution. 

2. When no animation objects exist in the 3D scene, the button for adding an animation solution will be grayed out. When you hover the cursor over the button, a prompt will pop up indicating that no animation objects are currently available for configuration.

2. Animation Solution setting items are as follows.

• Solution Name: You can customize the animation solution name. The default value is null value. Null value and duplicate names are not supported.

• Animation Object: You can select model animations and wireframe animations in the current 3D   component. Multiple objects can be selected.

• Playback Command: You can only select Start Playback from the drop-down list of PlayBack Command.

• Command Time: You can select Play at Once or Delay Animation. You can customize the delay time, whose default value is 1000 ms later.

• Playback Method: You can select Single Playback (default value) or Loop Playback.

Note:

Solution Name and Playback Command are newly added in V2.10.0.

3. You can edit, delete, and enable/disable the set animation solution on the Manage Model Animation tab page.

3D Model Animation Event

You can set 3D model animation events for all components that support click events.

After the component is selected, choose Interaction > Add Event, click Click, and select 3D Model Animation.

Execution setting items are as follows.

• Solution Name:  Customize the animation solution name. The default value is empty.

• Animation Object: You can select model animations and wireframe animations in the current 3D    component. Multiple objects can be selected.

• Playback Command: You can select Start Playback, Pause Playback, or Exit Playback.

• Command Time: You can select Play at Once or Delay Animation. You can customize the delay time, whose default value is 1000 ms later.

• Playback Method: You can select Single Playback (default value) or Loop Playback.

Note:

1. Solution Name and Playback Command are newly added in V2.10.0.

2. Command Time and Playback Method are only available when Start Playback is selected in Playback Command.

3. Multiple animation effects are not allowed in a 3D model animation. That is to say, different playback commands, command times, and playback methods must be respectively defined based on different animation objects.

JavaScript Event

You can set JavaScript events for all components that support click events.

After the component is selected, choose Interaction > Add Event, click Click, and select JavaScript, as shown in the following figure.

The JS code is as follows.

const animation = duchamp.getWidgetByName("Component Name").getMeshByName("Model Name").getAnimationByName("Animation Name")

Start Playback, Pause Playback, and Exit Playback are supported.

The code is as follows for playback start.

animation.play(
// Whether to restart playback
isRestart:false,
// Whether to loop playback
isLoop:false,
// Whether to restore to the start status after playback endsisInitialOnPlaystop:false,
// Playback end callback function
onAnimationPlayStop:()=>{}
})

The code is as follows for playback pause.

animation.pause()

The code is as follows for playback exit.

animation.stop(true)

Note:

When the value is true, the animation will exit and the scene will be restored to the state before the animation playback. When the value is false, the animation will exit and the scene will remain at the current animation frame.