FVS Custom 3D Scene Component

This document is applicable to users who have installed the FineVis Data Visualization plugin to learn operations related to FVS dashboard.

Version

Application Scenarios

The Custom 3D Scene component allows you to generate empty scenes, upload GLB model files, and construct 3D custom scenes through data layers and events.

For details, see Creating a 3D Park Monitoring Scene. The effect is shown in the following figure.

Note:

The function is not supported on mobile terminals.

Procedure

This document introduces the operations related to FVS custom 3D components, such as scene configuration, model import, and angle change.

The following table shows the recommended operating steps for creating a 3D custom scene.

Model resources are provided for use, and you can click to download the ZIP file and unzip it: Smart Park Demo.zip

Choose File > New FineVis Visualization Dashboard in the upper left corner of the designer, click Create a Blank Dashboard, and click Create Dashboard.

Choose 3D > Custom 3D Scene in the component area, and you can add a 3D component to the canvas. Click Edit Component to open the Custom 3D Scene editing page.

Creating a Scene

You need to create a scene at the first editing of the custom scene component. Supported creation methods include Generate Empty Scene and Import Existing Scene.

Generating Empty Scene

Two scene styles are provided in Generate Empty Scene, including Live Action Style (default) and Tech Style.

Importing Existing Scene

You can export the custom 3D scene for use. For details, see section "Importing the Scene." You can select Import Existing Scene to import the exported custom 3D scene file.

Exporting the Scene

You can export the current scene on the scene editing page.

Click Export Scene, and an FCUST file is generated, including scene style, scene configuration, and model configuration.

The exported file is shown in the Importing Existing Scene section, which can be imported into other custom 3D scene components for use.

Setting Scene Attribute

You can set scene attributes after adding a scene.

Settings		Explanation
Overall Style		Two kinds of supported styles: Live Action Style and Tech Style The change of overall style will override all previously configured style settings.
Environment	Scene Time	You can quickly set satisfying lighting and sky effects through the time system, which is used to present dynamic transitions in the scene based on time. For details, see Scene Time of FVS Custom 3D Component.
	Sky Background	Sky Background is enabled by default, with the default background as Dynamic, synchronized with the scene time. If you set the background to Static, two color styles are supported, including Sky Box and Color. Sky Box: supports Built-in Asset or Custom Upload (supporting JPG, JPEG, and PNG image formats). Color: allows you to set the background color to Monochromatic or Gradient. Note: If you adjust the scene time, the sky background is automatically restored to the default Dynamic.
	Environmental Light	Environmental Light is enabled by default, in which case you can set the strength ranging from 0 to 100. Note: If you adjust the scene time, the environmental light is restored to its corresponding default value based on the time setting.
	Light Source	You can set the light source and projection effect for the scene, with the Default Parallel Light option. For details, see Light Source and Projection of FVS Custom 3D Component. Note: If you adjust the scene time, the Default Parallel Light setting, following the time changes, is automatically restored to its corresponding default value based on the time.
	Ground	You can determine whether to tick Enable Ground Style. After ticking it, you can set style, background, and effect of the ground. For details, see Ground Effect of FVS Custom 3D Component.
	Environment Texture	Environment Texture is mainly used in models with metallic materials, such as the model Material Sphere.zip You can determine whether to tick Enable Environment Texture. After ticking it, you can set Environment Texture and Strength. Environment Texture: supports Built-in Asset or Custom Upload (supporting the HDR texture format only). Strength: allows you to set the environment texture strength, ranging from 0 to 2.
	Fog	You can determine whether to tick Enable Fog. After ticking it, you can set Fog Color, Near Fog Distance, and Far Fog Distance. Near Fog Distance: distance between the near fog and the lens Far Fog Distance: distance between the far fog and the lens
	Particle	You can determine whether to tick Enable Particle Effect. After it is ticked, a snowflake-like effect of flying particles appears in the sky.
	Shock Wave	To highlight a certain area, you can add shock waves and set the area as the center of the shock waves. You can: Add, modify, delete, and hide the shock wave. Set attributes such as Name, Position, Radiation Size, Color, and Speed of the shock wave. Add 10 shock waves at most.
	Soaring Lines	You can determine whether to tick Enable Soaring Lines. After it is ticked, continuous light pillars keep rising from the ground to the sky.
	Viewing Angle	You can set basic properties of the viewing angle of a scene including Scale Setting and Vertical Angle. You can enable Field Depth and Viewing Angle Change and add the Camera Viewing Angle.
	Roaming Path	You can add a roaming path and set its animation.
Image	Anti-aliasing	To improve the quality of 3D graphics, you can enable MSAA and FXAA in Anti-aliasing simultaneously. 1. MSAA: Multisample Anti-Aliasing. That is to say, anti-aliasing is performed only on the edges of polygons. 2. FXAA: Fast Approximate Anti-Aliasing, a high-performance approximation of traditional MSAA, applicable to lower-performance computer configurations.
	Bloom	If Enable Bloom is ticked, light streaks appear, extending outward from the boundaries of bright areas in the image. You can set Intensity, Threshold, and Blur.
	Glow	If Enable Glow is ticked, models with glowing materials glow through a blurred overlay. You can set Intensity and Radius. Note: Glow also takes effect for wireframes and etching.
	Saturation	You can set the overall color purity of the scene. As the saturation increases, the colors appear to be purer. As the saturation decreases, the colors appear to be more washed-out or pale. You can set the saturation, ranging from -100 to 100, with the default value as zero.
	Brightness	You can set the overall brightness of the scene, ranging from -100 to 100, with the default value as zero.
	Contrast	You can set the contrast of light and dark in the scene, ranging from -100 to 100, with the default value as zero.

Adding a Model

If no model exists in the model list, you can click + Add Model or Add Model to open the Model Management page.

Model Management

After uploading models on the Model Management page, you can manage models, such as deleting models, loading scenes, viewing model details, and performing model preprocessing.

Uploading Models

You need to generate custom GLB models files through a modeling software.

Click Upload Model, and select a local custom model file in the GLB format to upload. Batch upload is also supported.

Note:

Spaces and the following characters cannot be contained in the GLB file name: ? ! @ # $ ^ & % * + , : ; = ' \ " ` < > () [] {} / |

If the uploaded model contains over 3000 meshes, a prompt box pops up, indicating that it may cause lagging and simplifying the model before uploading is recommended. You can click Effect of Custom Model Mesh Number to view details and solutions to mesh number optimization.

Model Preprocessing

If you upload a model for the first time, the Preprocess Model setting box pops up. You can perform Data Preprocessing and Style Preprocessing for the model.

If you upload multiple models, the Preprocess Model setting box pops up for each model individually. Simply set the preprocessing options for each model one by one.

Data Preprocessing

You can adjust the maximum display hierarchy level for models. Models that exceed the display level limit are not shown in the model list and do not trigger other interactive effects.

Note:

Perform operations carefully because the data preprocessing settings cannot be undone and re-modified.

For example, assume that a model represents a class, which is further divided into two groups, and each group consists of 6 individual students.

Level 0 represents the model as a single entity, where the class cannot be divided. Level 1 represents clickable groups. And so on, following the same logic.

Style Preprocessing

You can determine whether to tick Turn on Wireframe Style. After ticking it, you can select Default or Custom. Style preprocessing can be modified multiple times, which can be skipped during the initial model upload.

For details, see FVS Custom 3D Wireframe Style.

After the model is uploaded, if you hover the cursor over the model thumbnail, the Preprocess Model button appears. Click the button, and the setting box pops up. You can make modifications in Style Preprocessing, while Data Preprocessing is gray and cannot be modified.

Loading the Model into Scene

Select a model or more, and click Load Scene to add the model to the scene.

Starting from version 2.3.0, if a model is successfully loaded, it prompts "The model was successfully loaded into the scene." If loading fails, it prompts "The model failed to be loaded into the scene" and the name of the failed model.

After the model is loaded into the scene, the Model Management page is not closed automatically, and you can continue to perform management operations.

If you add a model, the current scene's FPS (Frames Per Second) is detected. If FPS is less than 15, a prompt box pops up saying "The frame rate of the scene is low. Do you want to enable Smooth Render?"

If Smooth Render is enabled, the rendering effects of 3D components in the scene in editing mode will be reduced, but the relevant configuration will not be affected, and the effects that have been set will still take effect in preview mode.

Deleting the Model

Hover your cursor over the model thumbnail, and you can click the pop-up  icon to delete the model. Select a model, and you can click Delete Model to delete the model (supporting batch deletion).

If a model has been used in the scene and you click the deletion button, a prompt box pops up, as shown in the following figure.

Model Information

Click View in the bottom right corner of the model, and you can view the model information.

Searching a Model

You can perform a fuzzy search in the search box to quickly find models by entering relevant keywords.

Model Configuration Panel

After loading the model into the scene, you can close the Model Management setting box to go to the model list page. Select a model in the model list, and you can configure model attributes.

You can select a model or specific sub-models within a model according to the display level set during model upload and configure the attributes individually while not impacting other parts.

The following table introduces each setting item of attributes.

Note:

If the added model is not displayed in the central display area, the model may be too large. You can zoom out the page or scale the model for a normal display.

Attribute	Introduction
Manage Animation	If animation effects are set in models, you can add animation schemes through Manage Animation in the top right corner to display the animation effects.
Hide	You can click Hide on the left side of the corresponding model title in the model list to display or hide the model.
Focus	You can click Focus on the right side of the corresponding model title in the model list to switch to the default viewing angle of the model.
Copy	You can click Copy on the right side of the corresponding model title in the model list to copy the model.
Rename	You can click Rename on the right side of the corresponding model title in the model list to rename the model.  Names of models at the same level cannot be duplicated.
Delete	You can click Delete on the right side of the corresponding model title in the model list to delete the model. Note: Delete a model carefully because the deleting operation cannot be undone.
Name	You can customize the model name after selecting a model besides using the Rename function.
Scale	You can set the scaling ratio of length, width, and height of a model.  Fixed Ratio is ticked by default, in which case the length, width, and height are scaled proportionally and simultaneously.
Position	You can adjust the position of a model in the component. Flipping, mirroring and other effects can be achieved through negative values.
Rotation	You can adjust the viewing angle of a model.
Style	You can select Default or Wireframe Style as the model style.
Animation	You can add animation clips of wireframe changes to a model. For details, see FVS Custom 3D Scene Wireframe Style.
Reflection	You can determine whether to enable environmental reflection (unticked by default) of the whole model. If it is enabled, the reflection of the model appears on the ground surface. Note: Enabling reflections can provide better visual effects but may reduce performance. If you experience noticeable lag or stuttering, disabling reflections is recommended.

Note:

Style, Animation, and Reflection can only be configured when the entire model is selected, and cannot be configured for sub-models.

Operations on Models in a Scene

Model Selection

You can select a model in the model list or on the scene editing page. The selected model is highlighted.

• Model list: Click a model to select it. Press the hold the Ctrl key and click models to select multiple models or deselect models. Press and hold the Shift key and click models for quick selection.

• Scene editing page: Click a model to select it. Press and hold the Shift key and the left mouse button to box-select multiple models.

Note:

Only the mesh can be selected.

• You can click Deselect on the top toolbar or click areas outside the model to deselect it.

Note:

You can operate on a single sub-object by selecting it. If you select a parent object, you can operate on all its sub-objects.

Model Moving, Rotation, and Scaling

After you select a model object, the Gizmo tool appears, with which you can move, rotate, and scale the model object.

1. Moving Gizmo

Hover over the arrow of the X, Y, and Z axes, and you can drag the arrow to move the model along the corresponding direction after the arrow color changes.

Drag the square in the middle of the coordinate system, and you can freely move the model on the X-Z plane.

2. Rotating Gizmo: Hover over the circles, and you can move the mouse to rotate the model after the circle color changes.

3. Scaling Gizmo: Hover over the small squares on the X, Y, and Z axes, and you can drag the square to scale the model in the corresponding direction after the square color changes.

If Fixed Ratio in Scale is ticked in the right property panel, the length, width, and height are scaled proportionally and simultaneously.

Model Copying and Pasting

You can copy and paste a model after selecting it in the model list or the scene.

You can use Ctrl+C/V shortcut keys to copy/paste the model. You can also right-click the scene and select Copy to copy the model. 

After copy-and-paste operations, the pasted model is placed in the same position as the original model and selected by default. You can manually adjust its position.

Undo and Redo

Undo and Redo only apply to moving, rotating, and scaling the model.

You can undo or redo operations by clicking corresponding buttons on the top toolbar or using shortcut keys. The shortcut for Undo is Ctrl+Z, and for Redo is Shift+Ctrl+Z.

Your operations will not be memorized if you exit and re-enter a scene, in which case Undo and Redo are unavailable.

In the custom 3D scene component, only model data layers can be added.

After adding a data layer and binding data, you can add After Data Update and Left Click events to the layer, achieving effects such as model data display and linked interaction.

Starting from Version 2.2.1, the outline of custom models with data layers configured is highlighted when you hover over the model during preview. 

The toolbar is fixed at the top of a scene in Version 2.2.0. The setting items in the toolbar are described in the following table.

Setting Item	Description
	Go back to the visualization dashboard canvas.
	Enable Smooth Render to improve scene editing performance. For details, see
	Switch among Top View, Main View, and Side View with one click.
	Deselect a model.
	Undo and redo operations, applying to moving, rotating, and scaling custom models only.
	View instructions on adjusting the viewing angle of the scene, adjusting the position of custom models, and selecting multiple models.