現在, 3D模型已經用於各種不同的領域。 在醫療行業使用它們製作器官的精確模型;電影行業將它們用於活動的人物、物體以及現實電影;視頻遊戲產業將它們作為電腦與視頻遊戲中的資源;在科學領域將它們作為化合物的精確模型;建築業將它們用來展示提議的建築物或者風景表現;工程界將它們用於設計新設備、交通工具、結構以及其它應用領域;在最近幾十年, 地球科學領域開始構建三維地質模型, 而且3D模型經常做成動畫, 例如, 在故事片電影以及電腦與視頻遊戲中大量地應用三維模型。
這些種種都讓我們前端開發者覺得如果我們可以不用學習unity3d或者其他遊戲開發工具就能實現3D效果, 而且能夠精准的靠代碼來控制移動或者方向就好了。 。 。 於是我利用HT For Web中的3D元件來實現了一個小例子。
先來看看整體實現的效果圖:
用HT for Web, 現有的3d範本創建三層底板不是問題, 問題是要如何將圖中第一層的“電腦”和“機櫃元件”放上去?我是在網上down下來的obj格式的檔, 然後我利用HT中的ht.Default.loadObj(objUrl, mtlUrl, params)函數將模型載入進去, 其中的params部分可以參考http://www.hightopo.com/guide/guide/plugin/obj/ht-obj-guide.html, 代碼如下:
ht.Default.loadObj('obj/機櫃組件1.obj', 'obj/機櫃組件1.mtl', { cube: true, center: true, shape3d: 'box', finishFunc: function(modelMap, array, rawS3){ window.rawS3 = rawS3; if(modelMap){ device2 = createNode('box', floor1); device2.p3([x1-120, y1+13, z1+60]); device2.s3(rawS3); createEdge(device1, device2); device3 = createNode('box', floor1); device3.s3(rawS3); device3.p3([x1+120, y1+13, z1+60]); createEdge(device1, device3); } } });“電腦”上方有個紅色的立體能旋轉的“警告”, 是依靠ht.Default.setShape3dModel函數(HT for Web 建模手冊)註冊的一個3d模型, 在ht中, 封裝好的建模函數有很多, 比較基礎的就是球體, 圓柱, 立方體等等, 這邊我用的是構造環形的方法createRingModel來生成“警告”最外面的環,
要實現3D介面上展現2d圖片, 只要按照平常的路走就行, 因為ht中的Graph3dView和其他的組件的根部都是div, 在div上生成圖片用的就是原生js, new Image(), 再將image的src和大小賦值, 並且加到3d面板上就行了, 注意這裡是加到3d的底層div上, 要用g3d.getView().appendChild來添加, 我們還可以看到管線上有虛線流動的痕跡, 這是通過不斷改變“shape3d.uv.offset”參數實現管道流動的特殊效果, 詳情請參考HT for Web 形狀手冊。
想讓2d圖片在3d管線上移動則是使用g3d.toViewPosition(position)來獲取3d模型的二維座標, 這個函數中的參數就是三維模型的3d座標, 我們可以直接將polyline管線上的點傳入toViewPosition函數中,
可以看到圖中第二層中的立方體上有“SDH”的字樣, 我是通過設置shape3d.top.img: imgURL來實現的, 這邊的imgURL可以是圖片的相對路徑, 也可以是ht中用ht.Default.setImage聲明的img的名稱, 還可以是json格式構造的圖片。 在ht中, 2D文字顯現在3D上, 則字體周圍會出現“鋸齒”, 這個時候只要設置“label.transparent: true”即可。
我們還可以看到第二層上有兩個特殊的多邊形“平行四邊形”和“梯形”, 因為之前有客戶說不知道如何使用createExtrusionModel這個模型函數(HT for Web 建模手冊), 我索性就寫了一下, 平行四邊形是靠createParallelogramModel模型函數, 這個函數比較簡單, createExtrusionModel(array, segments, top, bottom, resolution, repeatUVLength, tall, elevation), array是你要形成的圖形的座標點, 這邊只是針對於xz軸上畫的平面圖形,segments指的是如何連接這幾個座標點,可參考HT for Web 形狀手冊,top和bottom就是讓你選擇是否有頂部或者底部,resolution微分段數,我們描繪一段曲線的時候可能只要確認幾個個別的點然後在每兩個點之間的連線上把它分成多個段,這樣這條線段就會變得平滑,ht為了用戶能夠輕鬆操作這些線段,就封裝了這一個參數,repeatUVLength默認為空,設置值後頂部和底部的貼圖將根據制定長度值進行重複,tall模型的高度,預設為5,elevation模型中心的y軸位置,預設值為0,設置這個值可以使xz上的平面繞著y軸旋轉。
底層的一個環形的效果是通過一個演算法來實現的,環形得確認這個環形上有多少個元素,然後算每兩個之間的角度,在通過sin、cos來計算每一個元素的位置,得出了如下代碼:
names = ['設備2', '設備3', '設備4', '設備5', '設備6', '設備7', '設備8', '設備9']; names.forEach(function(name, index) { x = 400, y = 200, angle = 45, r = 120; x = x3 + Math.sin((2 * Math.PI / 360) * angle * index) * r; y = z3 + Math.cos((2 * Math.PI / 360) * angle * index) * r; device = createRect([x, y3 + 15, y], [w * 0.1, 15, h * 0.1], '', '', floor3); createEdge(device5, device); });·2017年【中公教育】特別推出2017年就業促進計畫,500萬就業基金助你成為IT達人
詳情請戳:http//www.ujiuye.com/zt/jycj/?wt.bd=bgz
·海量IT學習資料白給你,加群搶:584539956
加群暗號:“IT大俠” 你可能就是下一個IT大俠哦!
這邊只是針對於xz軸上畫的平面圖形,segments指的是如何連接這幾個座標點,可參考HT for Web 形狀手冊,top和bottom就是讓你選擇是否有頂部或者底部,resolution微分段數,我們描繪一段曲線的時候可能只要確認幾個個別的點然後在每兩個點之間的連線上把它分成多個段,這樣這條線段就會變得平滑,ht為了用戶能夠輕鬆操作這些線段,就封裝了這一個參數,repeatUVLength默認為空,設置值後頂部和底部的貼圖將根據制定長度值進行重複,tall模型的高度,預設為5,elevation模型中心的y軸位置,預設值為0,設置這個值可以使xz上的平面繞著y軸旋轉。底層的一個環形的效果是通過一個演算法來實現的,環形得確認這個環形上有多少個元素,然後算每兩個之間的角度,在通過sin、cos來計算每一個元素的位置,得出了如下代碼:
names = ['設備2', '設備3', '設備4', '設備5', '設備6', '設備7', '設備8', '設備9']; names.forEach(function(name, index) { x = 400, y = 200, angle = 45, r = 120; x = x3 + Math.sin((2 * Math.PI / 360) * angle * index) * r; y = z3 + Math.cos((2 * Math.PI / 360) * angle * index) * r; device = createRect([x, y3 + 15, y], [w * 0.1, 15, h * 0.1], '', '', floor3); createEdge(device5, device); });·2017年【中公教育】特別推出2017年就業促進計畫,500萬就業基金助你成為IT達人
詳情請戳:http//www.ujiuye.com/zt/jycj/?wt.bd=bgz
·海量IT學習資料白給你,加群搶:584539956
加群暗號:“IT大俠” 你可能就是下一個IT大俠哦!