Play HTML5 3D model orthogonal complement of WebGL

Constructive stereoscopic geometry has many practical uses, which are used in situations where simple geometries are required, or where mathematical precision is important, and almost all engineering CAD packages use CSG (which can be used to represent cutting tools and the features that the parts must fit together). CSG is the abbreviation for constructive Solid Geometry modeling technology that combines complex model effects by cutting subtract, fusing union, and intersecting intersect, and HT encapsulates HT. Csgnode and HT. Csgshape and other primitive types to support the combination of CSG, often used in wall windows and doors hollowed out the application scenario.

A CSG object can be represented by a binary tree, where the leaf represents the primitive and the node represents the operation. In this diagram, the nodes are labeled ∩ as intersections, ∪ are set, and-for difference sets. The model or surface provided by CSG looks complex, but is actually a clever combination or decomposition of objects.

Ht. Csgnode inherits from Ht. Node, displayed as a six-face body effect when the style's Shape3d property is empty, Csgnode if the host csgshape or csgnode can be associated with the adsorbed csgshape after Sethost is adsorbed to the host Csgnode or Csgnode Elements for the combination modeling of CSG. For more information, refer to the HT for Web Modeling manual Csgnode section. Here I use the concept of CSG to write an example, so that we can better understand the concept.

This example Demo address: http://hightopo.com/guide/guide/plugin/modeling/examples/example_bookshelf.html

First look at the following:

As can be seen from the above, we divide the interface into three parts, the three parts are split up on the right, then the entire interface is divided, and HT uses the encapsulated Ht.widget.SplitView to split the interface, then add the split component into the underlying DIV:

DM =NewHt. Datamodel ();//Data ModelTreeView =NewHt.widget.TreeView (DM);//Tree ComponentsGV1 =NewHt.graph3d.Graph3dView (DM);//ComponentsGv2 =NewHt.graph3d.Graph3dView (DM); SplitView=NewHt.widget.SplitView (GV1, gv2, ' V ', 0.6);//Split ComponentMainsplit =NewHt.widget.SplitView (TreeView, SplitView, ' H ', 0.27); View=Mainsplit.getview (); View.classname= ' main ';d ocument.body.appendChild (view); Window.addeventlistener (' Resize ',function(e) {mainsplit.invalidate ();},false);

The above code is a very common way to add HT components to HTML, as detailed in the HT for WEB Starter Kit section. This method of adding HT components has a point to note, because HT generally sets position as the absolute location for absolute, you must set the base CSS style for left, right, top, bottom, and so on, like this:

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

So for the outermost component to fill the convenience of filling the window, all HT components have addtodom function, the thought logic is as follows, where IV is the abbreviation of invalidate:

function () {       varThis,    = Self.getview (),       = View.style;    Document.body.appendChild (view);                 = ' 0 ';     = ' 0 ';     = ' 0 ';     = ' 0 ';          Window.addeventlistener (functionfalse);            }

In the future we can call the Addtodom function directly in the code, instead of writing a lot of code, the above code with addtodom replaced by the following code, and do not have to depict CSS style:

 DM = new  ht. Datamodel (); //  data model  TreeView = new  Ht.widget.TreeVie W (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 

After the interface is allocated, we will add content to it, the left part of the interface is the HT encapsulated tree component, as I wrote in the previous article, the tree component is a very handy component for drawing tree relationships, and developers can easily get the data from the data model Datamodel and the relationships between nodes on the tree. Only in the process of the tree component declaration, the corresponding data model Datamodel into the parameters of the tree component, of course, we also extend a lot of functions related to the tree component, very convenient and practical, here we only use the ExpandAll function, all objects are expanded:

New // Tree Components    Treeview.expandall ();

The right part is divided into two parts, are 3D scenes, is the settings display a little different, the other is exactly the same, the above 3D scene overloaded the Getvisiblefunc function, if the element's ShowMe property is true, it is visible if the node is HT. Csgnode type and the parameters of the node's GetHost function are empty, it is not visible, and other cases are visible:

Gv1.setvisiblefunc (function(data) {    if(data.showme) {        return  true;    }     if instanceof ht. Csgnode && data.gethost ()) {        returnfalse;    }     return true ;});

We first add the element object to the 3D scene, we first explain the middle bookshelf, and then add the missing shelves on both sides. First we added a HT. Csgnode node shelf, as the main node of the bookshelf, the other nodes are attached to this node, the node is set the location, size, name and color of six faces, and then added to the data Model Datamodel:

var New ht. Csgnode (Shelf.s3);shelf.p3(0, 0); Shelf.setname (' Shelf1 '); Shelf.s ({     ' all.color ': ' #E5BB77 '});d M.add (shelf);

Then add 10 nodes to the shelf, do the grid effect on the bookshelf, and set up the dependency relationship and parent-child relationship into the data model:

 for (var i=0; i<2; i++) {    for (var j=0; j<5; j + +) {        var  New ht. Csgnode ();        Clipnode.sethost (shelf);        CLIPNODE.S3 (+--);        CLIPNODE.P3 (-200+j*100, 340-i*120,);        Clipnode.setname (' substract-' +i+ '-' +j);        CLIPNODE.S (' batch ', ' TT ');        Clipnode.setparent (shelf);        Dm.add (Clipnode);    }}

In order to make the bookshelf more beautiful, we added HT to the top and bottom of the bookshelf. Csgnode, in order to be more figurative, we also added a book, the implementation of the same way, are very simple:

var New ht. Node (); Book.setname (' css3:the Missing Manual '); Book.s3(8); Book.p3 (-100,,); 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 '

Then the bookshelf on the left is a similar method of construction, and a little different is that there is a HT here. Csgbox type, inherited from Ht. Csgnode, in addition to having the function of the csgnode of the parent class, can also be rotated on six faces to expand the closed operation, where our node only set the front can be rotated to expand, and set a series of styles:

Clipnode =Newht. 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,//Visible above' Front.toggleable ':true,//allow front double-click to expand' Front.reverse.flip ':true,//front side shows the front side of the content' Front.transparent ':true,//Front Transparent' Front.end ': Math.PI * 0.7,//End Rotation Arc of the previous expanded state' Front.color ': ' Rgba (0, 50, 50, 0.7) '//Front Color});

Maybe you want to know how the Earth is doing it? Remember that the previous article wrote that the Shape3d attribute was set in HT and that setting this property is actually in operation Setshape3dmodel (name, model) and Getshape3dmodel (name), which can be set by this property to Box| Sphere|cylinder|cone|torus|star|rect|roundrect|triangle|righttriangle|parallelogram|trapezoid and so on models, these models are also HT Packaged, to be used directly set Shape3d as one of the values, as in this example, "Shape3d:sphere" is set to the sphere. We simply wrap a map image around the outer side of the sphere, and of course, this map image is first passed through HT. Default.setimage registered, then attach the picture to this node via shape3d.image:

New ht. Node (); Earth.setname (' earth '), Earth.s3 (0, 0); EARTH.S ({earth.p3    ' shape3d ': ' Sphere ',    ' shape3d.image ': ' Earth '}, Earth.sethost (shelf)  ; Earth.setparent (shelf);d m.add (earth);

On the right side of the bookshelf, there is also a master node, other nodes attached to it, but we see a new node type HT. Doorwindow,ht. Doorwindow inherits from Ht. Csgnode, in addition to having the function of the csgnode of the parent class, can also perform the operation of the whole rotation unfold close, which is often used as the business object of the door or window, and is adsorbed on the host of Csgnode or Csgshape as the entity of the wall. This node type is HT. The extension of Csgnode, in contrast, distinguishes the actual application and adds different style parameters, more properties to the HT for Web Modeling Manual Doorwindow Chapter View and then add to the node to play:

Photos =Newht. Doorwindow ();p hotos.setname (' Doorwindow-photos ');p Hotos.seticon (' Ben12 ');p Hotos.s3 (110, 100, 130);p hotos.p3 (5, 180, 0);  Photos.sethost (shelf); Photos.showme=true;p hotos.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 '});p hotos.setparent (shelf);d m.add (PHOTOS);

Finally, we rotate the left Earth and photo of the right:

var angle = 0; setinterval (function() {    + = MATH.PI/40;    EARTH.R3 (0, angle, 0);    PHOTOS.S (' dw.angle '50);

We see, in fact, although HT package a lot of different CSG node types, but the actual application is similar, and the content is not very much, the difference is in the style parameter, but really in the actual development, this distinction will greatly speed up the development speed, after all, the name at a glance, know what to use The Style property.

Play HTML5 3D model orthogonal complement of WebGL