如何使用基于HTML5 Canvas的3D渲染引擎界面以及吸附等效果

這篇文章主要為大家展示了如何使用基于HTML5 Canvas的3D渲染引擎界面以及吸附等效果，內(nèi)容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶大家一起來研究并學(xué)習(xí)一下“如何使用基于HTML5 Canvas的3D渲染引擎界面以及吸附等效果”這篇文章吧。

html有什么特點(diǎn)

1、簡易性：超級文本標(biāo)記語言版本升級采用超集方式，從而更加靈活方便，適合初學(xué)前端開發(fā)者使用。 2、可擴(kuò)展性：超級文本標(biāo)記語言的廣泛應(yīng)用帶來了加強(qiáng)功能，增加標(biāo)識符等要求，超級文本標(biāo)記語言采取子類元素的方式，為系統(tǒng)擴(kuò)展帶來保證。  3、平臺無關(guān)性：超級文本標(biāo)記語言能夠在廣泛的平臺上使用，這也是萬維網(wǎng)盛行的一個(gè)原因。 4、通用性：HTML是網(wǎng)絡(luò)的通用語言，它允許網(wǎng)頁制作人建立文本與圖片相結(jié)合的復(fù)雜頁面，這些頁面可以被網(wǎng)上任何其他人瀏覽到，無論使用的是什么類型的電腦或?yàn)g覽器。

效果圖

代碼實(shí)現(xiàn)

HT 提供了基于 WebGL 的 3D 技術(shù)的圖形組件 ht.graph4d.Graph4dView，WebGL 基于 OpenGL ES 2.0 圖形接口，因此 WebGL 屬于底層的圖形 API 接口，二次開發(fā)還是有很高的門檻，HT 的 Graph4dView 組件通過對 WebGL 底層技術(shù)的封裝，與 HT 其他組件一樣，基于 HT 統(tǒng)一的 DataModel 數(shù)據(jù)模型來驅(qū)動圖形顯示，極大降低了 3D 圖形技術(shù)開發(fā)的門檻。同時(shí) HT 提供了強(qiáng)大的完全基于 HTML5 技術(shù) 3D 圖形建模設(shè)計(jì)器，用戶無需編碼即可快速可視化搭建各種 3D 場景，可以說 HT 的 3D 開發(fā)模式完全打破了傳統(tǒng) 3D 開發(fā)模式，絕大部分應(yīng)用不再需要依賴精通 3ds Max 或 Maya 的專業(yè) 3D 設(shè)計(jì)師來建模，也不需要整合 Unity3d 等引擎做圖形渲染，HT 一站式的提供了從建模到渲染，包括和 2D 組件呈現(xiàn)和數(shù)據(jù)融合的一站式解決方案。

本次講解的就是這個(gè) 3D 的界面，所以我們首先要創(chuàng)建 3D 渲染引擎組件，可視化呈現(xiàn)數(shù)據(jù)模型的三維環(huán)境場景。

dataModel = new ht.DataModel();
g3d = new ht.graph4d.Graph4dView(dataModel);
g3d.addToDOM();
window.addEventListener('resize', function (e) {
　　g3d.invalidate();
}, false);

我們還要設(shè)置眼睛（或Camera）所在位置，默認(rèn)值為 [0, 300, 1000] ，格式為 [x, y, z] 。

g3d.setEye([0, 300, 600]);

這里給大家說一下，可參考 3D 手冊（ http://www.hightopo.com/guide/guide/core/3d/ht-3d-guide.html ）。

然后我們再給它加上一些選中效果。Graph4dView 中被選中的圖元會顯示為較暗的狀態(tài)，變暗系數(shù)是由圖元 style 的 brightness 和 select.brightness 屬性決定，select.brightness 屬性默認(rèn)值為 0.7，最終返回值大于 1 變亮，小于 1 變暗，等于 1 或?yàn)榭談t不變化。Graph4dView#getBrightness 函數(shù)控制最終圖元亮度，因此也可以通過重載覆蓋該函數(shù)自定義選中圖元亮度。

g3d.getBrightness = function (data) {
　　if (data.s('isFocused')) {
   　　return 0.7;
   }
　　return null;
};

lastFocusData = null;g3d.getView().addEventListener('mousemove', function (e) {
　　// 傳入邏輯坐標(biāo)點(diǎn)或者交互 event 事件參數(shù)，返回當(dāng)前點(diǎn)下的圖元
   var data = g3d.getDataAt(e);   if (data !== lastFocusData) {
   　　if (lastFocusData) {
      　　astFocusData.s('isFocused', false);
      }      if (data) {
         data.s('isFocused', true);
      }
      astFocusData = data;
　　}
});

接下來我們寫個(gè)函數(shù)來方便繪制每個(gè)部分的模型：

function createNode (p3, s3, host) {
　　// 拓?fù)鋱D元類型　　var node = new ht.Node();　　// 獲取或設(shè)置圖元中心點(diǎn)的三維坐標(biāo) 有三個(gè)參數(shù)時(shí)相當(dāng)于 setPosition3d 沒有相當(dāng)于 get　　node.p3(p3);　　// 獲取或設(shè)置圖元的尺寸 有三個(gè)參數(shù)時(shí)相當(dāng)于 setSize3d 沒有相當(dāng)于 get　　node.s3(s3);　　// 設(shè)置宿主圖元，當(dāng)圖元吸附上宿主圖元(host)時(shí)，宿主移動或旋轉(zhuǎn)時(shí)會帶動所有吸附者　　node.setHost(host);
　　dataModel.add(node);　　return node;
}

講到了這，我們來說說吸附，吸附功能對于設(shè)計(jì)有層次關(guān)系的模型非常方便，例如設(shè)備面板吸附上設(shè)備機(jī)框，設(shè)備端口吸附上設(shè)備面板，這樣從機(jī)框 - 面板 - 端口的層次關(guān)系吸附，使得用戶拖動整體機(jī)框時(shí)所有這個(gè)層次下的圖元都會跟隨移動。對于 3D 的場景下，吸附的概念更進(jìn)一步延伸，當(dāng)機(jī)框在三維空間進(jìn)行任意位置偏移以及任意角度旋轉(zhuǎn)時(shí)，所有吸附的相關(guān)圖元都會正確的跟隨平移，并做出相應(yīng)位置對應(yīng)的旋轉(zhuǎn)，以達(dá)到整體設(shè)備各個(gè)圖形部分保持物理相對位置一致。

下面我們來一起創(chuàng)建模型吧！分別是地板 floor，桌面 table，四個(gè)桌腿以及盒子：

// 地板
floor = createNode([0, 0, 0], [600, 5, 400]).s({
　　'all.color': '#A0A0A0',// 六面顏色
　　'label': '地板',// 圖元文字內(nèi)容
　　'label.face': 'top',// 文字在3d下的朝向，可取值（left|right|top|bottom|front|back|center）
　　'label.background': 'yellow',// 圖元文字背景
　　'label.position': 22,// 圖元文字位置
　　'label.t3': [10, 0, -10],// 文字在3d下的偏移，格式為 [x,y,z]
　　'label.font': '28px arial, sans-serif'// 圖元文字字體
});
// 桌面
table = createNode([0, 120, 0], [400, 10, 280], floor).s({
　　'shape3d': 'cylinder',// 為空時(shí)顯示為六面立方體，cylinder 圓柱
　　'shape3d.side': 60,// 決定 3d 圖形顯示為幾邊型，為 0 時(shí)顯示為平滑的曲面效果
　　'shape3d.color': '#E5BB77',// 3d 圖形整體顏色
　　'label': '桌子',
　　'label.face': 'top',
　　'label.background': 'yellow',
　　'label.position': 23,
　　'label.t3': [0, 0, -10],
　　'label.font': '20px arial, sans-serif'
});
// 四個(gè)桌腿
foot1 = createNode([100, 60, 80], [20, 110, 20], table).s({
　　'shape3d': 'cylinder',
　　'shape3d.color': '#E5BB77',
});
foot2 = createNode([-100, 60, 80], [20, 110, 20], table).s({
　　'shape3d': 'cylinder',
　　'shape3d.color': '#E5BB77',
});
foot3 = createNode([100, 60, -80], [20, 110, 20], table).s({
　　'shape3d': 'cylinder',
　　'shape3d.color': '#E5BB77',
});
foot4 = createNode([-100, 60, -80], [20, 110, 20], table).s({
　　'shape3d': 'cylinder',
　　'shape3d.color': '#E5BB77',
});
// 盒子
box = createNode([0, 150, 0], [100, 50, 60], table).s({
　　'all.color': '#2e2f32',
　　'front.color': '#BDC3C7',// 前面顏色
　　'note': '盯著你看', // 圖元冒泡標(biāo)注
　　'note.face': 'top',
　　'note.position': 7,
　　'note.t3': [0, 0, 10],
　　'note.autorotate': true// 圖標(biāo)在 3D 下是否自動朝向眼睛的方向
});

代碼中有一些屬性，我已經(jīng)幫大家寫好了詳細(xì)的注釋。在此獻(xiàn)上各種關(guān)于 'shape3d' 的圖形的值，方便大家玩耍：

以上就是關(guān)于“如何使用基于HTML5 Canvas的3D渲染引擎界面以及吸附等效果”的內(nèi)容，如果改文章對你有所幫助并覺得寫得不錯，勞請分享給你的好友一起學(xué)習(xí)新知識，若想了解更多相關(guān)知識內(nèi)容，請多多關(guān)注億速云行業(yè)資訊頻道。