Play the 3D model of webgl in HTML5

Time:2021-1-26

Constructive solid geometry has many practical uses. It is used when simple geometric objects are needed, or where mathematical accuracy is very important. Almost all engineering CAD software packages use CSG (which can be used to represent the features of cutting tools and parts that must fit together). CSG is the abbreviation of constructive solid geometry modeling technology. It combines complex model effects by cutting subtract, fusing Union and intersecting operations, and HT encapsulates ht.CSGNode And ht.CSGShape It is often used in the application scene of hollowing out and drilling holes in the wall.

Play the 3D model of webgl in HTML5

CSG objects can be represented by binary trees, in which leaves represent primitives and nodes represent operations. In this graph, nodes are marked ∩ as intersection, ∪ as union, and – as difference. The model or surface provided by CSG looks very complex, but in fact it is just a clever combination or decomposition of objects.
ht.CSGNode Inherited from ht.Node When shape3d attribute of style is empty, it will be displayed as hexahedron effect. If csgnode is adsorbed to the host csgnode or csgshape through sethost, the host csgnode or csgshape can be combined with the adsorbed csgnode primitives for CSG modeling. Please refer to the HT for Web Modeling manual csgnode section for details. Here I use the concept of CSG to write an example, so that you can better understand this concept.
Demo address:http://hightopo.com/guide/gui…
Let’s look at the renderings first

Play the 3D model of webgl in HTML5

As can be seen from the above rendering, we divide the interface into three parts. First, the right part is divided up and down, and then the whole interface is divided left and right. HT is packaged ht.widget.SplitView Divide the interface, and then add the partition component to the underlying Div

dm = new  ht.DataModel (); // data model            
treeView = new  ht.widget.TreeView (DM); // tree component                                                                                                 
gv1 = new  ht.graph3d . graph3dview (DM); // 3D component  
gv2 = new ht.graph3d.Graph3dView(dm);
splitView = new  ht.widget.SplitView (GV1, GV2, 'V', 0.6); // split component 
mainSplit = new ht.widget.SplitView(treeView, splitView, 'h', 0.27);   
                
view = mainSplit.getView();  
view.className = 'main';
document.body.appendChild(view);    
window.addEventListener('resize', function (e) {
    mainSplit.invalidate();
}, false);

The above code is a very common way to add HT component in HTML. For details, please refer to the component section of HT for web getting started manual. There is a point to note when adding HT components with this method, because HT generally uses the absolute positioning method of setting position as absolute, and the basic CSS styles such as left, right, top, bottom, etc. must be set, such as this:

.main {
     margin: 0px;
     padding: 0px;
     position: absolute;
     top: 0px;
     bottom: 0px;
     left: 0px;
     right: 0px;
}

Therefore, for the convenience of loading the outermost component and filling the window, all HT components have addtodom function. The logic is as follows: IV is the abbreviation of invalid

addToDOM = function(){   
    var self = this,
    view = self.getView(),   
    style = view.style;
    document.body.appendChild(view);            
    style.left = '0';
    style.right = '0';
    style.top = '0';
    style.bottom = '0';      
    window.addEventListener('resize', function () { self.iv(); }, false);            
}  

In the future, we can directly call addtodom function in the code, instead of writing a lot of code. After replacing the above code with addtodom, the code is as follows, and there is no need to describe CSS Style:

dm = new  ht.DataModel (); // data model             
treeView = new  ht.widget.TreeView (DM); // tree component                                                             
gv1 = new  ht.graph3d . graph3dview (DM); // 3D component  
gv2 = new ht.graph3d.Graph3dView(dm);
splitView = new  ht.widget.SplitView (GV1, GV2, 'V', 0.6); // split component 
mainSplit = new ht.widget.SplitView(treeView, splitView, 'h', 0.27);   
mainSplit.addToDOM();

After the interface is allocated, we need to add content to it. On the left side of the interface is the HT encapsulated tree component. As I wrote in the previous article, the tree component is a very convenient component for drawing tree relationships. Developers can easily create data models from data models To get the relationship between data and nodes in the tree, we only need to put the corresponding data model datamodel into the parameters of the tree component in the declaration process of the tree component. Of course, we also extend many functions related to the tree component, which is very convenient and practical. Here we only use the ExpandAll function to expand all objects

treeView = new  ht.widget.TreeView (DM); // tree component   
treeView.expandAll();

The right part is divided into two parts: the upper part and the lower part. They are 3D scenes, but the settings and display are a little different. The others are exactly the same. The above 3D scene overloads the getvisiblefunc function. If the showme attribute of the element is true, it is visible; if the node is ht.CSGNode Type and the parameter of the gethost function of the node is empty, it is not visible; otherwise, it is visible

gv1.setVisibleFunc(function(data){
    if(data.showMe){
        return true;
    }
    if(data instanceof ht.CSGNode && data.getHost()){
        return false;
    }
    return true;
});

First, we add element objects to the 3D scene. First, we explain the bookshelves in the middle, and then supplement the bookshelves on both sides. First, we added one ht.CSGNode The node shelf is the main node of the bookshelf. Other nodes are attached to this node. The location, size, name and six colors are set for this node, and then added to the data model

var shelf = new ht.CSGNode();
shelf.s3(500, 400, 120);
shelf.p3(0, 200, 0);
shelf.setName('shelf1');
shelf.s({
    'all.color': '#E5BB77'
});
dm.add(shelf);

Then, add 10 nodes to the shelf to make the bookshelf lattice effect, and add the attachment relationship and parent-child relationship into the data model

for(var i=0; i<2; i++){
    for(var j=0; j<5; j++){
        var clipNode = new ht.CSGNode();
        clipNode.setHost(shelf);
        clipNode.s3(80, 100, 120);
        clipNode.p3(-200+j*100, 340-i*120, 20);
        clipNode.setName('substract-'+i+'-'+j);
        clipNode.s('batch', 'tt');
        clipNode.setParent(shelf);
        dm.add(clipNode);
    }
}

In order to make the bookshelf a little more beautiful, we add it on the top, bottom, left and right of the bookshelf ht.CSGNode Finally, in order to be more concrete, we added a book, which is implemented in a very simple way

var book = new ht.Node();
book.setName('CSS3: The Missing Manual');
book.s3(60, 80, 8);
book.p3(-100, 210, 20);
book.r3(-Math.PI/6, Math.PI/5, 0);
book.setIcon('book');
book.s({
    'front.image': 'book',
    'back.color': 'white',
    'left.color': 'white',
    'all.color': 'gray'
});
book.setHost(shelf);
book.setParent(shelf);
dm.add(book);    

Next, the bookshelf on the left is a similar construction method. The difference is that there is one on this side ht.CSGBox Type, inherited from ht.CSGNode In addition to the functions of the parent csgnode, it can also rotate, expand and close six faces. Here, we only set the front node to be able to rotate and expand, and set a series of styles:

clipNode = new ht.CSGBox();
clipNode.setName('CSGBox-Expand-Left');
clipNode.s3(100, 100, 120);
clipNode.p3(0, 65, 0.1);
clipNode.setHost(shelf);
clipNode.showMe = true;
clipNode.s({
    ' all.visible ': false, // 6 faces are not visible
    ' front.visible ': true, // front visible
    ' front.toggleable ': true, // allow double-click to expand                    
    ' front.reverse.flip ': true, // the front and back display the front content
    ' front.transparent ': true, // front transparent
    ' front.end ':  Math.PI  *0.7, // end rotation radian of front expanded state
    ' front.color ':'rgba (0, 50, 50, 0.7)' // front color
});

Play the 3D model of webgl in HTML5

Maybe you want to know how the earth below does it? I remember that the shape3d property was set in HT in the previous article. Setting this property is actually the operation of setshape3dmodel (name, Model) and getshape3dmodel (name), which can be set to box | sphere | cylinder | cone | torus | star | rect | roundrect | triangle | righttriangle | parallelogram | trapezoid and other models through this attribute. These models are also encapsulated by HT. When you want to use them, you can directly set shape3d to one of the values, such as “shape3d: sphere” in this example It’s set to sphere. We simply wrap a map image around the outside of the sphere. Of course, this map image is first passed through the sphere ht.Default.setImage Registered, and then attach the image to this node through shape3d.image:

earth = new ht.Node();
earth.setName('earth');
earth.s3(70, 70, 70);
earth.p3(0, 50, 0);
earth.s({
    'shape3d': 'sphere',
    'shape3d.image': 'earth'
});
earth.setHost(shelf);  
earth.setParent(shelf);
dm.add(earth);

The bookshelf on the right also has a master node, other nodes are attached to it, but we see a new node type here ht.DoorWindow , ht.DoorWindow Inherited from ht.CSGNode In addition to the functions of digging out the space of the parent class csgnode, it can also rotate, expand and close the whole system. It is often used as a business object of a door or window to be attached to csgnode Or the host of csgshape as the element of the wall. This node type is ht.CSGNode Relatively speaking, different style parameters are added to differentiate the practical application. For more attributes, please refer to the doorwindow section of HT for Web Modeling manual, and then add them to the node for fun

photos = new ht.DoorWindow();
photos.setName('DoorWindow-Photos');
photos.setIcon('ben12');
photos.s3(110, 100, 130);
photos.p3(5, 180, 0);                
photos.setHost(shelf);  
photos.showMe = true;
photos.s({                    
    'bottom.uv': [1,1, 1,0, 0,0, 0,1],
    'bottom.uv.scale': [1, 1],
    'left.uv.scale': [3, 3],
    'top.uv.scale': [2, 2],
    'dw.s3': [0.8, 0.9, 0.05],
    'dw.t3': [0, -5, 0],
    'dw.axis': 'v',
    'dw.toggleable': false,
    'front.image': 'ben1',
    'back.image': 'ben2',
    'all.color': '#F8CE8B'
});
photos.setParent(shelf);
dm.add(photos);

Finally, we rotate the earth on the left and photo on the right

var angle = 0;
setInterval(function(){
    angle += Math.PI/40;
    earth.r3(0, angle, 0);
    photos.s('dw.angle', angle);
}, 50);

We can see that although HT encapsulates many different CSG node types, the actual applications are almost the same, and the contents are not very different. The differences are all in the style parameters. However, in actual development, this kind of distinction will greatly speed up the development speed. After all, the name is clear at a glance, and you know which style attributes to use.

Recommended Today

How to Build a Cybersecurity Career

Original text:How to Build a Cybersecurity Career How to build the cause of network security Normative guidelines for building a successful career in the field of information security fromDaniel miesslerstayinformation safetyCreated / updated: December 17, 2019 I’ve been doing itinformation safety(now many people call it network security) it’s been about 20 years, and I’ve spent […]