FVS Custom 3D Scene Component

  • Last update:February 27, 2025
  • Overview

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

    Version

    Report Server Version
    Plugin VersionFunctional Change

    11.0.2

    V1.X

    /

    V11.0.16

    V2.0.0

    • Custom Model was renamed Custom 3D Scene.

    • Changed the data layer structure, facilitating independent settings.

    • Optimized the model management function to manage uploaded models better.

    • Added a limit on setting shock waves (at most 10) under Scene > Environment.

    11.0.22

    V2.1.1

    Enhanced operations on models on the scene editing page, with support for undoing and restoring certain operations. For details, see section "Operation on Models in a Scene."

    11.0.22

    V3.1.0

    Allowed you to logically associate the selected model with the preprocessed level on the scene editing page. For details, see section "Data Label."

    11.0.22

    V3.2.0

    Modified the default value of the display level in Data   Preprocessing. For details, see section "Model Preprocessing."

    Optimized the model selection. For details, see section "Model Selection."

    Optimized the configuration panel. For details, see section "Model Configuration Panel."

    • Added a search bar for the model list in Model, allowing you to search        for object names within the list.

    • Allowed you to combine multiple models to a combination.

    • Selected an added model by default and displayed the model at the top of the model list.

    • Added the Model Animation configuration item, enabling the preview of the model animation.

    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.

    iconNote:
    The function is not supported on mobile terminals.

    第1张图.gif

    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.

    NumberProcedureDescription

    1

    Template preparation

    Create a FVS dashboard, add a custom 3D component, and edit the component.

    2

    Scene creation

    Generate an empty scene or import an existing scene.

    3

    Scene management

    Configure the style, environment effect, viewing angle rotation, etc. for the 3D scene.

    4

    Model management

    Import a model and set its Name, Hide, Scale, Position, and Rotation.

    5

    Data management

    Add data layers and configure datasets, combining data and model.

    6

    Viewing angle adjustment

    Adjust the final view angle.

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

    Component Creation

    Choose File > New FineVis Visualization Dashboard, click Create Blank Dashboard, and click Create Dashboard, as shown in the following figure.

    新建FVS1.png

    新建FVS2.png

    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.

    新建组件.png

    Scene Management

    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.

    3.1.1生成空场景.png

    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.

    3.1.2导入已有场景.png

    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."

    3.2导出场景.png

    Scene Attribute Setting

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

    3.3设置场景属性.png

    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.

    iconNote:
    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.

    iconNote:
    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.

    iconNote:
    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.

    环境贴图,小球.png

    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.

    iconNote:
    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 Configuration and Management

    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.

    添加模型.png

    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.

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

    4.2.1上传模型.png

    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.

    超过3000.png

    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.

    iconNote:

    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.

    4.2.2模型预处理.png

    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.

    4.2.2风格预处理.png

    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.

    风格预处理2.png

    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.

    iconNote:

    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.

    4.2.3载入场景.png

    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.

    渲染模式.png

    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).

    4.2.4删除模型.png

    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.

    已有模型,删除提示.png

    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.

    4.2.5模型信息.png

    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.

    4.2.6搜索模型.png

    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.

    4.3第一张图.png

    The following table introduces each setting item of attributes in detail.

    iconNote:
    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.
    AttributeDescription

    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.

    iconNote:
    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.

    iconNote:
    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.

    iconNote:
    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.

    iconNote:
    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.

    iconNote:
    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.

    4.3模型动画小图.png

    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.

    iconNote:
    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.

    iconNote:
    Enabling reflections can provide better visual effects but may reduce performance. If you experience noticeable lag or stuttering, disabling reflections is recommended.

    iconNote:
    StyleAnimation, 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

    4.3第二张小图.png

    Delete

    Show/Hide

    Combine

    Select multiple models, click the right mouse button, and select Combine to combine the selected models.

    iconNote:
    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.

    4.3第三张小图.png

    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.

    iconNote:
    Only the mesh can be selected.
    • You can click Unselect on the toolbar above or click areas outside the model to deselect the model.

    iconNote:

    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.

    4.4.1图.gif

    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.

    4.4.2第一张图.gif

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

    4.4.2第二张图.gif

    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.

    4.4.2第三图.gif

    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.


    iconNote:

     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.

    4.4.3第一张图.gif

    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.

    4.4.4动图.gif

    Data Layer

    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. 

    第5章配图.gif

    Toolbar

    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
    a.png

    Click the Back to Visualization Dashboard button to go back to the visualization dashboard canvas.

    b.png

    Enable Smooth Render to improve scene editing performance. For details, see Smooth Render Mode in 3D Scenes.

    c.png

    Switch among Top View, Main View, and Side View with one click.

    d.png

    Deselect a selected model.

    e.png

    Undo and redo operations, applying to moving, rotating, and scaling custom models only.

    f.png

    View instructions on adjusting the viewing angle of the scene, adjusting the position of custom   models, and selecting multiple models.

    Attachment List


    Theme: FineVis Data Visualization
    Already the First
    Already the Last
    • Helpful
    • Not helpful
    • Only read

    滑鼠選中內容,快速回饋問題

    滑鼠選中存在疑惑的內容,即可快速回饋問題,我們將會跟進處理。

    不再提示

    10s後關閉

    Get
    Help
    Online Support
    Professional technical support is provided to quickly help you solve problems.
    Online support is available from 9:00-12:00 and 13:30-17:30 on weekdays.
    Page Feedback
    You can provide suggestions and feedback for the current web page.
    Pre-Sales Consultation
    Business Consultation
    Business: international@fanruan.com
    Support: support@fanruan.com
    Page Feedback
    *Problem Type
    Cannot be empty
    Problem Description
    0/1000
    Cannot be empty

    Submitted successfully

    Network busy