WebGL 的 3D 模型交併補
建設性的立體幾何具有許多實際用途,它用於需要簡單幾何物件的情況下,或者數學精度很重要的地方,幾乎所有的工程 CAD 軟體包都使用 CSG(可以用於表示刀具切削,以及零件必須配合在一起的特徵)。CSG 是 Constructive Solid Geometry 建模技術的簡稱,通過裁剪 subtract、融合 union 和相交 intersect 的運算,組合出複雜模型效果,HT 封裝了 ht.CSGNode 和 ht.CSGShape 等圖元型別來支援 CSG 的組合功能,常用於牆面的門窗挖空鑿洞的應用場景。
CSG 物件可以用二叉樹表示,其中葉子表示基元,節點表示操作。在這個圖中,節點被標記 ∩ 為交集,∪ 為並集,- 為差集。CSG 提供的模型或表面看起來很複雜,但實際上不過是巧妙組合或分解物件。
ht.CSGNode 繼承於 ht.Node,當 style 的 shape3d 屬性為空時顯示為六面體效果,CSGNode 如果通過 setHost 吸附到 宿主 CSGNode 或 CSGShape 後,宿主 CSGNode 或 CSGShape 可與吸附的 CSGNode 圖元進行 CSG 的組合建模。詳情請參考 HT for Web 建模手冊 CSGNode 章節。這裡我用 CSG 的概念寫了一個例子,讓大家能更好地理解這個概念。
本例 Demo 地址: hightopo.com/guide/guide…
先來看下效果圖:
從上面效果圖可以看到,我們將介面分為三個部分,這三個部分先是右邊部分上下分割,然後將整個介面左右分割,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 屬性了。
相關文章
- 玩轉 HTML5 下 WebGL 的 3D 模型交併補HTMLWeb3D模型
- WebGL學習(3) - 3D模型Web3D模型
- 分享一個WebGL開發的網站-用JavaScript + WebGL開發3D模型Web網站JavaScript3D模型
- 基於 HTML5 WebGL 的 3D 模型斜面生成HTMLWeb3D模型
- 基於 WebGL HTML5 的 3D 模型分離控制WebHTML3D模型
- 快速開發 HTML5 WebGL 的 3D 斜面拖拽生成模型HTMLWeb3D模型
- WebGL 3d賀卡Web3D
- WebGL之3D地球Web3D
- 基於 HTML5 的 WebGL 自定義 3D 攝像頭監控模型HTMLWeb3D模型
- 基於WebGL/Threejs技術的BIM模型輕量化之圖元合併WebJS模型
- WebGL載入本地模型Web模型
- 基於 WebGL 的 3D Chart 圖表Web3D
- WebGL展示3D房屋內景Web3D
- WebGL入門之基於WebGL的3D視覺化引擎介紹Web3D視覺化
- 用webgl打造自己的3D迷宮遊戲Web3D遊戲
- WebGL 3D概念講解(著色器)Web3D
- 使用WebGL 2.0更快地渲染 3DWeb3D
- 基於 HTML5 WebGL 的 3D 挖掘機HTMLWeb3D
- 基於 HTML5 WebGL 的 3D 機房HTMLWeb3D
- WebGL多模型光照綜合例項Web模型
- WebGL 3D on iOS8 正式版Web3DiOS
- 模型3D模型3D
- 基於 HTML5 WebGL 的 3D 科幻風機HTMLWeb3D
- 基於 HTML5 的 WebGL 3D 隧道監控HTMLWeb3D
- Go 時間交併集小工具Go
- WebGL 3D 工業隧道監控實戰Web3D
- 基於WebGL/Threejs技術的模型剖切WebJS模型
- 基於 WebGL 的 HTML5 3D 工控裙房系統WebHTML3D
- 基於 HTML5 WebGL 的 3D 工控裙房系統HTMLWeb3D
- 基於Web的6個完美3D圖形WebGL庫Web3D
- 基於 HTML5 WebGL 的 3D “彈力”佈局HTMLWeb3D
- [WebGL入門]三,3D繪圖的基礎知識Web3D繪圖
- WebGL實現HTML5的3D貪吃蛇遊戲WebHTML3D遊戲
- 魔方 3D 模型3D模型
- WebGL 手擼3d賀卡+小草飄動濾鏡Web3D
- WebGL程式設計指南(7)層次模型Web程式設計模型
- 基於 HTML5 WebGL 的 3D 網路拓撲圖HTMLWeb3D
- 基於 HTML5 + WebGL 的 3D 風力發電場HTMLWeb3D