FVS 3D City 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

    V1.X

    /

    11.0.16

    V2.0.0

    • Changed the component name from 3D City to 3D City Scene.

    • Adjusted the data layer structure to facilitate independent configuration.

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

    11.0.22

    V2.5.0

    Allowed you to select/deselect Enable Fog under Scene > Environment.

    11.0.22

    V3.2.0

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

    • The name of the selected model in the scene will be automatically stuck on top in the model list.

    For details, see section "Model Configuration and Management."

    Application Scenario

    The 3D city component is a 3D engine based on WebGL technology, allowing you to easily build 3D scenes in the browser.

    After you upload a GeoJSON file, the 3D City Scene component automatically recognizes and parses geographic elements (currently supported elements: buildings, grasslands, rivers, and roads) in the file. Then the component constructs a mesh model (with default styles and materials) based on the elements' latitude and longitude points, applies default-styled materials, and finally renders the model, allowing the rapid construction of a 3D digital city.

    iconNote:

    1. For details about GeoJSON files and their access methods, you can search on Google.

    2. The 3D City Scene components are not supported on mobile terminals.

    第一张图.gif

    Procedure

    This document introduces operations in the FVS 3D City Scene component, including importing scenes, configuring attributes, and changing viewing angles.

    The following table describes the recommended steps for creating a 3D city scene.

    Serial NumberStepDescription

    1

    Template preparation

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

    2

    Scene creation

    Create a scene or import an existing scene.

    3

    Scene management

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

    4

    Model management

    Configure the name, visibility, style, and color of the model.

    5

    Data management

    Add data layers and configure datasets to combine data and the model.

    6

    Viewing angle adjustment

    Adjust the viewing angle for the final preview.

    This document provides a sample GeoJSON file for testing purposes only. Do not use it in actual production. Download and unzip the file: Sample Area.zip.

    Component Creation

    Choose File > New FineVis Visualization Dashboard, and create a blank dashboard, as shown in the following figure.

    1.png

    2.png

    Choose 3D > 3D City Scene to add a 3D City Scene component to the canvas. Click Edit Component to enter the component editing page, as shown in the following figure.

    3.png

    Scene Management

    Creating a Scene

    After entering the component editing page for the first time, you need to create a scene, as shown in the following figure.

    4.png

    A setting box pops up after you click Create Scene, and you can select Generate Scene or Import Existing Scene for the scene creation.

    Generating a New Scene

    To generate a new scene, you need to prepare the local GeoJSON file of the 3D city scene.

    Click Select Data and upload the prepared file. After the successful upload, the scene is generated.

    You can select Sci-fi or Simple in Style Choice.

    5.png

    The following describes the GeoJSON file size limitation and the data validation mechanism.

    1. The system first checks whether the file can be parsed when you upload it.

    If the file can be parsed, it can be uploaded. If not, a prompt pops up indicating that the GeoJSON file cannot be parsed. You need to upload another file.

    2. The system then checks the file size. If the uploaded file exceeds 500 MB, a prompt pops up, displaying "The file is too large. Continue to generate?"

    You can click Cancel or Continue Generating as needed.

    3. After the successful upload, the system performs data validation when you click Generate Scene.

    If all data is non-compliant, the scene cannot be generated. You need to upload the file again. If some data is non-compliant, you can determine whether to continue to generate the scene using the compliant data.

    iconNote:
    For details about the GeoJSON attribute standard definition, see Instruction on GeoJSON File in 3D City Component.

    6.png

    Importing an Existing Scene

    You can export 3D city scenes. For details, see section "Exporting the Scene." If you have an exported 3D city scene file, you can click Import Existing Scene and click Select Scene to upload the file, as shown in the following figure.

    8.png

    Exporting the Scene

    You can export the current scene on the 3D city scene editing page.

    You can click Export Scene to export an FCITY file including the scene GeoJSON file and all configurations in Scene and Model.

    The exported file can be used in other 3D City Scene components. For details, see section "Importing an Existing Scene."

    9.png

    Replacing the Scene Data

    You can click Replace Scene Data on the 3D city scene editing page and upload the locally prepared GeoJSON file to replace the existing scene.

    You need to follow the file size limitation and the data validation mechanism described in section "Generating a New Scene."

    The scene data replacement affects neither the configured scene attributes nor the uploaded custom models.

    10.png

    Setting the Scene Attributes

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

    11.png

    Setting ItemDescription

    Overall Style

    Two overall styles are available, namely Sci-fi and Simple.

    (The new overall style will override all previously configured style settings.)

    Environment

    Ground

    Ground Background

    Ground Background includes Base Map and Monochrome.

    1. Base Map: allows you to select five built-in color schemes or customize the TileLayer URL, displaying road names, vegetation, water systems, and so on.

    2. Monochrome: allows you to display buildings, streets, grasslands, and water systems in the model list (without displaying the city street names) and customize a color as the background color.

    Building Height

    Allows you to adjust the height of all buildings (including unnamed ones) from 10% to 200% (with the original height considered as 100%) in the 3D City Scene component, enabling you to highlight or downplay the visual effect of buildings.

    Fog

    Enable Fog is selected by default. You can deselect it as needed. Currently, you cannot configure additional effects.

    Particle

    Enables a snowflake-like effect in the city scene when you select Enable Particle Effect.

    Shock Wave

    Allows you to highlight certain areas as centers of shock waves.

    You can add, edit, delete, or hide the shock wave.

    You can configure the attributes (such as Name, Position, Radiation Scope, Velocity, and Color) for the shock wave.

    You can add at most ten shock waves.

    Soaring Line

    Enables light pillars to continuously ascend from the ground to the sky when you select Enable Soaring Line.

    Camera

    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 Camera Viewing Angle.

    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 to the edges of polygons.

    2. FXAA (Fast approximate anti-aliasing): represents a high-performance approximation of the traditional MSAA effect, applying to lower-performance computer configurations. The basic principle is to soften the image. As a result, the scene will look slightly blurry.

    Bloom

    If Enable Bloom is ticked, light streaks will extend outward from the boundaries of the bright areas in the image, creating a bloom effect.

    You can set Intensity, Threshold, and Blur.

    Glow

    If Enable Glow is ticked, models with glowing materials will achieve a glowing effect through a blurred overlay.

    You can set Intensity and Radius.

    iconNote:
    Glow also takes effect for wireframes and dissolution.

    Saturation

    Allows you to set the overall color purity (ranging from -100 to 100, with the default value 0) of the scene. (The higher the saturation, the purer the color; the lower the saturation, the grayer the color.)

    Brightness

    Allows you to set the overall brightness (ranging from -100 to 100, with the default value 0) of the scene.

    Contrast

    Allows you to set the contrast of brightness (ranging from -100 to 100, with the default value 0) in the scene.

    Model Configuration and Management

    Click the Model tab. The model list displays the names of the named buildings, streets, and grasslands/water systems in the GeoJSON file. Any unnamed objects in the GeoJSON file are merged into Other Building, Other Street, and Other Water System/Grassland.

    You can click Add Custom Model and load a custom model into the 3D City Scene component using the same method as uploading a Custom 3D Scene component.

    You can select a model from the list or the scene. The selected model will be highlighted in the scene. You can click the area outside the model or click Deselect to deselect the model, as shown in the following figure.

    iconNote:

    1. Grasslands/water systems, shock waves, particles, and soaring lines directly generated from the GeoJSON file, as well as hidden models, cannot be selected by clicking in the scene.

    2. In FineReport with the FineVis Data Visualization plugin of V3.2.0 and later versions, the name of the selected model in the scene will be automatically stuck on top in the model list. The model with the highest order among the multiple models you frame will be displayed at the top of the list.

    4动图.gif

    After you select a model, the following operations are supported in the model list:

    1. You can hide, delete, and rename the model.

    iconNote:
    The following description only applies to the operations about buildings, streets, and grasslands/water systems. For operations about Custom Model, see FVS Custom 3D Scene Component.
    Function
    Description

    Hide

    You can click Hide/Show on the left side of the corresponding model name in the model list to hide or display the model.

    Delete

    You can click Delete on the right side of the corresponding model name in the model list to delete the model.

    In FineReport with the FineVis Data Visualization plugin of V2.1.1 and later versions, you can right-click the mouse or use the hotkey Delete to delete the selected model in the scene. (Copy and Paste can only apply to custom models.)

    iconNote:
    Once a model is deleted, the deletion cannot be undone. Proceed with caution.


    Rename

    You can click Rename on the right side of the corresponding model name in the model list to rename the model.

    Model names at the same level cannot be duplicated.

    2. You can modify the styles of the top surface and facade and apply the modifications to all buildings.

    3. You can modify street styles and apply the modifications to all streets.

    4. You can modify the styles and colors of grasslands and water systems.

    5. In FineReport with the FineVis Data Visualization plugin of V3.2.0 and later versions, a search bar is added for the model list in Model, allowing you to search for object names within the list.

    4第二张图.png

    Data Layer

    You can add four types of data layers, namely Point-Data Layer, Line-Data Layer, Column-Data Layer, and Model-Data Layer, in the 3D City Scene component. The following figure shows configured data label effects for each layer.

    数据图层.png

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

    For details about the data layer functions, see Data Layer in 3D Scene Components.

    5第2张图.png

    Toolbar

    The toolbar is optimized and pinned at the top of the scene area in FineReport with the FineVis Data Visualization plugin V2.2.0. The following table describes the setting items on the toolbar in detail.

    Setting Item
    Description
    a.png

    You can the button to go back to the visualization dashboard canvas.

    b.png

    You can enable Smooth Render to improve scene editing performance. For details, see Smooth Render Mode in FVS 3D Scenes.

    c.png

    You can switch among Top View, Main View, and Side View with one click.

    d.png

    You can click the button to deselect a model.

    e.png

    You can undo and redo operations, which apply only to moving, rotating, and scaling custom models.

    f.png

    You can click to view the instructions on adjusting the viewing angle of the scene, adjusting the position of custom models, and selecting multiple models.

    Template Download

    For details, you can download the template: FVS 3D City Scene Component Example.fvs.

    This document provides a sample GeoJSON file for testing purposes only. Do not use it in actual production. Download and unzip the file: Sample Area.zip.

    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