Roaming Animation in 3D Scenes

Application scenario: If you have installed the FineVis Data Visualization plugin, you can learn functions related to the FVS template in this document.

Version

Application Scenario

In a 3D scene, you can form a roaming path by adding multiple viewing angles. Then, the roaming animation effect of the 3D scene can be achieved through the click events.

Adding Roaming Animation

1. Enter the 3D component editing page, and click Add Roaming Animation under Scene > Camera > Roaming Animation to enter the roaming animation setting panel.

2. After adjusting the viewing angle of the 3D scene, click Add Current Viewing Angle to add the current viewing angle to the list in the box. Then adjust the next viewing angle, and click Add Current Viewing Angle. Repeat the addingprocess to form a path.

The following table describes the setting items of the roaming path.

Note:

You cannot undo the operations such as viewing angle modification and deletion. Perform such operations with caution.

3. After setting a roaming path, click OK to return to the configuration panel under Scene > Camera. In the roaming path list, you can edit, preview, and delete roaming paths.

• Preview allows you to view the roaming animation effect on the current 3D scene editing page.

• During the preview, you can click Exit Preview or press the shortcut key Esc to stop the animation playback. You can press the spacebar to pause/resume the animation playback.

• If you exit the preview or end the roaming animation midway, the scene will stay in the current viewing angle.

Note:

In V2.0.0 and later versions, if you click anywhere on the designer page other than the Exit Preview button during preview, a prompt saying "Exit the roaming animation preview before performing other operations." will be displayed, as shown in the following figure.

Setting Roaming Amination Playback

Roaming Animation Event Playback

The 3D Roaming Animation click event is added in the component interaction attribute. You can set click-to-play roaming animation effects for all components that support click events.

Function setting items are as follows.

• Action Name: Name an action.

• Animation Source: Set the animation object source. You can select 3D components on the current page. The component applied by the background page is regarded as a content page component, and is only effective for the current content page.

• Animation Object: Select the 3D component object. You can select multiple animation objects and adjust their orders.

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

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

Example:

JavaScript Event

The roaming animation playback event can only be triggered by clicking. 

The code is as follows for the template with only one page.

setTimeout(() => {
  duchamp.getWidgetByName("Warehouse Park").playRoamAnimations({
   names:["Roaming Path 1"],
   playMode: "once"
})
}, 3000)

The code is as follows for the template with multiple pages.

duchamp.on("storychange", (current) => {
 if (current === "Page 2") {
  setTimeout(() => {
   duchamp.getWidgetByName("Warehouse Park").playRoamAnimations({
    names: ["Roaming Path 1"],
    playMode: "loop"    })
  }, 3000);
 }
});

Example:

Setting Animation Pause/Resumption/Exit

Roaming animation pause/resumption/exit during the template preview cannot be realized through shortcut keys. 

The code is as follows for playback pause.

duchamp.getWidgetByName("Warehouse Park").updateRoamAnimationAction("pause");

The code is as follows for playback resumption.

duchamp.getWidgetByName("Warehouse Park").updateRoamAnimationAction("continue");

The code is as follows for playback exit.

duchamp.getWidgetByName("Warehouse Park").updateRoamAnimationAction("exit");

Example:

Notes

1. During the template preview, if the focus or refresh interface in a 3D component with a roaming animation being played currently is also invoked in other components, the roaming animation playback will be terminated.
2. During the template preview, if the 3D component with a roaming animation being played is set with a monitoring refresh, the roaming animation playback will be terminated when you refresh the component.

For details, you can download the template 3D Scene Roaming Example.fvs.