FVS 3D City Scene Component

This document is applicable to users who have installed the FineVis Data Visualization plugin to learn operations related to FVS dashboard.

Version

Application Scenario

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

After you upload a GeoJSON file, the 3D city component automatically recognizes and parses geographic elements (currently supported elements: buildings, grasslands, rivers, and roads) in the file. Then the component constructs a grid model (with default styles and materials) based on the elements' latitude and longitude, and finally renders the model, making it quick to construct a 3D digital city.

Note:

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

2. The function is not supported on mobile terminals.

Procedure

This document introduces operations (like importing scenes, configuring attributes, and changing angles) of the FVS 3D city component.

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

Creating a Component

Choose File (on the designer menu bar) > New FineVis Visualization Dashboard, click Create a Blank Dashboard, and click Create Dashboard.  

Click the 3D icon and click 3D City Scene to add a 3D City Scene component to the canvas. Click Edit Component to go to the component editing page.  

Scene Creation

You need to create a scene first. Click Create Scene and configure relevant settings in a pop-up box. You can create a scene through Generate New Scene or Import Existing Scene.  

Generating a New Scene

You need to prepare a GeoJSON file 3D City on the local computer.

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

You can choose two styles: Sci-fi Style or Simple.

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

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

If it is, the file can be uploaded. If not, a prompt pops up indicating that the GeoJSON file cannot be compiled. You need to reselect a file and upload it.

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

You can click Cancel Generating or Continue Generating as needed.

3. The system performs data detections after you click Generate Scene with the successful upload.

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

Note:

For details about the attributes, standards, and definitions of GeoJSON files, see Instruction on GeoJSON File in 3D City Component.

Importing an Existing Scene

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

Exporting a Scene File

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

Click Export Scene to export a FCUST file including a 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 "Importing an Existing Scene."

Replacing Scene Data

Click Replace Scene Data (in Scene) on the 3D City editing page and upload the locally prepared GeoJSON file.

The file size limitation and the mechanism described in section "Generating a New Scene" should also be followed here.

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

Setting Scene Attributes

You can set scene attributes after adding a scene.

Settings		Description
Overall Style		Includes Sci-fi Style and Simple. (The overall style change will override all previously configured styles.)
Environment	Ground	Includes Ground Background and Building Height. 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 customize a color scheme, displaying buildings, streets, grasslands, and water systems in Model.
		Building Height: allows you to adjust the height (original height: 100) of all buildings (including unnamed ones) from 10 to 200 in the 3D city scene component, facilitating to highlight or downplay the visual effect of buildings.
	Particle	Displays a snowflake-like effect in the city scene.
	Shock Wave	Allows you to highlight certain areas (as centers of shock waves). Supported operations: adding (at most 10), editing, deleting, and hiding. Configurable attributes: Name, Position, Scope, Velocity, and Color.
	Soaring Lines	Displays light pillars continuously rising from the ground to the sky in the scene.
Camera	Field Depth	Allows you to achieve the clear/blur scene effect based on the focus distance (namely, clear scene within the focus distance and blur scene beyond the distance). Configurable setting items: Focus Distance, Aperture Value, and Blur Radius. 1. Focus Distance (Dynamic or Fixed): the distance between the focus object and the camera. Dynamic: takes the center object of the current viewpoint as the focus point with the focus distance being automatically calculated. Fixed: allows you to set a fixed focus distance or obtain the current autofocus distance with one click. 2. Aperture Value (allowed range: 0.1 to 40): the aperture value of the camera, allowing you to control the field depth. (The smaller the aperture value, the shallower the field depth, namely, the fewer the clear area.) 3. Blur Radius (Low, Medium, or High): the blur radius of the field depth, namely the blur degree of the scene.
	Viewing Angle	Allows you to achieve the automatic 360° rotation effect of the 3D city model, with the rotation speed being configurable. (No impact on the city angle adjustment through the cursor.)
	Roaming Path	Allows you to add a roaming path and set its animation.
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.
	Bloom	Displays light streaks extending outward from the boundaries of bright areas in the image, achieving the floodlight effect. Setting items: Intensity, Threshold, and Blur.
	Glow	Allows models with glowing materials to glow through a blurred overlay. Setting items: 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	Allows you to set the overall brightness of the scene. Configurable range: -100 to 100, with the default value as 0.
	Contrast	Allows you to set the light and shade contrast in the scene. Configurable range: -100 to 100, with the default value as 0.

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

You can click Add Custom Model to upload a custom model in the 3D city scene component with the same upload and usage methods as those in the 3D custom scene component.

You can select a model (being highlighted) from the list or the scene. Click the area outside the model or Unselect to deselect the model.

Note:

Grasslands/water systems, shockwaves, particles, and soaring lines directly generated from the GeoJSON file, and hidden models in the scene cannot be selected by clicks.

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

1. Hide, delete, and rename the model. 

Note:

Once the model is deleted, it cannot be restored.

2. Modify the styles of the top surface and facade, with the Apply to All Main Building function being supported.

3. Modify street styles, with the Apply to All Main Building function being supported.

4. Modify the styles and colors of grasslands and water systems.

You can add four data layers in the 3D city scene component: Point-Data Layer, Line-Data Layer, Column-Data Layer, and Model-Data Layer. The following figure shows configured data label effects for each layer.

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

Instructions

You can adjust the view angle with one click through the three preset views: Top View, Main View, and Side View.

You can use the left mouse button, right mouse button, and scroll wheel to adjust the viewing angle. Click Instructions in the top left corner of the editing page. The corresponding sample operation page is displayed.

1. Left mouse button: Left click and drag to rotate viewing angle.

2. Right mouse button: Right click and drag to pan, scale, or lower viewing angle.

3. Scroll mouse wheel: Scroll mouse wheel to zoom in/out viewing angle.

Methods for View Angle Manual Adjustment

You can manually adjust the view angle either on the canvas or on the component edit page.

1. On the Canvas

On the canvas page, select the component and click the Adjust Viewing Angle icon in the top right corner. Then you can adjust the viewing angle within the component through the mouse.

After the adjustment, click the ✓ icon in the top right corner or click anywhere outside the component area to save the final view angle.

2. On the Component Edit Page

You can directly adjust the view angle of the model on the component editing page with the mouse. Click Back to Visualization Dashboard after completion. The final view angle is automatically saved.  

Click to download the template: FVS 3D City Scene Component Example.fvs.

Click to download the sample GeoJSON file: Sample Area.zip. Do not use the sample file in actual scenarios.