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 > New FineVis Visualization Dashboard, and create a blank 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.

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

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.

Setting Item		Description
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. Note: 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.

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 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.) 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.
	You can undo and redo operations, which apply only to moving, rotating, and scaling custom models.
	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.