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

Note:

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.

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.

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.

Choose File (on the designer menu bar) > New FineVis Visualization Dashboard, click Create Blank Dashboard, and click Create Dashboard, as shown in the following figure.

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.

For V4.2.0 and later versions, you can save the content on the component editing page.

You can directly click Save in the upper right corner of the page or press the hotkey Ctrl + S to save the content. After the content is saved successfully, the message “The component is saved successfully. To preview the updated content, you need to return to the visualization dashboard and save the template.” will be displayed. The following figure shows the effect.

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.

A setting box pops up after you click Create Scene, and you can select Generate New 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.

Note:

For details about how to customize 3D cities or parks, see Custom Drawn 3D City or Park.

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

You can select Sci-fi Effect or Simple Effect in Model Effect.

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.

Note:

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

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.

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

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.

Setting the Scene Attributes

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

Note:

For FineReport of V4.1.0 and later versions, the original Image tab has been removed, and the related configuration options have been moved to Environment > Post-processing.

Environment

1. Environment effect

Environment effect supports setting for multiple sets. You can click  to add a new environment effect.

Different environmental configurations, such as ground and fog settings, can be stored under different environmental effects.

Note:

For FineReport of versions before V4.1.0, the setting was named Overall Style. You could click to switch between the Sci fi and Simple styles. Changing the overall style would overwrite all previously configured style settings.

2. Ground

You can configure the ground background and building height. The following table describes the details.

Configuration Item	Description
Ground Background	Ground Background includes Base Map and Monochrome. 1. Base Map allows you to see the effects of city road names, vegetation, water systems, and so on.  If you set Map Service to Amap, five built-in styles are available, and Butterfly Blue is selected by default. If you set Map Service to Custom Tilelayer, you need to enter the URL manually. Note: For FineReport of versions before V3.5.0, Map Service and Style were not distinguished. You can choose the five built-in styles or custom Tilelayer option directly. 2. Monochrome allows you to display buildings, streets, grasslands, and water systems in the model list, without displaying the city street names. You can choose any color as the base color.
Building Height	This item 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.

3. Fog

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

4. Post-processing

The Post-processing function was added in V4.1.0. The supported configurations are shown in the following figure.

Note:

For FineReport of versions before V4.1.0, Field Depth was located in the Camera tab; other settings were located in the Image tab.

Setting Item		Description
Post-processing	Field Depth	After Enable Field Depth is selected, the blur increases with the focus distance (namely, clear scene within the focus distance and blurred scene beyond the distance). You can set Focus Distance, Aperture Value, and Blur Radius. 1. Focus Distance: This parameter specifies the distance between the focused object and the camera, which can be set to Dynamic or Fixed. Dynamic: The center object at the current view angle is always taken as the focused object with the focus distance being automatically calculated. Fixed: You can set a fixed focus distance. You can also obtain the current autofocus distance with one click. 2. Aperture Value: You can control the depth of field. The smaller the aperture value, the shallower the field depth (namely, the smaller the clear area). The value ranges from 0.1 to 40. 3. Blur Radius: This parameter specifies the blur radius (namely the blur degree of the scene) of the field of depth, which can be set to Low, Medium, or High.
	Anti-aliasing	You can improve the 3D graphic quality by enabling MSAA, FXAA, or both. 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. Note: Glow also takes effect for wireframes and dissolution.
	Saturation	You can 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	You can set the overall brightness (ranging from -100 to 100, with the default value 0) of the scene.
	Contrast	You can set the contrast of brightness (ranging from -100 to 100, with the default value 0) of the scene.

5. Particle

If Enable Particle Effect is ticked, a snowflake-like effect of flying particles will appear in the city sky.

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

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

• You can add at most ten shock waves.

7. Soaring Line

If Enable Soaring Line is ticked, continuous light pillars will keep rising from the ground to the sky.

Camera

1. Viewing Angle

• You can set basic attributes of the viewing angle for a scene, including Scale Setting and Vertical Angle.

• You can tick Enable Viewing Angle Change and add Camera Viewing Angle.

For details, see Camera Viewing Angle of the 3D Scene Component.

2. Roaming Animation
You can add a roaming path and set its animation.

For details, see Roaming Animation in the 3D Scene Component.

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.

Note:

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.

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

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

Note:

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 select Delete by right-clicking 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.) Note: 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.

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.

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.

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
	You can the button to go back to the visualization dashboard canvas.
	You can enable Smooth Render to improve scene editing performance. For details, see Smooth Render Mode in FVS 3D Scenes.
	You can switch among Top View, Main View, and Side View with one click.
	You can click the button to deselect a model.
	For details about the Undo and Redo operations, see section "Undoing and Redoing" in FVS Custom Model Component.
	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.

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.