這篇文章主要為大家展示了如何使用基于HTML5 Canvas的3D渲染引擎界面以及吸附等效果，內(nèi)容簡(jiǎn)而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶大家一起來研究并學(xué)習(xí)一下“如何使用基于HTML5 Canvas的3D渲染引擎界面以及吸附等效果”這篇文章吧。
1、簡(jiǎn)易性：超級(jí)文本標(biāo)記語言版本升級(jí)采用超集方式，從而更加靈活方便，適合初學(xué)前端開發(fā)者使用。 2、可擴(kuò)展性：超級(jí)文本標(biāo)記語言的廣泛應(yīng)用帶來了加強(qiáng)功能，增加標(biāo)識(shí)符等要求，超級(jí)文本標(biāo)記語言采取子類元素的方式，為系統(tǒng)擴(kuò)展帶來保證。 3、平臺(tái)無關(guān)性：超級(jí)文本標(biāo)記語言能夠在廣泛的平臺(tái)上使用，這也是萬維網(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 組件通過對(duì) WebGL 底層技術(shù)的封裝，與 HT 其他組件一樣，基于 HT 統(tǒng)一的 DataModel 數(shù)據(jù)模型來驅(qū)動(dòng)圖形顯示，極大降低了 3D 圖形技術(shù)開發(fā)的門檻。同時(shí) HT 提供了強(qiáng)大的完全基于 HTML5 技術(shù) 3D 圖形建模設(shè)計(jì)器，用戶無需編碼即可快速可視化搭建各種 3D 場(chǎng)景，可以說 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 的界面，所以我們首先要?jiǎng)?chuàng)建 3D 渲染引擎組件，可視化呈現(xiàn)數(shù)據(jù)模型的三維環(huán)境場(chǎng)景。
重慶分公司
重慶分公司
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 手冊(cè)（ http://www.hightopo.com/guide/guide/core/3d/ht-3d-guide.html ）。
然后我們?cè)俳o它加上一些選中效果。Graph4dView 中被選中的圖元會(huì)顯示為較暗的狀態(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í)，宿主移動(dòng)或旋轉(zhuǎn)時(shí)會(huì)帶動(dòng)所有吸附者 node.setHost(host);
dataModel.add(node); return node;
}講到了這，我們來說說吸附，吸附功能對(duì)于設(shè)計(jì)有層次關(guān)系的模型非常方便，例如設(shè)備面板吸附上設(shè)備機(jī)框，設(shè)備端口吸附上設(shè)備面板，這樣從機(jī)框 - 面板 - 端口的層次關(guān)系吸附，使得用戶拖動(dòng)整體機(jī)框時(shí)所有這個(gè)層次下的圖元都會(huì)跟隨移動(dòng)。對(duì)于 3D 的場(chǎng)景下，吸附的概念更進(jìn)一步延伸，當(dāng)機(jī)框在三維空間進(jìn)行任意位置偏移以及任意角度旋轉(zhuǎn)時(shí)，所有吸附的相關(guān)圖元都會(huì)正確的跟隨平移，并做出相應(yīng)位置對(duì)應(yīng)的旋轉(zhuǎn)，以達(dá)到整體設(shè)備各個(gè)圖形部分保持物理相對(duì)位置一致。
下面我們來一起創(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 下是否自動(dòng)朝向眼睛的方向
});代碼中有一些屬性，我已經(jīng)幫大家寫好了詳細(xì)的注釋。在此獻(xiàn)上各種關(guān)于 'shape3d' 的圖形的值，方便大家玩耍：
以上就是關(guān)于“如何使用基于HTML5 Canvas的3D渲染引擎界面以及吸附等效果”的內(nèi)容，如果改文章對(duì)你有所幫助并覺得寫得不錯(cuò)，勞請(qǐng)分享給你的好友一起學(xué)習(xí)新知識(shí)，若想了解更多相關(guān)知識(shí)內(nèi)容，請(qǐng)多多關(guān)注創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計(jì)公司行業(yè)資訊頻道。
另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。
