HT for Web custom 3D model of WebGL application, htwebgl

HT for Web custom 3D model of WebGL application, htwebgl

Many of my friends asked how the 3D table design model in the article "HTML5 Web Client's five offline storage methods summary" was generated by importing the table design model designed by 3dmax, and then import it to the HT for Web System in obj format for control. This method is especially suitable for application scenarios of complex models, however, many applications of the monitoring system do not require professional artists to use professional 3D editing tools, many applications can be satisfied by using the pre-defined and built-in custom 3D model APIs of HT for Web. Here we will introduce the custom 3D model applications in several scenarios.

The createRingModel function provided by HT is used to generate a corresponding ring 3D model by editing 2D polygon. This function is suitable for building vase bowl and other ring symmetric objects. In addition to the createRingModel, the custom model examples in the HT modeling Manual also use createExtrusionModel and other custom model APIs to create a dining table, chair, and wall scene. The effect is as follows:

The HT built-in basic model also has many parameters that can be adjusted to set multiple models. For more information, see the following example in the HT modeling manual:

Custom models can also be used to build common telecom network management monitoring models such as data centers, frames, boards, and ports:

The 3D model and Tree component of the EMS device management system use HT's powerful and flexible model and graphic data binding function to achieve data sharing between Tree-based custom icons and 3D custom models, real-time consistent refresh effect. The following shows all the JavaScript code in this EMS example:

function init(){                                 dm = new ht.DataModel();                treeView = new ht.widget.TreeView(dm);                                                                                                 g3d = new ht.graph3d.Graph3dView(dm);                          mainSplit = new ht.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){return data.s('label');};dm.sm().setFilterFunc(function(data){return data !== wall;});treeView.setVisibleFunc(function(data){return data !== wall;});                treeView.expandAll();}function register2DImage(){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: 'style@shape3d.color'}}                         ]});     ht.Default.setImage('ems-block', {width: 18,height: 18,comps: [{type: 'circle',rect: [0, 2, 18, 10],background: {func: 'attr@circleColor',value: '#3498DB'                               }}, {type: 'rect',rect: [4, 14, 10, 3],background: {func: 'attr@rectColor',value: '#3498DB'                               }}                           ]});                 }function register3DModel(){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: 'attr@circleColor',value: '#3498DB'}     },{shape3d: 'box',s3: [1, 0.2, 1], t3: [0, -0.7, 0],color: {func: 'attr@rectColor',value: '#3498DB'}}]);                  }function addModel(){wall = new ht.Shape();wall.setName('Wall');wall.setPoints(new ht.List([{x: -750, y: 750},{x: -750, y: -750},{x: 750, y: -750},{x: 750, 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);                                               var frame = new ht.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);                                var colors = ['#9C8CE7', '#00C59D', '#A741B6', '#F5C700', '#31485F', '#F81F25', '#00B862', '#3B7DA7'];for(var i=0; i<6; i++){var pane = new ht.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(var j=0; j<8; j++){var block = new ht.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);}                }