WebGL 3D Intelligent Building Monitoring system based on HTML5

Objective

The field of intelligent monitoring has been involved in the major areas, industrial control, telecommunications, electricity, rail transportation, aerospace and so on, in order to reduce the consumption of personnel, monitoring system is essential. Before I wrote a 2D intelligent subway monitoring system widely praised, suddenly feel that since 2D so popular, then 3D of demand is certainly very big, 3D after all is more intuitive than 2D, so with this example and this article. Intelligent Monitoring System in the application of the 3D more widely in addition to the 3D room, I think is the building monitoring, but before doing a lot of computer room aspects of the Demo, so the final decision to do 3D building monitoring system.

Code Generation Scenario Setup

The entire scene is built from a three-dimensional component, with the ListView list component on the left, which allows you to freely switch between the various monitoring floors and buildings by clicking on each item in the ListView list component:

DM =Newht. Datamodel (); G3d=NewHt.graph3d.Graph3dView (DM); Relativelayout=NewHt.ui.RelativeLayout ();//relative layouts can be used to lay out the interfacevarHt3dview =NewHt.ui.HTView (G3D);//Placing 3d ComponentsRelativelayout.addview (Ht3dview, {//Add component display to relative layout, parameter one is component name, parameter two can set width height, alignment etc PropertiesWidth: ' match_parent ', Height:' Match_parent '});varListView = Window.list =NewHt.ui.ListView ();//List Components for(vari = 1; I <= 15; i++) {    vardata =NewHt. Data ();//Create a nodeData.setname (' floor ' + i);//Set node nameLISTVIEW.DM (). Add (data);//Add a node to the list component}relativelayout.addview (ListView, {//Add a ListView component to the layoutAlign: ' left ',//set alignment left-justifiedvalign: ' Top ',//set vertical alignment to topMARGINTOP:120,//set the top of the margin to 120 pixelsMarginleft:60,//set the margin to the left of 60 pixelsWIDTH:80,//Set Width toheight:480,//set height to 480index:100//set the stacking order of elements}); Relativelayout.addtodom ();//add components into body

Load model

The entry page shows the entire city scene, via HT. The Default.loadobj method loads the OBJ model:

varLoadcity =function() {ht. Default.loadobj (' Obj/city.obj ', ' obj/city.mtl ', {//Load ModelCentertrue,//whether the model is centered, false by default, and set to true moves the model position to center its contentsCubetrue,//whether to scale the model to the size range of Unit 1, default to FalsePrefix: ' obj/',//The picture path prefix, which is the prefix added before the MAP_KD value, and if it is a relative path, the path to the HTML page that loads obj is referencedShape3d: ' City ',//if the Shape3d name is specified, HT will automatically build an array of all of the parsed material models and register it with that nameFinishfunc:function(Modelmap, array, rawS3) {//callback handling for loading the OBJ modelCITY.RAWS3 = rawS3;//set the RawS3 property of the variable city object The RawS3 property in this function is the original size of the OBJ modelShowcity ();//Create a node setting node Shape3d for City display city.obj and CITY.MTL content        }    });}

The loading of the industrial floor model is similar, here is not to repeat.

Adding components directly into the scene will not have the relevant action, you must listen to the trigger of the event to perform subsequent operations, where the selected change event in the data selection container is monitored:

// list click listview.dm (). SM (). MS (function(e) {//  Listen for selected change event    if (e.kind = = = ' Set ') {//  Set listener event        Showfloor ();   Show Floor     }});

Call model

In order to simply set up an industrial floor of the OBJ model, by invoking different obj models can display different industrial floor scene, that is to say we can pass HT. The Default.loadobj method loads the model, sets the Shape3d property of the industrial control floor model, and then sets it to the Shape3d property of the node, or directly sets the node's Shape3d property to the JSON-formatted obj file, which is the first way to do this:

varShowfloor =function() {G3d.setcenter ([210, 0, 210]);//Set the center position of a 3d componentDm.clear ();//clears all nodes in the data container    varRawS3 = FLOOR.RAWS3,//get the original size of the OBJ modelnode =NewHt. Node ();//to create a new nodeNODE.S ({//to set the style properties of a node' Shape3d ': ' Floor ',//The value of this setting is HT. The value of the Shape3d property set in Default.loadobj' Wf.visible ': ' Selected ',//display a wireframe outside the node when the selected node is set' 3d.selectable ':false//setting node is not selected    }); NODE.S3 (raws3[0]/10,raws3[1]/10,raws3[2]/10);//set the size of the node to One-tenth of the original sizeNODE.P3 (140, 0, 230);//set the location of the nodedm.add (node);//Add a node to the data container    //add four "cameras" to a nodeCreateNode ([0, 20, 0]); CreateNode ([110, 20, 220]); CreateNode ([330, 20, 420]); CreateNode ([210, 20, 120]); CreateNode ([420, 20, 120]);};

Here, by the way, another simple method of invoking the OBJ model is to directly set the node's Shape3d property to the imported JSON-formatted file:

var New ht. Node (); NODE.S ("Shape3d", "./symbols/city.json");

However, the JSON content must have the following elements:

{    "modeltype": "obj",//  must set this property to obj format    "obj": "./obj/city.obj",//  You must set the Obj property    "MTL": "./obj/city.mtl"//  This item can be write-writable, if you need to set the style of the OBJ model (such as color, etc.), you must set this item }

However, this pattern does not apply to this scenario because my model is somewhat large and needs to be called to the original size of the obj model RawS3 attribute divided by a certain scale before being displayed.

Creating patches

The CreateNode method is mentioned above, which is primarily used to create nodes that are displayed as "patch" types. The so-called "patch", that is, there is only one face. Through this way of displaying a vector on a face, the result will be better than displaying a picture on a hexahedral, the 3D scene may not be able to see the effect when it is simple, if the scene is stuck, we can see the advantage of "patch" immediately:

functionCreateNode (P3, S3) {varnode =NewHt. Node ();//to create a new nodeNODE.P3 (p3);//set the location of the node    //Node.s3 (S3);node.s ({' Shape3d ': ' Billboard ',//The shape3d type of the Set node is Billboard type, which is displayed as "Patch"' Shape3d.image ': '/symbols/intelligent building/camera.json ',//3d graphics Overall map' Shape3d.image.cache ':true,//If the map is a vector, cache (performance will be improved after caching)' Shape3d.autorotate ':true,//is the camera automatically facing' Shape3d.transparent ':true,//determines whether 3d graphics are transparent         //' shape3d.alwaysontop ': true,//is always at the top' Shape3d.fixsizeonscreen ': [38, 47]//whether a fixed size is rendered on the screen regardless of the zoom distance, the value can be true (using the picture or vector itself size)/false, or [100, 200] (corresponds to a wide height)    }); Dm.add (node);//Add a node to the data containerg3d.invalidateshape3dcachedimage (node);//the cost of the cache is that it needs to be updated    returnnode;}

Event interaction

Then I thought, since the 3D model shows up on the floor, how do I get back? Which way to return the best? Want to think about to compare no vainly disobey feeling or click the list component is better, the top of the list component is selected:

function (e) {//  Monitor Click event    e.preventdefault ();   block default action    if (e.clienty-120 <) {        showcity (); // Show initial 3D building scene        LISTVIEW.DM (). SM (). CS (); // list settings clears all selected elements     }});

All code ends!

Summarize

This 3D Intelligent building monitoring system is very simple, for the technical staff is completely no challenge, the main work in the art, so that, if you want to add more complex requirements, technicians can devote themselves to the product, rather than some cumbersome 3D model of the building. In a word, I think this Demo is very representative, so I want to share it with you and discuss the trend of the front end.

Http://hightopo.com/demo/intelligent-building/index.html

HTML5-based WebGL 3D Intelligent building Monitoring System