Web 3D Smart Digital Room, HTML5+WEBGL (THREEJS) built

 The threshold for using 3D technology in H5 is lower, based on WebGL (THREEJS), a subset of OpenGL's browsers, supporting most of the major 3D function interfaces. Currently the mainstream browser has better support, IE needs 11. Recently, the development of Web 3D computer room has been over, there is time to organize some of the results of this period. Mainly involves the use of H5, JS, WebGL technology.

Goal

  is the engine room 3dhttp://www.ipleasure.cn/3droom/

Machine room cables and cable racks

  the connection and connection of cables is the focus of the Administrator's attention. Network devices or server devices in a rack are connected via ports and cables, making up a network of a certain structure. and the direction of the cable in physics through the naked eye is difficult to see clearly. More cables will be connected from the cabinet, extended to the roof or under the floor of the concealed works (such as the cable rack) fixed and wiring, with the naked eye is more impossible to observe. At this moment, the 3D room interface can clearly display the cable from the port to the line rack and then to the port of the Physical route, convenient for administrators to understand the network and management of the line.

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:

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.

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. Alarm laser- to-fire anti-theft in a variety of scenarios has been commonplace:

Rack Free Space

Once 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:

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.

Power line

Connection management can include strong and weak electricity, audio and video wiring trace 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.

Asset Management functions

View computer room hardware, software resource information and real-time data. Machine room administrators can quickly check the health of the device, including the design of basic information (IP address, number of U, running software information, etc.) and real-time data (CPU, hard disk, memory utilization, upper and lower bandwidth utilization, flow rate, etc.), the device shelves down.

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.

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 attached to the rack.

More details and functional improvement follow-up, interested can leave a message or email [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.

Web 3D Smart Digital Room, HTML5+WEBGL (THREEJS) built