The WebGL app for the HT for Web custom 3D model

A number of friends asked how the 3D meter model of the five HTML5 WEB client summary of offline storage examples was generated by importing a 3dmax designed meter model and then importing it into the HT for web system via the obj format, This approach is particularly well suited for complex model scenarios, but many applications for monitoring systems do not require professional artists to use professional 3D editing tools, complete with the HT for Web pre-defined and built-in custom 3D model API to meet many applications, here are a few scenarios of custom 3D model application.

is to use the Createringmodel function provided by HT to create a corresponding ring-shaped 3D model by editing a 2D polygon, which is suitable for a ring-symmetric object such as a vase bowl. In addition to the Createringmodel, the Custommodel custom model example in the HT modeling manual has built a table chair and wall scene with more custom model APIs such as Createextrusionmodel, with the following effects:

The HT built-in base model also has many parameters that can be adjusted to a variety of model effects, see the following example of the HT Modeling manual:

Custom models can also be used to build common telecom network management models such as room, frame, board and Port:

The EMS Device Management System Example 3D model and tree components through the HT powerful flexible model and graphics data binding function, so as to achieve the tree custom icon and 3D custom model data sharing, real-time consistent refresh effect, the following is the EMS example of all the JavaScript code:

functioninit () {DM=Newht.                    Datamodel (); TreeView=NewHt.widget.TreeView (DM); G3d=NewHt.graph3d.Graph3dView (DM); Mainsplit=NewHt.widget.SplitView (TreeView, g3d, ' H ', 0.2); View=Mainsplit.getview (); View.classname= ' main ';        Document.body.appendChild (view); Window.addeventlistener (' Resize ',function(e) {mainsplit.invalidate (); }, false);    Register2dimage ();    Register3dmodel ();                         Addmodel (); G3d.setgridvisible (true); G3d.setgridsize (30); G3d.setgridgap (50); G3d.seteye ([200, 200, 600]); G3d.setcenter ([0, 200, 0]); G3d.getview (). Style.background= ' #F9F9F9 '; G3d.getlabel=function(data) {returnDATA.S (' label ');    }; Dm.sm (). Setfilterfunc (function(data) {returnData!==Wall;    }); Treeview.setvisiblefunc (function(data) {returnData!==Wall;                    }); Treeview.expandall ();}functionRegister2dimage () {ht. Default.setimage (' Ems-frame ', {width:18, Height:18, comps: [{type:' Rect ', rect: [5, 4, 8, 11], BorderWidth:2, BorderColor:' #34495E '            }                             ]}); Ht. Default.setimage (' Ems-pane ', {width:18, Height:18, comps: [{type:' Rect ', rect: [0, 4, 18, 10], background: {func:' [Email protected] '}            }                             ]}); Ht. Default.setimage (' Ems-block ', {width:18, Height:18, comps: [{type:' Circle ', rect: [0, 2, 18, 10], background: {func:' [Email protected] ', Value:' #3498DB '}}, {type:' Rect ', rect: [4, 14, 10, 3], background: {func:' [Email protected] ', Value:' #3498DB '                                               }            }                               ]}); }functionRegister3dmodel () {ht. Default.setshape3dmodel (' Ems-frame ', Ht. Default.createframemodel (0.1, 0, 0.1, {top):true, bottom:true, Back:true})); Ht. Default.setshape3dmodel (' Ems-block ', [{shape3d:ht. Default.createcylindermodel (32, 0, 32,false,false,true,true), R3: [Math.PI/2, 0, 0],color: {func:' [Email protected] ', Value:' #3498DB '}}, {shape3d:' Box ', S3: [1, 0.2, 1], T3: [0,-0.7, 0], color: {func:' [Email protected] ', Value:' #3498DB '            }        }    ]); }functionAddmodel () {Wall=Newht.    Shape (); Wall.setname (' Wall '); Wall.setpoints (Newht. List ([{x:-750, y:750}, {x:-750, Y:-750}, {x:, Y:-750}, {x:Y:750,}    ])); Wall.settall (400); Wall.setelevation (200); Wall.s ({' Shape.border.width ': 5,        ' Shape.border.color ': ' Rgba (20, 20, 20, 0.8) ',        ' Shape.background ':NULL,            ' All.color ': ' Rgba (102, 192, 218, 0.95) ',        ' All.transparent ':true,        ' All.reverse.cull ':true    });                                                   Dm.add (wall); varframe =Newht.    Node (); Frame.setname (' Main Frame '); Frame.seticon (' Ems-frame '); FRAME.S3 (120, 300, 120); FRAME.P3 (0, 152, 0); FRAME.S ({' Shape3d ': ' Ems-frame ',        ' Shape3d.color ': ' #34495E ',        ' label ': ' Www.hightopo.com ',        ' Label.color ': ' White ',        ' Label.background ': ' #3498DB ',        ' Label.position ': 6,        ' Label.t3 ': [-6,-54, 6],        ' LABEL.R3 ': [0, Math.pi/4, MATH.PI/2]    });                                        Dm.add (frame); varcolors = [' #9C8CE7 ', ' #00C59D ', ' #A741B6 ', ' #F5C700 ', ' #31485F ', ' #F81F25 ', ' #00B862 ', ' #3B7DA7 '];  for(vari=0; i<6; i++){        varpane =Newht.        Node (); Pane.seticon (' Ems-pane '); Pane.setname (' Pane ' + (i+1)); PANE.S3 (108, 16, 8); PANE.S ({' Shape3d ': ' Box ',            ' Shape3d.color ': ' #ECF0F1 '        });        Pane.sethost (frame);                             Pane.setparent (frame);                Dm.add (pane); if(I < 2){             for(varj=0; j<8; J + +){                varblock =Newht.                Node (); Block.setname (' Block ' + i + ' * ' +j); BLOCK.S3 (8, 8, 12); BLOCK.P3 (-39+j*11, 1, 0);                Block.sethost (pane);                 Block.setparent (pane); Block.seticon (' Ems-block '); Block.s ({' Shape3d ': ' Ems-block '                }); if(i = = 1) {block.a ({' Circlecolor ': Colors[j],' Rectcolor ': ' #00F2CF '                    });                                                    } dm.add (block); }                             }Else{pane.setname (' Pane ' + (i+1) + ' [Empty] '); PANE.S ({' Shape3d.color ': ' #BDC3C7 '            }); } pane.p3 (0, 265-i*27, 54); }                }

The WebGL app for the HT for Web custom 3D model