Create the most beautiful HTML5 3D room (third quarter, new asset management, dynamic ring monitoring and other effects)

Originally thought this time the computer room Asset Management project is over, can rest a rest, elder brother or is too naïve. Our great party has won the second phase of the project, the oath of his brother's talent to play to the extreme. National Day holiday also did not seriously rest a few days, obstinately to people toss out a demo, plus capacity management, power line, alarm cruise These practical functions, as well as temperature and humidity, wind direction, access control, video monitoring effect . Brother This will show you the results, collect the knees, find the sense of existence.

Yes, the first time to see the children's shoes, here are the top two links:

First season: How to build a 3D room scene based on HTML5 and WebGL from scratch
Second quarter: Rich scene and function, including cabinets, equipment, routing, path planning and other functions

Party a abuse, the idea is relatively clear, the first focus on three-dimensional presentation and static asset management, the second focus on dynamic ring monitoring, so basically a more complete data center monitoring system came out. Needless to say, this began to give you (hooves) Shaoxing (Joseph).

Interface beautification

This time first did some interface beautification work, recently with the designer MM cooperated well, sure enough interface grade also improved.

Right-click menu adjustment

With the more and more functions on the demo, the right button is not enough, plus a friend to reflect the right-click menu is a bit hidden not easy to find, I put all the functional effects from the toolbar button to enter, direct vertical display on the left side, the effect is good:

Dynamic Customer Information

The last time the asset code on the top of the cabinet was confirmed by the customer, this time try to dynamically generate customer information on the machine enclosure floor, this is the advantage of 3D Ah, where I posted where free.

Other decorative Details

The last time to find the CCTV Anchor TV screen decisively be spit groove, it seems that we are still very serious in the discussion of the problem, so this time I also changed the TV screen to a statistical chart, the addition of special and timely posters, to give the brother a praise?

Asset Management functions

The above are some small changes in the interface, the following for everyone on a few hard dishes.

Rack free Space

When the server is on the shelves, it will occupy and separate the space of the cabinet. It is a very important daily work to understand the occupancy of each rack and the size of free space in the whole machine room. The 3d is the right place to look: We have the server occupied space with white blocks, there is free space depending on the size of the different color blocks to fill, there is the effect below:

The color of the picture is not only for good-looking, the above 1-2u space with red, 5U below the purple, through different colors to indicate the number of consecutive remaining space, white indicates that the space has occupied, so for the computer room managers, can quickly master the occupancy of the entire computer room. When the engine room is on the shelves of a 5U device, we can see where there is a purple color block, and quickly set out where to shelves.

To achieve this effect is very simple, a simple idea: After switching the space view, first the original cabinet hidden, and then in the same place according to space and equipment situation to create a number of different cubes to list. The color of the cube is adjusted according to the height of the cube. In order to increase the visual effect, you can pay attention to the cubic block not exactly close together, you can leave a little space to increase the three-dimensional sense; free squares set a certain degree of transparency, and the white space to form a certain difference; set a certain anti-luminosity, increase the texture of the color block. Such as:

Enclosure Utilization

There is also a requirement for the project to show the overall space utilization of the enclosure. The usage rate does not show exactly where to occupy the free space, as long as it shows a whole use scale, relatively simple. The cabinet position is displayed with a wireframe, and a cubic block that is highly proportional to the usage is displayed, similar to a bar chart. Set the color, lighting and other properties to make it look more realistic:

Pure 3d "animation" out of the bar chart, but also to bind the real data, but also a great application. GIF is not very good, want to see the high-definition animation of friends, or directly read the source program it.

Alarm Cruise

In the previous article, has introduced the use of equipment alarms, which further increased the function of the alarm cruise, that is, when an alarm occurs, automatically push the lens to the point of failure, and display fault information, which is the role of alarm cruise. The following figure shows that when an alarm occurs, the lens automatically roams in the scene, looking for the door of the machine, entering, pushing the faulty enclosure, opening the cabinet door, pulling out the faulty device, the board, and displaying the fault details.

Power Environment Monitoring

Power environment monitoring objects are mainly engine room power and environmental equipment, such as power distribution, UPS, air conditioning, temperature and humidity, leakage, access control, security, fire, lightning, and so on, these will usually have an independent collection and monitoring system, I need to do is the effect of the dynamic ring 3D rendering, and the system's real data docking.

Temperature monitoring

Temperature monitoring is an important part of power environment monitoring in engine room. Room inside a large number of equipment operation to generate a lot of heat, need to monitor the hot spot in time to avoid overheating caused equipment failure. In our project, each cabinet has a temperature collector, each cabinet longitudinal also has a plurality of temperature sensors, can be collected through the background interface. With this data, the temperature can be presented. The conventional method is to display temperature numbers, which is not very intuitive. The trendy point of play is to show the temperature cloud. That is, according to the temperature sampling point dynamic generation of a gradient temperature field cloud image, and then affixed to the floor, so that the temperature can be more intuitive to observe the changes in space.

The temperature cloud image simulates the process of thermal decay and leaves traces on the floor. Similarly, vertical devices are also generated by temperature values to generate different temperature maps to be affixed to the rack, so that at a glance can see the entire cabinet where the hot spot, in order to check the failure or adjust air conditioning airflow.

For locations where there is no cabinet, you can display the temperature cloud by adding a vertical space slice:

In the cabinet next to the vertical virtual slicing, and on all of these surface temperature collection, rendering. We can observe the change of temperature with the change of air flow and space, so as to know the hot spot distribution of the whole space. You can add more slices as needed, but too many slices will cover each other and affect the visual effect.

The code for generating the temperature field is as follows. Need to pass in the temperature acquisition point information on the rack and rack:

Createsidetemperatureimage: function(rack, count){        varWidth=2;varHeight=rack.getheight ();varStep=height/count;varboard =NewTemperatureboard (Width,height,' V ', Height/count); for(varI=0; i<count;i++) {varValue=0.3+Math. Random () *0.2;if(value<4) {value=Math. Random () *0.9; } board.addpoint (width/2, Step*i,value); };returnBoard.getimage (); }

The above temperature values are randomly generated and can be connected to actual values in the project.

Air conditioning Wind Direction

Air conditioning cold flow in the engine room is also a need to monitor the business. The general cold wind blows out from under the floor and flows through the cabinet. If there is a channel, the cooling efficiency of the cold air will be better. Shows how the cold wind flows. The arrows are displayed with a flowing animation effect.

Changes in the color of the air can be seen as the changes in the temperature of the flow. (The following is a motion picture, as if it is to be poked open to move)

To do this, first create a Surface object, and then add a map of the arrows above it. Then enable an animation to control the displacement of the map, you can achieve the effect of animation flow:

Toggleairview:function (network) {Network. Airview=!network. Airview;if (!network. Getdatabox(). Airplanes) {Network. Getdatabox(). Airplanes=demo. Createairplanes();} for (Var i=0; I<network.getdatabox (). airplanes.length;i++) {var plane=network. Getdatabox(). AirplanesI;if (Network. Airview) {Network. Getdatabox(). Add(plane);Plane. Airanimation. Play();}else{Network. Getdatabox(). Remove(plane);Plane. Airanimation. Stop();}        }           }

Smoke Monitoring

Smoke monitoring sensors are commonly found in buildings today, and alarms occur when there is smoke. Simulating the occurrence of smoke, we use a cloud of smoke to render at the ignition point, increasing the realism of the scene. At the same time through animation, to simulate the smoke out of the situation.

At the same time, the position of the fire extinguisher in the scene is highlighted and animated arrows to indicate the location of fire extinguishing equipment, timely rescue.

However, this feature may not be available for egg use. Once the engine room fire, the consequences will be catastrophic, not a few fire extinguishers can be solved. It is best to do disaster preparedness and routine maintenance.

Leak monitoring

Computer room In addition to fear of fire, and then afraid of water. The consequences of leaking in the engine room may not be as small as fire. Water will directly lead to equipment and damage, should be vigorously protected. Water is usually produced by leaking pipes or equipment, and can be monitored by laying a leaky rope on the floor. Shows the situation when laying multiple leaky ropes in the engine room and leaking water:

The leak point can be precisely detected by a leaky rope, which is precisely positioned and displayed in a 3d scene and indicates its location via a label. In order to observe the clearer, the dynamic virtual machine cabinet and the room and other objects, can see clearly the direction and distribution of the leaking rope.

Anti-theft monitoring

The room will strictly restrict the entry of personnel. For sensitive areas, can be placed anti-theft infrared or laser probe, when a person through, will immediately launch an alarm, play to prevent entry and anti-theft effect. This kind of laser anti-theft in a variety of movies are not uncommon:

Seems to escape the Chamber of Secrets, expand training, such as the game inside have, rapid progress in the Chopsticks Brother laser array can I see sorrow died, the next time the company organizes activities can be engaged in a:

Back to the computer room, not to make a film in general without cloth into dragnet, a more structured line can be:

The inside of the ray can be created by the line object, set the color, transparency, reflective degree and so on. It seems that the room to go in to steal something is quite difficult.

Power line

Along this line of thinking, using line objects, you can create more connection management. For example, the wiring traces of the power supply display. Each cabinet of the power line layout of the line, can be displayed by different colors and trends. This is more intuitive than a traditional table or 2d graphic display.

Security Monitoring

Security monitoring, the most traditional practice is video surveillance, in the computer room in various locations put on the camera, and then focus on the screen monitoring.

Video surveillance

In our 3D room, the location of the camera can be configured in JSON, and the camera can be modeled in advance based on the different types and dynamically loaded according to the JSON configuration. ：

Double-click the camera to connect the camera to bring up real-time monitoring video. Here's a fake video instead.

Access monitoring

Another important part of security is the access control system, usually access control equipment manufacturers will bring their own management system, we only need to put the system data into the platform. In 3D rendering, we can show the location of the access control:

When you double-click the Access controller, the information about the person is displayed:

Three-dimensional drag and drop function

A lot of friends get the program to ask how to directly in the interface to drag and drop the mobile cabinet equipment. Moving objects through the API is not complicated, object.setposition (x, Y, z) is OK. However, in the interface if you drag the mouse directly in the 3d will be considered how easy to operate. Click this button, you can switch to the editing mode, at this time you can directly in the interface to move the position of the motive cabinet.

In edit mode, you can select a cabinet by clicking on the mouse. At the same time, 3 fan-shaped and 3 arrows appear in the cabinet. Any sector drag in the point, you can pan on the same plane, click on any arrow to drag, you can move up in this axis. In order to see the coordinate values, the current x, Y, z values are displayed in the mouse tip, as well as the values of rotation and scale. Such as:

Of course, in this case, the cabinet can only allow panning at the horizontal level, and there is no practical meaning in portrait panning, which can be controlled by code. The following code controls whether to allow dragging, scaling, rotation, and so on:

varnew mono.EditInteraction(network);        editInteraction.setShowHelpers(true);        editInteraction.setScaleable(false);        editInteraction.setRotateable(false);        editInteraction.setTranslateable(true);

In this way, we can be very wayward to the room to customize the layout, a lot of home decoration design tools are the same principle.

Other

The above is the main content of the big update, according to the needs of the project, the program also made a lot of other small improvements, specific people can see for themselves. Includes wired display of real-time traffic information (e.g.:)

Animate the loading process of the enclosure device:

More details of the improvement will not repeat, interested students can leave a message or e-mail to [email protected], welcome to discuss together! If you want to see what more effect can also give me a message. Time is limited, many details can not be written in detail, please forgive us.

Copyright NOTICE: This article for Bo Master original article, without Bo Master permission not reproduced.

Create the most beautiful HTML5 3D room (third quarter, new asset management, dynamic ring monitoring and other effects)