preface

Intelligent monitoring has been involved in various fields, industrial control, telecommunications, power, rail transit, aerospace and so on. In order to reduce the consumption of personnel, the monitoring system is essential. Before, I wrote a 2D intelligent subway monitoring system which was widely praised. Suddenly, I felt that since 2D is so popular, 3D must be in great demand. After all, 3D is more intuitive than 2D, so I have this example and this article. Intelligent monitoring system is widely used in 3D in addition to THE 3D computer room, I think is the monitoring of the building, but before doing a lot of Demo about the computer room, so finally decided to do 3D building monitoring system.

Code generation

Scenario building

The whole scene is built from HT for Web 3D components, together with the listView list component on the left. By clicking each item in the listView list component, you can freely switch the scene of each monitoring floor and building:

dm = new ht.DataModel();
g3d = new ht.graph3d.Graph3dView(dm);

relativeLayout = new ht.ui.RelativeLayout(); // The relative layout can be used to lay out the interface
var ht3dView = new ht.ui.HTView(g3d); // Place the 3D component
relativeLayout.addView(ht3dView, { // Add the component display to the relative layout. Parameter 1 is the component name, and parameter 2 can set the width, height, alignment and other properties
    width: 'match_parent'.height: 'match_parent'
});
var listView = window.list = new ht.ui.ListView(); // List component
for (var i = 1; i <= 15; i++) {
    var data = new ht.Data(); // Create a node
    data.setName('floor' + i); // Set the node name
    listView.dm().add(data); // Add the node to the list of components
}
relativeLayout.addView(listView, { // Add the listView component to the layout
    align: 'left'.// Set the alignment to left
    vAlign: 'top'.// Set vertical alignment to top alignment
    marginTop: 120.// Set the top margin to 120 pixels
    marginLeft: 60.// Set the left margin to 60 pixels
    width: 80.// Set the width to 80
    height: 480.// Set height to 480
    index: 100 // Set the stack order of the elements
});

relativeLayout.addToDOM(); // Add the component to the body
Copy the code

Load model

After entering the page, the scene of the whole city is displayed, and the OBJ model is loaded by the method ht.default. loadObj:

var loadCity = function(){
    ht.Default.loadObj('obj/city.obj'.'obj/city.mtl', { // Load the model
        center: true.// Whether the model is centered. Default is false. True moves the model to center its content
        cube: true.// Whether to scale the model to a size range in units of 1. Default is false
        prefix: 'obj/'.// The prefix of the image path is added before the value of map_kd. If it is a relative path, it will refer to the path of the HTML page where obj is loaded
        shape3d: 'city'.// If the shape3D name is specified, HT will automatically register all the parsed material models as an array
        finishFunc: function(modelMap, array, rawS3){ // Used for callback processing after loading obj model
            city.rawS3 = rawS3; // Set the rawS3 property of the variable city object to the original size of the obj model
            showCity(); // Create a node and set the shape3d of the node to display the contents of city.obj and city.mtl for city}}); }Copy the code

The loading of the industrial control floor model is similar, which will not be repeated here.

If a component is directly added to the scenario, there will be no related operations. The subsequent operations can only be performed after the event triggering is monitored. Here, the selected change event in the data selection container is monitored:

// List click
listView.dm().sm().ms(function(e){ // Listen for selected change events
    if (e.kind === 'set') { // Set listening events
        showFloor(); // Show the floor}});Copy the code

Invocation model

var showFloor = function(){
    g3d.setCenter([210.0.210]); // Set the "center" location of the 3D component
    dm.clear(); // Clear all nodes in the data container
    var rawS3 = floor.rawS3, // Get the original size of the obj model
        node = new ht.Node(); // Create a new node
    node.s({ // Set the style properties of the node
        'shape3d': 'floor'.// The value of this item is the shape3D property set in ht.default. loadObj
        'wf.visible': 'selected'.// Set to display the wire frame outside the node when the node is selected
        '3d.selectable': false // Make the node unselected
    });
    node.s3(rawS3[0] / 10,rawS3[1] /10,rawS3[2] / 10); // Set the size of the node to one-tenth of its original size
    node.p3(140.0.230); // Set the location of the node

    dm.add(node); // Add the node to the data container

    // Add four "camera" nodes
    createNode([0.20.0]);
    createNode([110.20.220]);
    createNode([330.20.420]);
    createNode([210.20.120]);
    createNode([420.20.120]);

};
Copy the code

By the way, another easy way to call the obj model is to directly set the shape3D property of the node to the imported JSON file:

var node = new ht.Node();
node.s("shape3d"."./symbols/city.json");
Copy the code

But the content of this JSON must have the following elements:

{
    "modelType": "obj".// This property must be set to obj format
    "obj": "./obj/city.obj".// The obj attribute must be set
    "mtl": "./obj/city.mtl" // This option is optional and must be set if you need to set the obj model style (such as color, etc.)
}
Copy the code

However, this pattern does not work for this scenario, because my model is a bit large and I need to call the original size rawS3 property of the OBj model and divide it by a certain proportion before displaying it.

Rest to create another

HT 

function createNode(p3, s3){
    var node = new ht.Node(); // Create a new node
    node.p3(p3); // Set the location of the node
    // node.s3(s3);
    node.s({
        'shape3d': 'billboard'.// Set the node's shape3D type to billboard type and display to "face"
        'shape3d.image': './symbols/ smart building /camera.json'.// 3d graphics overall map
        'shape3d.image.cache' : true.// If the map is a vector, whether to cache it (caching will improve performance)
        'shape3d.autorotate': true.// Whether to automatically Orient towards the camera
        'shape3d.transparent': true.// Determine whether the 3D image is transparent
        'shape3d.alwaysOnTop': true.// Is it always at the top
        'shape3d.fixSizeOnScreen': [ 38.47 ] // Whether to render a fixed size on the screen regardless of zoom. The value can be true (using the size of the image or the vector itself) /false, or [100, 200] (for width and height).
    });
    dm.add(node); // Add the node to the data container

    g3d.invalidateShape3dCachedImage(node); // The cost of the cache is to update it
    return node;
}
Copy the code

Event interaction

Then I was thinking, since the 3D model of the floor shows, then how to return? What is the best way to return? To see if it would be better to click on a list of components, select the top of the list:

listView.getView().addEventListener('click'.function(e){ // Listen for click events
    e.preventDefault(); // Block the default action
    if (e.clientY - 120 < 50) {
        showCity(); // Display the initial 3D building scene
        listView.dm().sm().cs(); // The list setting clears all selected elements}});Copy the code

End of all code!

conclusion

This 3D intelligent building monitoring system is very simple, for technical staff is completely unchallenging, the main work content is on the art, so if you want to add more complex requirements, technical staff can be fully devoted to the product, rather than some tedious 3D model building. All in all, I think this Demo is very representative, so I’d like to share it with you and discuss the trends on the front end.

Hightopo.com/demo/intell…