HT-based CSG feature builds a HTML5 3D bookshelf

Construction entity geometry CSG full name constructive solid geometry, is a common technique for building models in 3D computer graphics, which combines the logical operations of the three collection of union, subtract subtraction, and intersect intersction to convert the cube , cylinder, and prisms are simple basic models that are nested together into more complex three-dimensional models.

CSG's algorithm has been implemented in various language platforms over the years, and the C + + version of http://opencsg.org/has many applications based on this open source class library, and the JavaScript language is implemented in earlier versions http://evanw.github.io/ csg.js/, many other JS derivative editions are based on this version of the improvement, including the Java version of the implementation of Https://github.com/miho/JCSG, can refer to the JavaFX-based 3D printing IDE https:// Github.com/miho/jfxscad, the mention of JavaFX depends on the total disappearance of the programmer's vision over the years, but there is still a group of advocates who continue to use JavaFX, which is now a bit awkward.

Back to the 3D Bookshelf example we're going to do today, we're going to do this with the HT for Web-based 3D engine, HT has built in the CSG feature model package, and we build the Csgnode primitive object, which is a collection of CSG technology for the entities adsorbed by the host, The three operations of the set and complement are generally used in the cropping mode, so the Csgnode default to the host entity is cropping.

Example effect shows that we have built a Datamodel data model that binds a TreeView tree component and a three-dimensional component of two graph3dview, and the upper part of the Graph3dview component adds Visiblefunc's visible filter. Hides the Graph3dview in the following section of the blue cube elements, these blue cube is Csgnode, its role is to cut its adsorption shelves shelf objects, so generally in the 3D editor state to appear, The Run-time section, like the Graph3dview component above, is hidden by adding visible filters, which enables the 3D bookshelf effect of a groove to place the contents of a book, in this case we only put a "CSS3 the Missing Manual" as an example, this book is actually by a hexahedral , front surface shows the book map, and then rotate a certain angle to display, btw "CSS3 the Missing Manual" Third edition is a very good CSS books, highly recommended!

Shelves on both sides of the two different styles of small books, through my drag and change the position of the blue Csgnode, we can more intuitively through the comparison of the two graphs to realize the operation of CSG, Glass door switch and photo album effect is directly using the HT for Web 3D engine to provide models, By setting transparency, photo mapping, and rotating animation, you can only function parameters.

The following is a reference to all JavaScript code for the 3D example of the HT for Web: http://v.youku.com/v_show/id_XODU2MTQ4NjI4.html

Ht. Default.setimage (' ben12 ', {width: 100,height: 50,comps: [{type:  ' image ',name:  ' Ben1 ',rect: [0, 0, 50, 50]},{type:  ' image ',name:  ' ben2 ', rect: [50, 0,  50, 50]}]                 });             function init () {                                   dm = new ht . Datamodel ();                 Treeview = new ht.widget.treeview (DM);                                                                                                      gv1 = new  Ht.graph3d.Graph3dView (DM);    gv2 = new ht.graph3d.graph3dview (DM);    splitview = new ht.widget.splitview (gv1, gv2,  ' V ',  0.6);    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);                            gv1.setmovestep (+); Gv1.setgridvisible (True);  Gv1.seteye (0, 100, 1000); Gv1.setcenter (0, 200, 0); Gv1.pan (0, 100, true); Gv1.getlabel = function () {return null;}; Gv1.getbrightness = function (data) {return null;}; Gv1.setvisiblefunc (function (data) {if (DATA.SHOWME) {return true;} if (data instanceof ht. Csgnode && data.gethost ()) {return false;} Return true;}); Gv2.setmovestep (+); gv2.seteditable (true); Gv2.setgridvisible (true);  gv2.seteditable (true); Gv2.pan (0,  200, true); Gv2.getlabel = function () {return null;};                 initshelf1 ();                &NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;INITSHELF2 ();         &NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;INITSHELF3 ();                         treeview.expandall (); Var angle = 0;setinterval (function () {angle += &NBSP;MATH.PI/40;EARTH.R3 (0, angle, 0);p hotos.s (' Dw.angle ',  angle);}, 50);                  }             function initshelf1 () {var shelf =  New ht. Csgnode (); Shelf.s3 (500, 400, 120); shelf.p3 (0, 200, 0); Shelf.setname (' Shelf1 '); Shelf.s ({' All.color ':  ' #E5BB77 '});d M.add (shelf), 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, &NBSP;20); Clipnode.setname (' substract-' +i+ '-' +j '); Clipnode.s (' Batch ',  ' TT '); clipnode.setparent (shelf); Dm.add (Clipnode);}} Var leftnode = new ht. Csgnode (); Leftnode.sethost (shelf); Leftnode.s3 (23, 380, 100); leftnode.p3 ( -255, 200, 0); Leftnode.setname (' Substract left '); leftnode.setparent (shelf);d m.add (leftnode); var rightnode =  new ht. Csgnode (); Rightnode.sethost (shelf); Rightnode.s3 (23, 380, 100); rightnode.p3 (255, 200, 0); Rightnode.setname (' substract right '); rightnode.setparent (shelf);d m.add (rightnode); Var bottomnode  = new ht. Csgnode (); Bottomnode.sethost (shelf); Bottomnode.s3 (480, 140, 140); bottomnode.p3 (0, 80, 0); Bottomnode.setname (' Substract bottom '); bottomnode.setparent (shelf);d m.add (bottomnode);  &Nbsp;var topnode = new ht. Csgnode (); Topnode.sethost (shelf); Topnode.s3 (480, 10, 100); topnode.p3 (0, 400, 0); Topnode.setname (' union top '); TOPNODE.S (' Attach.operation ',  ' Union ') topnode.setparent (shelf);d M.add ( Topnode);   var book = new ht. Node (); Book.setname (' css3: the missing manual '); Book.s3 (60, 80, 8); book.p3 (-100, &NBSP;210,&NBSP;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);d m.add (book);                               &NBSP;&NBSP;&NBSP;}FUNCTION&NBSP;INITSHELF2 () {                 var  Shelf = new ht. Csgnode (); Shelf.s3 (120, 240, 120); shelf.p3 (0, 120, 0); Shelf.setname (' shelf2 '); Shelf.s ({' All.color ':  ' #805642 ', ' csg.color ':  ' yellow ', ' csg.reverse.flip ':  true});d M.add (shelf);var  Clipnode = new ht. Csgnode (); Clipnode.setname (' shelf2-substract-up '); Clipnode.s3 (100, 100, 130); CLIPNODE.P3 (0, 180 ,  0), clipnode.sethost (shelf), clipnode.s (' Attach.cull ',  true), clipnode.setparent (shelf);d M.add ( Clipnode); 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, ' Front.visible ':  true, ' front.toggleable ': true,                      ' Front.reverse.flip ':  true, ' Front.transparent ':  true, ' FRONT.End ':  math.pi * 0.7, ' front.color ':  ' Rgba (0, 50, 50, 0.7) '}); Clipnode.setparent (shelf); clipnode.setfaceexpanded (' Front ',  true, true);d M.add (Clipnode);                 earth =  New ht. Node (); Earth.setname (' Earth '); Earth.seticon (' Earth '); Earth.s3 (70, 70, 70); EARTH.P3 (0, 50,  0); Earth.s ({' Shape3d ':  ' sphere ', ' shape3d.image ':  ' earth '}); Earth.sethost (shelf);   Earth.setparent (shelf);d m.add (earth); Shelf.t3 ( -360, 0, 50); Shelf.r3 (0, math.pi/7, 0);                                 }      &NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;FUNCTION&NBSP;INITSHELF3 () {                 var shelf = new ht. Csgnode (); Shelf.s3 (120, 240, 120); shelf.p3 (0, 120, 0); Shelf.setname (' shelf3 '); Shelf.seticon (' Ben '); Shelf.s ({' all.image ':  ' brick ', ' all.uv.scale ':  [2, 4], ' Top.uv.scale ':  [2, 2], ' Bottom.uv.scale ': [2, 2],                                                                 ' csg.image ':  ' Ben ', ' csg.blend ':  ' yellow ');d m.add (shelf);p Hotos = new ht.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); &NBSP;&NBSP;PHOTOS.SHOWME&NBSP;=&NBSP;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 '});p hotos.setparent (shelf);d m.add (PHOTOS); var clipnode =  new ht. Csgbox (); Clipnode.setname (' csgbox-expand-top '); Clipnode.s3 (100, 100, 120); Clipnode.p3 (0, 65,  0.1); Clipnode.sethost (shelf); CLIPNODE.SHOWME&NBSP;=&NBSP;TRUE;CLIPNODE.S ({                      ' all.visible ':  False, ' front.visible ':  true, ' front.color ':  ' red ', ' front.transparent ':  true, ' front.opacity ': 0.7,                      ' Front.reverse.flip ':  true, ' front.toggleable ': true,                                           ' Front.axis ':  ' top ', ' Front.end ':  math.pi * 0.4}); clipnode.setparent (shelf); clipnode.setfaceexpanded (' Front ',  True, true);d M.add (Clipnode);             &NBSP;&NBSP;&NBSP;&NBSP;SHELF.T3 (360,&NBSP;0,&NBSP;50); Shelf.r3 (0, -math.pi/7, 0);   }

HT-based CSG feature builds a HTML5 3D bookshelf