CSG 構造實體幾何這個概念在工業水利水電施工上、遊戲上已經有很多人使用了，最簡單的實體表示叫作體元，通常是形狀簡單的物體，如立方體、圓柱體、稜柱、稜錐、球體、圓錐等。根據每個軟體包的不同這些體元也有所不同，在一些軟體包中可以使用彎曲的物體進行 CSG 處理，在另外一些軟體包中則不支持這些功能。構造物體就是將體元根據集合論的布爾邏輯組合在一起，這些運算包括：併集、交集以及補集。我們一般可以用 CSG 來將簡單的模型合在一起生成複雜的模型，這樣在構造模型的時候會省很多力。
HT 中的 ht.CSGNode 圖元類型就是參考 CSG 封裝的一個函數，ht.CSGNode 繼承於 ht.Node，當 style 的 shape3d 屬性為空時顯示為六面體效果，CSGNode如果通過 setHost 吸附到 宿主 CSGNode 或 CSGShape 後，宿主 CSGNode 或 CSGShape 可與吸附的CSGNode圖元進行CSG的組合建模。詳情請參考 HT for Web 建模手冊 CSGNode 章節。這裡我用 CSG 的概念寫了一個例子，讓大家能更好地理解這個概念。
本例 Demo 地址：http://hightopo.com/guide/guide/plugin/modeling/examples/example_bookshelf.html
先來看下效果圖：
從上面效果圖可以看到，我們將界面分為三個部分，這三個部分先是右邊部分上下分割，然後將整個界面左右分割，HT 用封裝好的 ht.widget.SplitView 進行界面的分割，然後將分割組件添加進底層 div 中：
dm = new ht.DataModel();// 數據模型 treeView = new ht.widget.TreeView(dm); //樹組件 gv1 = new ht.graph3d.Graph3dView(dm); //3D 組件 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);
上面代碼是一種非常常見的在 HTML 中添加 HT 組件的方法，詳情可參考 HT for Web 入門手冊組件章節。這種方法進行添加 HT 組件有一個需要注意的點，因為 HT 一般都以設置 position 為 absolute 的絕對定位方式，必須設置 left、right、top、bottom 等等基礎 css 樣式，像這樣：
.main { margin: 0px; padding: 0px; position: absolute; top: 0px; bottom: 0px; left: 0px; right: 0px; }
所以為了最外層組件加載填充滿窗口的方便性，HT 的所有組件都有 addToDOM 函數，其思想邏輯如下，其中 iv 是 invalidate 的縮寫：
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); }
以後我們在代碼中就可以直接調用 addToDOM 函數，而不用寫一大堆代碼了，上面代碼用 addToDOM 取代之後的代碼如下，而且不用描繪 css 樣式：
dm = new ht.DataModel();// 數據模型
treeView = new ht.widget.TreeView(dm); //樹組件
gv1 = new ht.graph3d.Graph3dView(dm); //3D 組件
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);
mainSplit.addToDOM();
界面分配好之後我們就要對其添加內容了，界面的左邊部分是 HT 封裝的樹組件，我在之前的文章寫到過，樹組件是一個非常方便的繪製樹形關係的組件，開發人員能夠輕鬆地從數據模型 DataModel 中獲取數據和節點之間的關係放到樹上，只需要在樹組件聲明的過程中，將對應的數據模型 DataModel 放進樹組件的參數即可，當然我們還擴展了很多跟樹組件有關的函數，非常方便實用，這裡我們只用了 expandAll 函數，將所有對象展開：
treeView = new ht.widget.TreeView(dm); //樹組件 treeView.expandAll();
右邊部分上下分為兩部分，都是 3D 場景，就是設置顯示有點不同，其他完全相同，上面的 3D 場景重載了 getVisibleFunc 函數，如果元素的 showMe 屬性為 true，則可視；如果節點為 ht.CSGNode 類型並且節點的 getHost 函數的參數為空，則不可視；其他情況均可視：
gv1.setVisibleFunc(function(data){ if(data.showMe){ return true; } if(data instanceof ht.CSGNode && data.getHost()){ return false; } return true; });
我們先向 3D 場景中添加元素對象，我們先解釋中間的書架，對兩邊的書架有缺的再進行補充。首先我們添加了一個 ht.CSGNode 節點 shelf，作為書架的主節點，其他的節點都是依附於這個節點的，對這個節點設置了位置、大小、名稱以及六個面的顏色，然後添加進數據模型 DataModel：
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);
接著向這個 shelf 中添加 10 個節點，做書架的格子效果，並設置依附關係和父子關係添加進數據模型中：
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); } }
為了讓書架變得更美觀一點，我們在書架的上下左右都加上了 ht.CSGNode，最後為了更加具象化，我們還添加了一本書，實現方式也差不多，都非常簡單：
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);
接著左邊的書架也是類似的構建方法，有一點不同的是，這邊有一個 ht.CSGBox 類型，繼承於 ht.CSGNode，其除具備父類 CSGNode 的挖空等功能外，還可對六個面進行旋轉展開關閉的操作，這裡我們的節點只設置了前面的能夠旋轉展開，並且設置了一系列的樣式：
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面均不可見 '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)'//前面顏色 });
可能你們還想知道下面的地球是怎麼做到的？還記得之前的文章寫到過 HT 中設置了 shape3d 屬性，設置這個屬性實際上就是在操作 setShape3dModel(name, model) 和 getShape3dModel(name)，可以通過這個屬性設置為 box|sphere|cylinder|cone|torus|star|rect|roundRect|triangle|rightTriangle|parallelogram|trapezoid 等等模型，這些模型也都是 HT 封裝好的，要使用時直接設置 shape3d 為其中的一個值即可，如這個例子中用到 「shape3d: sphere」 就是設置為球體。我們簡單地用一張地圖圖片包裹在這個球體的外側，當然，這張地圖圖片是先通過 ht.Default.setImage 註冊過的，然後通過 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);
右邊的書架，同樣也是有一個主節點，其他節點依附於它，但是我們看到這邊換了一個新的節點類型 ht.DoorWindow，ht.DoorWindow繼承於 ht.CSGNode，其除具備父類 CSGNode 的挖空等功能外，還可進行整體的旋轉展開關閉的操作， 常用於作為門或窗的業務對象，吸附於 CSGNode 或 CSGShape 的 host 作為牆面的圖元。這個節點類型就是 ht.CSGNode 的延展，相對來說就是區分了實際應用而添加了不同的 style 參數，更多的屬性請到 HT for Web 建模手冊 DoorWindow 章節 查看然後添加到節點中玩玩：
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);
最後，我們將左側的地球 earth 和右側的照片 photo 旋轉起來：
var angle = 0; setInterval(function(){ angle += Math.PI/40; earth.r3(0, angle, 0); photos.s('dw.angle', angle); }, 50);
我們看到，其實雖然 HT 封裝了很多不同的 CSG 節點類型，但是實際應用都差不多，而且內容也沒有差特別多，差別都是在 style 參數上，但是真的在實際開發中，這種區分就會很大程度上加快開發速度，畢竟名稱一目了然，就知道要運用哪些 style 屬性了。