SuperMap iClient3D for WebGL tutorial (special effects) – scan line_scene.scaneffect ring scan_supermapsupport’s blog

class=”markdown_views prism-atom-one-dark”>

WebGL has many special effects. This article will tell you how to realize the effect of scanning lines. This function can be used when it is necessary to realize the propagation of the scope of accident influence.

1. Turn on special effects

The main interface of the scanning line special effect function is new Cesium.ScanEffect(). Before using the scanning line interface, the scanning function of the scene should be enabled first, as follows

viewer.scene.scanEffect.show = true;
 

2. Construct scan lines

Then set the center point of the scan and which scan mode to use (circular scan or linear scan)

viewer.scene.scanEffect.centerPostion = new Cesium.Cartesian3.fromDegrees(106.50296584992466, 29.51555839072486, 2.0);//Need to use world coordinates
 viewer.scene.scanEffect.mode =Cesium.ScanEffectMode.CIRCLE;//Cesium.ScanEffectMode.LINE is the line scan mode
 

Third, scan line effect optimization

The above code can construct a scanning special effect, but this special effect is a bit monotonous, we can give the scanning line a texture and color to show a more cool effect

scene.scanEffect.textureUrl = "./images/scan texture.jpg";
 scene.scanEffect.color = Cesium.Color.RED;
 scene.scanEffect.speed =3 ;//unit: m/s
 

In addition to the above parameters, the line scan mode has a unique scan parameter, namely the line scan direction. The default direction of line scanning is from west to east. If you need to change its direction, you need to give it a direction. You can calculate the direction by two coordinates, and set it as follows

var dir = new Cesium. Cartesian3();
 Cesium.Cartesian3.subtract(centerPosition, viewer.scene.scanEffect.centerPostion, dir); // Get the scan direction vector
 viewer.scene.scanEffect.lineMoveDirection = dir;
 

Conclusion
Scanline special effects can be combined with examples such as the impact of explosion centers or earthquake propagation in real scenes to show the extended effect of accidents. For the complete effect, you can check the official website example http://support.supermap.com.cn:8090/webgl/examples/editor.html#scanLine