Bid farewell to traditional Industrial Internet and Improve digital control thinking: 3D configuration distributed energy Station

// Create a 3d topology view
this.g3d = new ht.graph3d.Graph3dView();
this.g3dDm = this.g3d.dm();
// Add the 3D component under the body
this.g3d.addToDOM();
// Change the left and right keys interaction mode
let mapInteractor = new ht.graph3d.MapInteractor(this.g3d);
this.g3d.setInteractors([mapInteractor]);
// Change the maximum elevation Angle to PI / 2
mapInteractor.maxPhi = Math.PI / 2;Copy the code

In order to have visual interactive experience when suspending the building model, highlight mode of the model is set here.

// Set hover highlighting mode
this.g3d.setHighlightMode('mouseover');
// Set the highlight color
ht.Style['highlight.color'] = '#FEB64D';Copy the code

After the scene rendering is loaded, we can animate the industrial process of the distributed power station through the pipeline. Ht. Shape is an extremely powerful graphic type, which can display a variety of 2d and 3D Shape effects on GraphView and Graph3dView components. The extension of HT. PolyLine can realize the function of 3d space pipe. We can use HT.polyline to draw the path of the flow, and use the hT.default.startanim () animation function to perform the call to change the offset value of the UV map on the pipe to achieve the flow effect.

The code is as follows:

animflow() {
    // Animation executes the function
    ht.Default.startAnim({
        duration: 2000.easing: (t) = > { return  t },
        action: (v, t) = > {
            // Get the pipeline node setting UV offset flow animation by obtaining the unique identification tag from the data model
            this.g3dDm.getDataByTag('flow1').setStyle('top.uv.offset', [ v, 0 ]); 
            this.g3dDm.getDataByTag('flow2').setStyle('top.uv.offset', [ v, 0.5 ]);
            this,g3dDm.getDataByTag('flow3').setStyle('top.uv.offset', [ -v, 0.5]); . },finishFunc:  (a)= >{ animflow(); }}); }Copy the code

The data presented in the scene can be connected to some mainstream interfaces, such as Ajax, AXIOS or WebSocket. According to our own requirements for docking and interaction, we can determine whether to use polling call interface or two-way docking for data transmission, so as to meet the need of real-time data refresh. The data carrier can be displayed on the 3D Billboard board connected to HT:

Billboard is also a subclass of HT. Shape, which can be used to define the styleMap property for both 2D and 3D configurations. Of course, users can also set some custom properties in attrObject. In distributed energy station, we set some attribute values for billboard to control the attribute information of bulletin board:

let billboard = new ht.Node();
billboard.s({
    // Set the shpe3D type to Billboard
    "shape3d": "billboard".// Set the image of the bulletin board
    "shape3d.image": "symbols/htdesign/box/panel.json".// Set the bulletin board to always automatically rotate to face the screen
    "shape3d.autorotate": true.// Set the transparency of the bulletin board
    "shape3d.transparent": true.// Set the bulletin board to be immovable
    "3d.movable": false.// Set the bulletin board to always be at the top
    "shape3d.alwaysOnTop": true.// Set the bulletin board to be unavailable
    "3d.selectable": false.// The cache is enabled on the bulletin board
    "shape3d.image.cache": true
});Copy the code

If the map is a vector, performance is greatly improved for a bulletin board with caching enabled. Comparing this example, you can see the difference in performance in the caching mechanism. It can be seen that the caching mechanism is crucial to the overall smoothness of the scene. For some panel information that does not need to be refreshed in real time, we can adopt the caching method. And called in the next update Graph3dView. InvalidateShape3dCachedImage (node) to manually refresh this node, thus greatly improve the performance of the scene:

g3d.invalidateShape3dCachedImage(billboard);Copy the code