Create gltf dynamic night scene model

cell

Preface

To create a scene full of technology, animation special effects are indispensable. As we all know, Unity software can produce various cool animation effects. If you add animation in Unity to a WebGL web project, it will be very wonderful~ Next, the editor will introduce how to make texture animation through Unity and export it to gltf Load on front-end web page

1. Preparation in advance

The entire implementation process requires the use of 3ds Max software, Unity software and a cool texture map.
The implementation steps are divided into the following five parts:
1. Model in 3ds Max and set the texture UV
2. Import the model into Unity
3. Set up self-illumination and dynamic texture effects
4. Export to gltf
5. Load using SuperMap iClient for Cesium

2. Specific implementation

Phase 1: Modeling

1.1 Create models in 3ds Max

1.2 Set uv and texture, add the [uvw texture] command to the model, and select a cylinder according to the shape of the model. After setting the uv, click on the material ball, set a standard bitmap texture and assign it to the model

Stage 2: Import the model into Unity

2.1. Export the max model to fbx

2.2. Create a new Unity project

2.3. Import the Unity-glTF-Exporter-master plug-in (this plug-in can export the Unity model to gltf, which can be downloaded from the Baidu network disk link after the article), and directly drag the plug-in file to the Asset panel in Unity with the mouse.

2.4. Import the fbx model and texture image. Also use the mouse to drag the fbx model and image into the Asset panel in Unity.

2.5. At this time, the materials and maps produced in 3ds Max are not imported into Unity along with the model. Manually import the textures and materials related to the model through the following settings.

Material folders will be automatically generated after importing

The third stage: Set up model self-illumination and dynamic texture effects

3.1. Assign the texture map to the material ball of the side model, and set the self-illumination color and other parameters. At this time, you will have a static texture effect.

3.2. At the bottom of the current property panel, click Add Component to add the MaterialMotion component (the MaterialMotion plug-in is integrated into the Unity-glTF-Exporter-master plug-in and has been installed in step 2.3)

3.3. Set the parameters in the plug-in as needed to make the texture have a motion effect, among which

① Material : Represents the selected shader,
② Shader ProPerty : The selected shader attribute, which can be Albedo, Normal Map and other maps. Currently, what we need to move is the Emission self-illumination map; ③
Motion Type : The movement method of the texture, Currently, WebGL supports two methods: Scrolling and Scale;
④ U Curve, V Curve : the movement of the texture in the UV direction;
⑤ Speed : the movement speed of the texture

. Effect:

3.4. Export the model to gltf

3.5. Copy all exported files to SuperMap iClient for Cesium and load them as static files.

 var url = "./SampleData/gltf2/baimo2_-21168.gltf";
 var gltf = viewer.entities.add({
    
    
      name: "gltf",
      position: new Cesium.Cartesian3.fromDegrees(116.458110477583400 - 0.002034006, 39.912527169275549 - 0.005072179, 0),
      model: {
    
    
        uri: url
      }
 });
 viewer.zoomTo(gltf);

PS:
Data and plug-in address: Link: https://pan.baidu.com/s/1soqkG-fwwU44ycZmVlmlPw
extraction code: 6655