FVS Custom 3D Scene Component

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

Version

Application Scenario

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

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

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, click Create Blank Dashboard, and click Create Dashboard, as shown in the following figure.

Click 3D in the component area, and click Custom 3D Scene to add a 3D component to the canvas. Click Edit Component to open the custom 3D scene editing page, as shown in the following figure.

Scene Creation

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 an Empty Scene

Two scene styles are provided in Generate Empty Scene, including Live View and Sci-fi. Live View is selected by default, as shown in the following figure.

Importing an Existing Scene

You can export the custom 3D scene for use. For details, see section "Scene Export" You can select Import Existing Scene to import the exported custom 3D scene file, as shown in the following figure.

Scene Export

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

Click Export Scene, and a FCUST file is generated, including scene style, scene configuration on the right side and model configuration.

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

Scene Attribute Setting

You can set scene attributes after adding a scene, as shown in the following figure.

Setting Item		Description
Overall Style		Two overall styles, namely Live View and Sci-fi, are available. (The overall style change will override all previously configured styles.)
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 Solid 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 value 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 an existing 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 value, 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. Supported operations: adding (at most 10), editing, deleting, and hiding Configurable attributes: Name, Position, Scope, Velocity, and Color You can add at most ten shock waves.
	Soaring Line	You can determine whether to tick Enable Soaring Line. After it is ticked, continuous light pillars keep rising from the ground to the sky.
Camera	Viewing Angle	You can set basic properties of the viewing angle of a scene including Scale Setting and Vertical Angle. You can tick Enable Field Depth and Enable Viewing Angle Change and add the camera viewing angle. For details, see Camera Viewing Angle in 3D Scenes.
	Roaming Animation	Allows you to add a roaming path and set its animation. For details, see Roaming Animation in 3D Scenes.
Image	Anti-aliasing	Allows you to improve the 3D graphic quality by enabling MSAA/FXAA (or enabling them simultaneously). 1. MSAA (Multisample Anti-Aliasing): performs the anti-aliasing only for the edges of polygons. 2. FXAA (Fast Approximate Anti-Aliasing): represents a high-performance approximation of the traditional MSAA, being applicable to lower-performance computer configurations. The basic principle is to soften the image. As a result, the picture will look slightly blurry.
	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 can glow through a blurred overlay. You can set Intensity and Radius. Note: Glow also takes effect for wireframes and etching.
	Saturation	Allows you to set the overall color purity of the scene. (The higher the saturation, the purer the color; The lower the saturation, the grayer the color.) Configurable range:  -100 to 100, with the default value as 0.
	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.

Model Adding

If no model exists in the model list, you can click Add Model or Add Model Object to open the Model Management page, as shown in the following figure.

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.

Model Uploading

You can upload only the GLB model files.

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

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, displaying "The uploaded model contains over 3000 meshes and may result in lagging. 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 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:

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

2. In V3.2.0 and later versions, the default value for Max Display Level is modified from 2 to 0.

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 Enable Wireframe Style. After ticking it, you can select Default Wireframe Style or Custom Wireframe Style. 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 grayed out and cannot be modified.

Loading the Model into Scene

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

In V2.3.0 and later versions, if a model is successfully loaded, a prompt, displaying "The model was successfully loaded into the scene." will appear. If loading fails, a prompt, displaying "The model failed to be loaded into the scene" with the name of the failed model, will appear.

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

In V3.2.0 and later versions, click Load into Scene, and the newly added model is selected by default and displayed at the top in the model list.

Note:

1. When multiple models are uploaded in batches, the last model, which is successfully loaded into the scene, is automatically selected and highlighted.

2. The added model automatically appends to the end of the model list and does not enter any group.

If you add a model, the FPS (Frames Per Second) of the current scene is detected. If the 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 the preview mode.

Deleting the Model

Hover your cursor over the model thumbnail, and you can click the pop-up Delete 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, as shown in the following figure.

Searching for a Model

You can perform a fuzzy search in the search box to quickly find models by entering relevant keywords, as shown in the following figure.

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 in detail.

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 adjust the model's scale for a normal display.

Attribute	Description
Manage Model Animation	If animation effects are set in models, you can add animation solutions through Manage Model Animation in the top right corner to display the animation effects.
Searching for model objects	Search for model objects in the model list. You can search for objects of all nodes. Note: This setting item was added in V3.2.0.
Hide	You can click the Hide icon on the left side of the corresponding model title in the model list to display or hide the model.
Focus	You can click the Focus icon 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 the Create Copy icon on the right side of the corresponding model title in the model list to copy the model.
Rename	You can click the Rename icon 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 the Delete icon 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. Note: In V2.8.0, to maintain design consistency, the default rotation value of the Y axis was modified from 180 to 0, meaning no rotation by default.
Style	You can select Default or Wireframe Style as the model style.
Model Animation	Model Animation only appears when a model is configured with model animations. Note: Model Animation is only supported in V3.2.0 and later versions. During the preview, the canvas automatically focuses on the corresponding model and pauses the playback of other animations. During the preview, you can click Exit Preview or press Esc to stop the animation playback and return to the pre-focusing 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 first before performing other operations." will be displayed, as shown in the following figure.
Wireframe  Animation	You can add animation clips of wireframe changes to a model. For details, see FVS Custom 3D Scene Wireframe Style. You can preview, edit, and delete the wireframe animation. Note: You can only preview the wireframe animation in V3.2.0 and later versions.
Reflection	You can determine whether to enable environmental reflection of the whole model. If it is enabled, the reflection of the model appears on the ground surface. Enable Environment Reflection is deselected by default. 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.

In the model list, select a model and click the right mouse button to display the operation menu. You can copy, delete, combine, hide, or show a model.

Attribute	Description
Create Copy	Same as that mentioned in the previous table
Delete
Show/Hide
Combine	Select multiple models, click the right mouse button, and select Combine to combine the selected models. Note: The Combine function is only supported in V3.2.0 and later versions. You can only combine models of the root nodes. You can only set one level of grouping. You can rename the combination and search for it in the search bar. You cannot multi-select a combination. You can sort the combination by dragging. In a combination, models at root nodes can also be sorted by dragging. You can click Combine to combine models and right-click the combination or press Shift, Ctrl, and G at the same time to uncombine the combination. A combination will be uncombined when all nodes under the combination are deleted.

Operation 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 Ctrl and click models to select multiple models or deselect      models. Press Shift and click models for continuous selection.

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

In V3.2.0 and later versions, the selected model in the model list will be automatically highlighted and stuck on top in the model list. The model with the highest order among the multiple models you frame in the list will be displayed at the top.

Note:

Only the mesh can be selected.

• You can click Unselect on the toolbar above or click areas outside the model to deselect the model.

Note:

1. You can operate on a sub-level object after selecting it. If you select a parent object, you can operate on all its sub-objects.

2. In V3.1.0 and later versions, during model preprocessing, if level processing is set to display the sub-level, sub-level objects can be selected. If level processing is set to display only the parent level, clicking on any sub-level object in the scene will select the entire parent-level object.

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 the cursor over the arrow of the X, Y, and Z axes respectively, and you can drag the arrow to move the model along the corresponding direction after the arrow color changes.

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

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

3. Scaling Gizmo: Hover the cursor 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 on 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 on the scene.

• You can use Ctrl + C/V shortcut keys to copy/paste the model. Besides, you can right-click the scene, and select Create Copy to copy and paste a selected model.

Note:

 1. In V2.4.0, the Paste option, which appeared when you right-click the scene after copying a model, was removed, allowing you to directly copy and paste a selected model after clicking Create Copy.

2. In versions earlier than V3.2.0, right-click the scene, and the Delete option appeared.

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

Undoing and Redoing

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. Undo and Redo are not available      until you perform operations again.

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

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

For details about the function, see Data Layer in 3D Scene Components.

In V2.2.1 and later versions, the outline of custom models with data layers configured is highlighted when you hover the cursor over the model during preview. 

The toolbar is fixed at the top of a scene in V2.2.0. The following table describes the setting items on the toolbar in detail.

Setting Item	Description
	Click the Back to Visualization Dashboard button to go back to the visualization dashboard canvas.
	Enable Smooth Render to improve scene editing performance. For details, see Smooth Render Mode in 3D Scenes.
	Switch among Top View, Main View, and Side View with one click.
	Deselect a selected 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.