3D network topology diagram based on HTML5 and WebGL

Now, 3D models have been used in a variety of different fields. The precise models used in the medical industry to make organs; The film industry uses them for the people, objects, and real movies that they use; the video game industry takes them as resources in computer and video games, and in science they are used as a precise model of compounds; the construction industry uses them to showcase proposed buildings or landscape performance. ; The engineering community used them to design new equipment, vehicles, structures and other applications; In recent decades, the Earth sciences have begun to build three-dimensional geological models, and 3D models are often animated, for example, in the use of three-dimensional models in feature films and computer and video games. They can be used in a three-dimensional modeling tool or used alone. In order to be easy to animate, it is common to add some extra data to the model, for example, some human or animal three-dimensional models have a complete skeletal system, so that the movement will appear more realistic, and can be controlled by joint and bone movement.

All of these have made our front-end developers feel that if we can achieve 3D effects without learning Unity3d or other game development tools, we can control the movement or direction precisely by the code ... So I took advantage of the HT for Web Components to achieve a small example, using the most of the features of HT in the components of the module, to do this example is to have a good grasp of the components, try to put in an example, then others have the need to refer to, but because it has never achieved 3D effect, Plus now the manual is not very complete, so this example is still a bit difficult for me.

This example location: http://www.hightopo.com/demo/3DTopology/index.html

Let's take a look at the overall implementation:

Using the HT for WEB, the existing 3d template to create a three-layer backplane is not a problem, the question is how to put the first layer of the figure "Computer" and "machine enclosure" on it? I was down on the net in the obj format file, and then I used the HT.DEFAULT.LOADOBJ (Objurl, mtlurl, params) function in HT to load the model in, where the params section could refer to HTTP.// Www.hightopo.com/guide/guide/plugin/obj/ht-obj-guide.html, the code is as follows:

Ht. Default.loadobj (' obj/Machine enclosure pieces 1.obj ', ' obj/machine enclosure pieces 1.MTL ', {cube:true, center:true, Shape3d:' Box ', Finishfunc:function(Modelmap, array, rawS3) {window.raws3=rawS3; if(modelmap) {Device2= CreateNode (' box ', Floor1); DEVICE2.P3 ([x1-120, y1+13, z1+60]);  　　　　DEVICE2.S3 (rawS3);  　　　　Createedge (Device1, Device2); Device3= CreateNode (' box ', Floor1);  　　　　DEVICE3.S3 (rawS3); DEVICE3.P3 ([x1+120, y1+13, z1+60]);      　 Createedge (Device1, Device3); }      }  }); 

"Computer" has a red stereo can rotate "warning", is dependent on HT. Default.setshape3dmodel function (HT for WEB Modeling manual) registered a 3d model, in HT, there are a lot of encapsulated modeling functions, the comparison is based on the sphere, cylinder, cube, etc., Here I'm using a ring-shaped method Createringmodel to generate "warning" the outermost ring, the upper part of the exclamation point is the Createsmoothspheremodel constructed sphere, The next part of the exclamation point is a cylinder constructed with Createsmoothcylindermodel. I started directly using the 3d model in the encapsulated function, resulting in the function is not known to use the parameters are what to do, and do not understand how the 3d model is formed, and then re-read the front of the "model base", only to know the original 3d model used a face, the most basic is the triangular surface, After the complex surface is formed by a plurality of triangular faces, and then rotated around a particular axis to form, of course, this axis is for you to decide, different axes can generate different shapes, for color and other style aspects of the settings can refer to the HT for WEB style manual. As for how to make this 3d model spin, HT encapsulates the Addscheduletask (Task) method, and I call a rotation function setrotation in the HT package in the third layer of the Task to set the order and direction of the rotation and specify the rotated object. Here's how to customize the 3d model of "warning" (note: Because the model of this example is a custom combination, if you want to set the color of the overall model to use the "All.blend" Style property):

varRingmodel = ht. Default.createringmodel ([8, 1, 10, 1, 10,-1, 8,-1, 8, 1],NULL,NULL,false,false, 100); varSpheremodel = ht. Default.createsmoothspheremodel (8, 8, 0, math.pi*2, 0, Math.PI, 2); varCylindermodel = ht. Default.createsmoothcylindermodel (8,true,true, 1, 2, 0, math.pi*2, 8); vararr =[{r3: [Math.PI/2, 0, 0], color: ' Red '},{Shape3d:spheremodel, T3: [0, 4, 0], color:' Red '},{Shape3d:cylindermodel, T3: [0,-3, 0], color:' Red '      }  ]; Ht. Default.setshape3dmodel (' Alarm ', {Shape3d:arr}); 

To achieve the 3D interface to show 2d images, as long as the usual way to go, because HT Graph3dview and other components of the root are div, the div generated by the image is the original js,new image (), and then the image src and size assignment, and add to the 3d panel on the line, note that this is added to the bottom of the 3d Div, to use G3d.getview (). AppendChild to add, we can also see traces of dashed lines on the pipeline, which is by constantly changing the "shape3d.uv.offset" Parameters to achieve the special effect of pipe flow, please refer to the HT for WEB shape manual for details.

To move a 2d image over a 3d pipeline is to use g3d.toviewposition (position) to get the two-dimensional coordinates of the 3d model, which is the 3d coordinate of the three-dimensional model. We can direct the points on the polyline pipeline into the toviewposition function, this way to get the points on the pipeline in HT has encapsulated three functions getlinecacheinfo, Getlinelength, Getlineoffset, This allows you to directly get to the two-dimensional coordinates, and then set the IMG coordinates up, the following is the IMG image moved on the pipeline code:

varDelta = 10; Params={frames:infinity, interval:50, Action:function(V, t) {varLength = (polyline.a (' total ') | | 0)% polyline.a (' length ') +Delta; varCache =ht.          Default.getlinecacheinfo (Polyline.getpoints (), polyline.getsegments ()); varLineLength =ht.          Default.getlinelength (cache); varoffset =ht.          Default.getlineoffset (cache, length); Arr=[Offset.point.x, Offset.point.y, offset.point.z]; varPosition =g3d.toviewposition (arr); Img.style.left= (position.x-5) + ' px '; Img.style.top= (position.y-5) + ' px '; Polyline.a (' Total ', length);  }  }; Anim= Ht. Default.startanim (params);

You can see the second layer in the picture of the cube on the word "SDH", I was set Shape3d.top.img:imgURL to achieve, this side of the Imgurl can be the relative path of the picture, it can also be HT with HT. The Default.setimage declares the name of the IMG and can also be a picture constructed in JSON format. In HT, 2D text appears on the 3D, the font will appear around the "sawtooth", this time as long as the "label.transparent:true" can be set.

We can also see that there are two special polygonal "parallelogram" and "trapezoidal" on the second layer, because before the customer said that they did not know how to use the Createextrusionmodel model function (HT for WEB Modeling manual), I simply wrote a bit, Parallelogram is based on the Createparallelogrammodel model function, this function is relatively simple, Createextrusionmodel (array, segments, top, bottom, resolution, Repeatuvlength, tall, elevation), array is the coordinate point of the graph you want to form, this side is just for the plane graphics on the XZ axis, segments refers to how to connect these coordinates points, can refer to the HT for WEB shape manual, Top and bottom is to let you choose whether there is a top or bottom, resolution the number of differential segments, when we describe a curve, we may just confirm a few individual points and then divide the line between each two points into multiple segments, so that this segment will become smooth, HT for the user to be able to easily manipulate these segments, it encapsulates this parameter, repeatuvlength default is empty, set the value of the top and bottom of the map will be repeated according to the length value, tall the height of the model, the default is the 5,elevation model center y axis position, The default value is 0, which allows the plane on the xz to rotate around the y axis.

The bottom of a circular effect is achieved through an algorithm, ring to confirm how many elements of this ring, and then calculate the angle between every two, in the pass sin, cos to calculate the position of each element, the following code is drawn:

names = [' Device 2 ', ' Device 3 ', ' Device 4 ', ' Device 5 ', ' Device 6 ', ' Equipment 7 ', ' Equipment 8 ', ' Equipment 9 '];  Names.foreach (function(name, index) {  = x, y = x, angle = N, r = +;   = x3 + Math.sin ((2 * math.pi/360) * ANGLE * index) * R;   = z3 + Math.Cos ((2 * math.pi/360) * ANGLE * index) * R;  　　　　= Createrect ([x, Y3 + +, Y], [w * 0.1, H * 0.1], ",",Floor3);  Createedge (device5, device);  

3D network topology diagram based on HTML5 and WebGL