主頁 > 知識(shí)庫 > 基于HTML5 WebGL的3D機(jī)房的示例

基于HTML5 WebGL的3D機(jī)房的示例

熱門標(biāo)簽:成都智能外呼系統(tǒng)平臺(tái) 鎮(zhèn)江智能外呼系統(tǒng)有效果嗎 四川點(diǎn)撥外呼系統(tǒng) 南寧點(diǎn)撥外呼系統(tǒng)哪家公司做的好 江蘇智能電銷機(jī)器人哪家好 黃島區(qū)地圖標(biāo)注 電銷機(jī)器人電話用什么卡 當(dāng)涂高德地圖標(biāo)注 云南大理400電話申請(qǐng)官方

前言

用 WebGL 渲染的 3D 機(jī)房現(xiàn)在也不是什么新鮮事兒了,這篇文章的主要目的是說明一下,3D 機(jī)房中的 eye 和 center 的問題,剛好在項(xiàng)目中用上了,好生思考了一番,最終覺得這個(gè)例子最符合我的要求,就拿來作為記錄。

效果圖

這個(gè) 3D 機(jī)房的 Demo 做的還不錯(cuò),比較美觀,基礎(chǔ)的交互也都滿足,接下來看看怎么實(shí)現(xiàn)。

代碼生成

定義類

首先從 index.html 中調(diào)用的 js 路徑順序一個(gè)一個(gè)打開對(duì)應(yīng)的 js,server.js 中自定義了一個(gè) Editor.Server 類由 HT 封裝的 ht.Default.def 函數(shù)創(chuàng)建的(注意,創(chuàng)建的類名 Editor.Server 前面的 Editor 不能用 E 來替代):

ht.Default.def('Editor.Server', Object, {//第一個(gè)參數(shù)為類名,如果為字符串,自動(dòng)注冊(cè)到HT的classMap中;第二個(gè)參數(shù)為此類要繼承的父類;第三個(gè)參數(shù)為方法和變量的聲明
    addToDataModel: function(dm) { //將節(jié)點(diǎn)添加進(jìn)數(shù)據(jù)容器
        dm.add(this._node);// ht 中的預(yù)定義函數(shù),將節(jié)點(diǎn)通過 add 方法添加進(jìn)數(shù)據(jù)容器中
    },
    setHost: function() { //設(shè)置吸附
        this._node.setHost.apply(this._node, arguments); 
    },
    s3: function() {//設(shè)置節(jié)點(diǎn)的大小
        this._node.s3.apply(this._node, arguments);
    },
    setElevation: function() {//控制Node圖元中心位置所在3D坐標(biāo)系的y軸位置
        this._node.setElevation.apply(this._node, arguments);
    }
});

創(chuàng)建 Editor.Server 類

這個(gè)類可以創(chuàng)建一個(gè) ht.Node 節(jié)點(diǎn),并設(shè)置節(jié)點(diǎn)的顏色和前面貼圖:

var S = E.Server = function(obj) {//服務(wù)器組件
    var color = obj.color, 
        frontImg = obj.frontImg;

    var node = this._node = new ht.Node();//創(chuàng)建節(jié)點(diǎn)
    node.s({//設(shè)置節(jié)點(diǎn)的樣式 s 為 setStyle 的縮寫
        'all.color': color,//設(shè)置節(jié)點(diǎn)六面的顏色
        'front.image': frontImg //設(shè)置節(jié)點(diǎn)正面的圖片
    });
};

這樣我在需要?jiǎng)?chuàng)建服務(wù)器組件的位置直接 new 一個(gè)新的服務(wù)器組件對(duì)象即可,并且能夠直接調(diào)用我們上面聲明的 setHost 等函數(shù),很快我們就會(huì)用上。

接下來創(chuàng)建 Editor.Cabinet 機(jī)柜類 ,方法跟上面 Editor.Server 類的定義方法差不多:

ht.Default.def('Editor.Cabinet', Object, {
    addToDataModel: function(dm) {
        dm.add(this._door);
        dm.add(this._node);
        this._serverList.forEach(function(s) { 
            s.addToDataModel(dm); 
        });
    },
    p3: function() { 
        this._node.p3.apply(this._node, arguments);//設(shè)置節(jié)點(diǎn)的 3d 坐標(biāo)
    }
});

創(chuàng)建 Editor.Cabinet 類

這個(gè)類相對(duì)于前面的 Editor.Server 服務(wù)器組件類要相對(duì)復(fù)雜一點(diǎn),這個(gè)類中創(chuàng)建了一個(gè)柜身、柜門以及機(jī)柜內(nèi)部的服務(wù)器組件:

var C = E.Cabinet = function(obj) {
    var color = obj.color,
        doorFrontImg = obj.doorFrontImg,
        doorBackImg = obj.doorBackImg,
        s3 = obj.s3;

    var node = this._node = new ht.Node(); // 柜身
    node.s3(s3);//設(shè)置節(jié)點(diǎn)的大小 為 setSize3d
    node.a('cabinet', this);//自定義 cabinet 屬性
    node.s({//設(shè)置節(jié)點(diǎn)的樣式 為 setStyle
        'all.color': color,//設(shè)置節(jié)點(diǎn)六面的顏色
        'front.visible': false//設(shè)置節(jié)點(diǎn)前面是否可見
    });

    if (Math.random() > 0.5) {
        node.addStyleIcon('alarm', {//向節(jié)點(diǎn)上添加 icon 圖標(biāo)
            names: ['icon 溫度計(jì)'],//包含多個(gè)字符串的數(shù)組,每個(gè)字符串對(duì)應(yīng)一張圖片或矢量(通過ht.Default.setImage注冊(cè))
            face: 'top',//默認(rèn)值為front,圖標(biāo)在3D下的朝向,可取值left|right|top|bottom|front|back|center
            position: 17,//指定icons的位置
            autorotate: 'y',//默認(rèn)值為false,圖標(biāo)在3D下是否自動(dòng)朝向眼睛的方向
            t3: [0, 16, 0],//默認(rèn)值為undefined,圖標(biāo)在3D下的偏移,格式為[x,y,z]
            width: 37,//指定每個(gè)icon的寬度,默認(rèn)根據(jù)注冊(cè)圖片時(shí)的寬度
            height: 32,//指定每個(gè)icon的高度,默認(rèn)根據(jù)注冊(cè)圖片時(shí)的高度
            textureScale: 4,//默認(rèn)值為2,該值代表內(nèi)存實(shí)際生成貼圖的倍數(shù),不宜設(shè)置過大否則影響性能
            visible: { func: function() { return !!E.alarmVisible; }}//表示該組圖片是否顯示
        });
    }

    var door = this._door = new ht.DoorWindow();//柜門
    door.setWidth(s3[0]);//置圖元在3D拓?fù)渲械膞軸方向的長(zhǎng)度
    door.setHeight(1);//設(shè)置圖元在3D拓?fù)渲械膠軸長(zhǎng)度
    door.setTall(s3[1]);//控制Node圖元在y軸的長(zhǎng)度
    door.setElevation(0);//設(shè)置圖元中心在3D坐標(biāo)系中的y坐標(biāo)
    door.setY(s3[2] * 0.5);//設(shè)置節(jié)點(diǎn)在 y 軸的位置
    door.setHost(node);//設(shè)置吸附
    door.s({//設(shè)置節(jié)點(diǎn)樣式 setStyle
        'all.color': color,//設(shè)置節(jié)點(diǎn)六面顏色
        'front.image': doorFrontImg,//設(shè)置節(jié)點(diǎn)正面圖片
        'front.transparent': true,//設(shè)置節(jié)點(diǎn)正面是否透明
        'back.image': doorBackImg,//設(shè)置節(jié)點(diǎn)背面的圖片
        'back.uv': [1,0, 1,1, 0,1, 0,0],//自定義節(jié)點(diǎn)后面uv貼圖,為空采用默認(rèn)值[0,0, 0,1, 1,1, 1,0]
        'dw.axis': 'right'//設(shè)置DoorWindow圖元展開和關(guān)閉操作的旋轉(zhuǎn)軸,可取值left|right|top|bottom|v|h
    });

    var serverList = this._serverList = []; 
    var max = 6,
        list = E.randomList(max, Math.floor(Math.random() * (max - 2)) + 2); //global.js 中聲明的獲取隨機(jī)數(shù)的函數(shù) 
    var server, h = s3[0] / 4;
    list.forEach(function(r) {
        var server = new E.Server({ //服務(wù)器組件
            color: 'rgb(51,49,49)',
            frontImg: '服務(wù)器 組件精細(xì)'
        });
        server.s3(s3[0] - 2, h, s3[2] - 4);//設(shè)置節(jié)點(diǎn)大小
        server.setElevation((r - max * 0.5) * (h + 2));//設(shè)置節(jié)點(diǎn)中心點(diǎn)在 y 軸的坐標(biāo)
        server.setHost(node);//設(shè)置節(jié)點(diǎn)的吸附

        serverList.push(server);//向 serverList 中添加 server 節(jié)點(diǎn)
    });
};

上面代碼中唯一沒提到的是 Editor.randomList 函數(shù),這個(gè)函數(shù)是在 global.js 文件中聲明的,聲明如下:

var E = window.Editor = {
    leftWidth: 0,
    topHeight: 40,
    randomList: function(max, size) {
        var list = [], ran;
        while (list.length < size) {
            ran = Math.floor(Math.random() * max);
            if (list.indexOf(ran) >= 0) 
                continue;
            list.push(ran);
        }
        return list;
    }
};

好了,場(chǎng)景中的各個(gè)部分的類都創(chuàng)建完成,那我們就該將場(chǎng)景創(chuàng)建起來,然后將這些圖元都堆進(jìn)去!

場(chǎng)景創(chuàng)建

如果熟悉的同學(xué)應(yīng)該知道,用 HT 創(chuàng)建一個(gè) 3D 場(chǎng)景只需要 new 一個(gè) 3D 組件,再將通過 addToDOM 函數(shù)將這個(gè)場(chǎng)景添加進(jìn) body 中即可:

var g3d = E.main = new ht.graph3d.Graph3dView(); //3d 場(chǎng)景

main.js 文件中主要做的是在 3D 場(chǎng)景中一些必要的元素,比如墻面,地板,門,空調(diào)以及所有的機(jī)柜的生成和排放位置,還有非常重要的交互部分。

墻體,地板,門,空調(diào)和機(jī)柜的創(chuàng)建我就不貼代碼出來了,有興趣的請(qǐng)自行查看代碼,這里主要說一下雙擊機(jī)柜以及與機(jī)柜有關(guān)的任何物體(柜門,服務(wù)器設(shè)備)則 3D 中 camera 的視線就會(huì)移動(dòng)到雙擊的機(jī)柜的前方某個(gè)位置,而且這個(gè)移動(dòng)是非常順滑的,之前技藝不精,導(dǎo)致這個(gè)部分想了很久,最后參考了這個(gè) Demo 的實(shí)現(xiàn)方法。

為了能夠重復(fù)地設(shè)置 eye 和 center,將設(shè)置這兩個(gè)參數(shù)對(duì)應(yīng)的內(nèi)容封裝為 setEye 和 setCenter 方法,setCenter 方法與 setEye 方法類似,這里不重復(fù)贅述:

// 設(shè)置眼睛位置
var setEye = function(eye, finish) {
    if (!eye) return;
    var e = g3d.getEye().slice(0),//獲取當(dāng)前 eye 的值
        dx = eye[0] - e[0],
        dy = eye[1] - e[1],
        dz = eye[2] - e[2];
    // 啟動(dòng) 500 毫秒的動(dòng)畫過度
    ht.Default.startAnim({
        duration: 500,
        easing: easing,//動(dòng)畫緩動(dòng)函數(shù)
        finishFunc: finish || function() {}, //動(dòng)畫結(jié)束后調(diào)用的函數(shù)
        action: function(v, t) {//設(shè)置動(dòng)畫v代表通過easing(t)函數(shù)運(yùn)算后的值,t代表當(dāng)前動(dòng)畫進(jìn)行的進(jìn)度[0~1],一般屬性變化根據(jù)v參數(shù)進(jìn)行
            g3d.setEye([ //設(shè)置 3D 場(chǎng)景中的 eye 眼睛的值,為一個(gè)數(shù)組,分別對(duì)應(yīng) x,y,z 軸的值 
                e[0] + dx * v,
                e[1] + dy * v,
                e[2] + dz * v
            ]);
        }
    });
};

我沒有重復(fù)聲明 setCenter 函數(shù)不代表這個(gè)函數(shù)不重要,恰恰相反,這個(gè)函數(shù)在“視線”移動(dòng)的過程中起到了決定性的作用,上面的 setEye 函數(shù)相當(dāng)于我想走到我的目標(biāo)位置的前面(至少我定義的時(shí)候是這種用途),而 sCenter 的定義則是將我的視線移到了目標(biāo)的位置(比如我可以站在我現(xiàn)在的位置看我右后方的物體,也可以走到我右后方去,站在那個(gè)物體前面看它),這點(diǎn)非常重要,請(qǐng)大家好好品味一下。

雙擊事件倒是簡(jiǎn)單,只要監(jiān)聽 HT 封裝好的事件,判斷事件類型,并作出相應(yīng)的動(dòng)作即可:

g3d.mi(function(e) {//addInteractorListener 事件監(jiān)聽函數(shù)
    if (e.kind !== 'doubleClickData')  //判斷事件類型為雙擊節(jié)點(diǎn)
        return;
    var data = e.data, p3;

    if (data.a('cabinet')) //機(jī)身
        p3 = data.p3();
    else {
        host = data.getHost(); //獲取點(diǎn)擊節(jié)點(diǎn)的吸附對(duì)象
        if (host && host.a('cabinet')) {//如果吸附對(duì)象為 cabinet
            p3 = host.p3();
        }
    }

    if (!p3) return;

    setCenter(p3); //設(shè)置 center 目標(biāo)的要移向位置為 cabinet 的位置
    setEye([p3[0], 211, p3[2] + 247]); //設(shè)置 eye 眼睛要移向的位置
});

頂部導(dǎo)航欄

一開始看到這個(gè)例子的時(shí)候我在想,這人好厲害,我用 HT 這么久,用 HT 的 ht.widget.Toolbar 還沒能做出這么漂亮的效果,看著看著發(fā)現(xiàn)這原來是用 form 表單做的,厲害厲害,我真是太愚鈍了。

var form = E.top = new ht.widget.FormPane(); //頂部 表單組件
form.setRowHeight(E.topHeight);//設(shè)置行高
form.setVGap(-E.topHeight);//設(shè)置表單組件水平間距 設(shè)置為行高的負(fù)值則可以使多行處于同一行
form.setVPadding(0);//設(shè)置表單頂部和頂部與組件內(nèi)容的間距
form.addRow([null, {//向表單中添加一行組件,第一個(gè)參數(shù)為元素?cái)?shù)組,元素可為字符串、json格式描述的組件參數(shù)信息、html元素或者為null
    image: {
        icon: './symbols/inputBG.json',
        stretch: 'centerUniform'
    }
}], [40, 260]);//第二個(gè)參數(shù)為每個(gè)元素寬度信息數(shù)組,寬度值大于1代表固定絕對(duì)值,小于等于1代表相對(duì)值,也可為80+0.3的組合
form.addRow([null, null, {
    id: 'searchInput',
    textField: {}
}, {
    element: '機(jī)房可視化管理系統(tǒng)',
    color: 'white',
    font: '18px arial, sans-serif'
}, null, {
    button: {
        // label: '視圖切換',
        icon: './symbols/viewChange.json',
        background: null,
        selectBackground: 'rgb(128,128,128)',
        borderColor: 'rgba(0, 0, 0, 0)',
        onClicked: function() {
            E.focusTo();
        }
    }
}, null, {
    button: {
        // label: '告警',
        icon: './symbols/alarm.json',
        togglable: true,
        selected: false,
        background: null,
        selectBackground: 'rgb(128,128,128)',
        borderColor: 'rgba(0, 0, 0, 0)',
        onClicked: function(e) {
            E.setAlarmVisible(this.isSelected());
        }
    }
}, null], [40, 42, 218, 300, 0.1, 50, 10, 50, 10]);

以上都只是能實(shí)現(xiàn),但是并沒有真正地添加進(jìn) html 標(biāo)簽中,也就意味著,現(xiàn)在界面上什么都沒有!別忘了在頁面加載的時(shí)候?qū)?3D 場(chǎng)景添加進(jìn) body 中,同時(shí)也別忘了將 form 表單添加進(jìn) body 中,并且設(shè)置窗口大小變化事件時(shí),form 表單也需要實(shí)時(shí)更新:

window.addEventListener('load', function() {
    g3d.addToDOM(); //將 3D 場(chǎng)景添加進(jìn) body 中

    document.body.appendChild(E.top.getView()); //將 form 表單組件底層 div 添加進(jìn) body 中

    window.addEventListener('resize', function() {//窗口大小變化事件監(jiān)聽
        E.top.iv();//更新 form 表單的底層 div 
    });
});

這里說明一下 addToDOM 函數(shù),對(duì)于了解 HT 的機(jī)制非常重要。HT 的組件一般都會(huì)嵌入 BorderPane、SplitView 和 TabView 等容器中使用,而最外層的 HT 組件則需要用戶手工將 getView() 返回的底層 div 元素添加到頁面的 DOM 元素中,這里需要注意的是,當(dāng)父容器大小變化時(shí),如果父容器是 BorderPane 和 SplitView 等這些 HT 預(yù)定義的容器組件,則 HT 的容器會(huì)自動(dòng)遞歸調(diào)用孩子組件invalidate 函數(shù)通知更新。但如果父容器是原生的 html 元素, 則 HT 組件無法獲知需要更新,因此最外層的 HT 組件一般需要監(jiān)聽 window 的窗口大小變化事件,調(diào)用最外層組件 invalidate 函數(shù)進(jìn)行更新。

為了最外層組件加載填充滿窗口的方便性,HT 的所有組件都有 addToDOM 函數(shù),其實(shí)現(xiàn)邏輯如下,其中 iv 是 invalidate 的簡(jiǎn)寫:

addToDOM = function(){   
    var self = this,
        view = self.getView(),   
        style = view.style;
    document.body.appendChild(view); //將場(chǎng)景的底層 div 添加進(jìn) body 中           
    style.left = '0';//HT 默認(rèn)將所有的組件底層div的position設(shè)置為absolute
    style.right = '0';
    style.top = '0';
    style.bottom = '0';      
    window.addEventListener('resize', function () { self.iv(); }, false); //窗口大小變化監(jiān)聽事件,通知組件變化更新          
}

這樣,所有的代碼就結(jié)束了,可以自己右鍵“檢查”,network 中可以獲取相對(duì)應(yīng)的 json 文件。

以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。

標(biāo)簽:南京 佳木斯 淮安 咸寧 酒泉 十堰 廣西 西寧

巨人網(wǎng)絡(luò)通訊聲明:本文標(biāo)題《基于HTML5 WebGL的3D機(jī)房的示例》,本文關(guān)鍵詞  基于,HTML5,WebGL,的,機(jī)房,;如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問題,煩請(qǐng)?zhí)峁┫嚓P(guān)信息告之我們,我們將及時(shí)溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò),涉及言論、版權(quán)與本站無關(guān)。
  • 相關(guān)文章
  • 下面列出與本文章《基于HTML5 WebGL的3D機(jī)房的示例》相關(guān)的同類信息!
  • 本頁收集關(guān)于基于HTML5 WebGL的3D機(jī)房的示例的相關(guān)信息資訊供網(wǎng)民參考!
  • 推薦文章