The loading three-dimensional model of cesium

Project needs to use two or three-D map switch, was prepared to study ArcGIS JS for Web 3d, but considering the copyright problem, decided to try to do with cesium, so spent 2 days holding to try the mentality of cesium from the environment configuration to load three-dimensional model complete walk again. First, the environment configuration 1. Download Cesium JS

Download Address https://github.com/AnalyticalGraphicsInc/cesium/releases, version is already 1.28.

After decompression, the directory is:

2. Download and install Nodejs

I went to the official website (https://nodejs.org/en/) to download the V6.9.2, which has actually included NPM, open the installation file, has been installed by default, after completing the cmd command line type Node-v and NPM to determine Node.js installation completed.

3. Open the cmd command line into the cesium installation directory (such as the D disk of the 123 folder under the 456 folder you enter D in cmd: Return to enter the CD 123/456 into the), the implementation of NPM install, this process because to connect to foreign sites, The process can be very slow, and if the installation fails, you can find the reason on the Internet, and after the command is successfully executed, the Node_modules directory is created in the Cesium root directory.

4. Installation of Gulp as a dependency on project development, as shown below

After the gulp installation, the dependent packages required to execute the Gulp command are created in the Node_modules directory, as shown in the following figure:

second, compile Cesiumjs

Executing the Gulp default command in the Cesium root directory creates a build folder in the root directory of the CESIUMJS installation, which contains the compiled Cesium.js files and related components. Where cesium main JS is located in my Cesiumunminified folder.

Iii. preparing three-dimensional data

The GLTF and BGLTF two formats are currently supported in Cesium, and GLTF and BGLTF can be converted through a three-dimensional model of DAE format, the model I use is directly downloaded Dae format data, converted to ColladaTogltf.exe format using the GLTF conversion tool.

1. Through cmd into the folder where the ColladaTogltf.exe, use the following command:

Collada2gltf.exe–f daepath-e or Collada2gltf.exe–f daepath-o Gltfpath, where Daepath is the full path of the Dae file, such as C:\ Test.dae,gltfpath is the output path of the GLTF.

In addition, the use of the-e command option here means that the converted GLTF is only exported as a single file, and the geometry and texture data are packaged together; the-o command typically outputs 3 formats. Bin,. GLTF,. GLSL. (cesium provides a mechanism for texture and geometry asynchronous loading after 1.16, so it is recommended that you do not use-e)

When the conversion succeeds, the command line outputs some of the information that is converted during conversion, contains geometry and animation information, and the converted GLTF is under the Dae directory or the specified folder.

(Here I found a comparison pit of the problem, some people say that the bug has been eliminated, but still encountered, should be the converter colladaTogltf.exe bug, when my Dae, GLTF, exe file not put a folder, converted into GLTF files, The file association within the GLTF file is relative to the EXE, and if you move to another location, you cannot find the GLTF associated file. We can modify the path of the associated file with a text editor, or you can put the Dae, GLTF, exe in the same folder directly. ) Four, cesium development, loading three-dimensional model

This part is mainly concerned with the development of cesium, because just contact, so do a simple example, load the default map, add three-dimensional model to the map. 1. Introduce the necessary JS, CSS, create the container

    <script src= "Cesium/cesium.js" ></script>
    <style>
        @import url (cesium/widgets/ WIDGETS.CSS);
        HTML, body, #cesiumContainer {
            width:100%; height:100%; margin:0; padding:0; overflow:hidden;
        }
    </style>
 
2. Create a map and add a three-dimensional model to the perspective



var viewer = new Cesium.viewer (' Cesiumcontainer ');//create default map
    var scene=viewer.scene;
    var Modelmatrix = Cesium.Transforms.eastNorthUpToFixedFrame (
            Cesium.Cartesian3.fromDegrees (120.62898254394531 , 30.02804946899414, -10.0));
    var model = Scene.primitives.add (CESIUM.MODEL.FROMGLTF ({
        URL: ' DATA/MODELDATA/ABUILDING.GLTF '),//model file relative path
        Modelmatrix:modelmatrix,
        scale:0.001//Adjust the size of the model in the Map
    }));
    Viewer.camera.flyTo ({//Set perspective
        destination:Cesium.Cartesian3.fromDegrees (120.62898254394531, 30.02804946899414 , 100.0)
    });
Here is the effect chart: