FVS Click Event for Switching the Custom 3D Viewing Angle

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

Version

Application Scenario

In FineReport with the FineVis Data Visualization plugin V2.2.0, Camera Viewing Angle was added, allowing you to bind viewing angles to models and switch custom viewing angles by clicking the specified models.

In FineReport with the FineVis Data Visualization plugin V2.3.1, the Custom 3D Viewing Angle click event was added.

With this click event, you can switch custom 3D viewing angles by clicking other components without using complicated JS codes, as shown in the following figure.

Function Description

You can add Custom 3D Viewing Angle click events to all 2D components that support click events. The function setting items include:

• Action Name: You can set the action name.

• Trigger Target: You can select the 3D component. To distinguish the components on pages from those on the 3D background pages, the component names will be prefixed with the corresponding page name by default for your selection.

• Viewing Angle Source: You can select Public Viewing Angle or Custom Import.

Public Viewing Angle specifies the viewing angles of the camera added in the 3D component, as shown in the following figure.

Custom Import allows you to copy the viewing angles in the 3D scene and paste them here or modify the coordinates manually, as shown in the following figure.

Template Creation

Choose File > New FineVis Visualization Dashboard in the upper left of the designer, and create a blank dashboard. You can customize the dashboard name and canvas size, as shown in the following figure.

Custom Model Component Setting

Adding the Component and Creating the Scene

Add a Custom 3D Scene component to the canvas, click Edit Component, and generate a blank scene, as shown in the following figure.

Uploading and Adding the Model

1. Download and unzip the GLB file: Overall Park Model.zip.

2. Choose Model > Add Model Object on the 3D scene editing page and click Upload Model on the popup Model Management page.

Select the required model, click Load into Scene to add the model to the scene, and close the Model Management page after successful loading, as shown in the following figure.

Setting the Scale Ratio for the Model

Select the Overall Park Model model and modify the scale as needed, as shown in the following figure. (The model scale is relatively small after the model is added to the scene.)

Setting the Public Viewing Angle of the Camera 

To add the public viewing angle of the camera, choose Scene > Camera, and click Add Current Viewing Angle, finish the view angle setting, and click OK, as shown in the following figure.

In this example, you need to add three viewing angles of the camera.

• Overall Viewing Angle

• Viewing Angle of Main Building: Bind the Main Building model to the viewing angle, which allows you to      click the model to switch to this viewing angle during the preview.

• Viewing Angle of Warehouse: Bind the Warehouse model to the viewing angle, which allows you to click the model to switch to this viewing angle during the preview.

Adding the Custom 3D Viewing Angle Click Event

1. Click Back to Visualization Dashboard in the upper left corner of the scene editing page to return to the canvas, add a Title component, and set the title to Overall Viewing Angle.

2. Add a click event to the title component: Choose Interaction > Interaction Event > Add Event, select Click, select Custom 3D Viewing Angle, and select the specified 3D component and corresponding viewing angle.

3. To add the Custom 3D Viewing Angle click events for Viewing Angle of Main Building and Viewing Angle of Warehouse, you can copy and paste the configured title component, and modify Viewing Angle Source respectively as needed in the events.

Effect Display

Click Save and Preview in the upper right of the template. The section "Expected Effect" shows the preview effect.

Note:

The effect cannot be previewed on mobile terminals.

For details, you can download the template: FVS Click Event for Switching the Custom 3D Viewing Angle.fvs.