HTML5的WebGL3D檔案館圖書可視化管理系統的實現

本篇文章給大家帶來的內容是關於HTML5的WebGL3D檔案館圖書可視化管理系統的實現，有一定的參考價值，有需要的朋友可以參考一下，希望對你有所協助。

前言

檔案管理系統是通過建立統一的標準以規範整個檔案管理，包括規範各業務系統的檔案管理的完整的檔案資源資訊共用服務平台，主要實現檔案流水化採集功能。為企事業單位的檔案現代化管理，提供完整的解決方案，檔案管理系統既可以自成系統，為使用者提供完整的檔案管理和網路查詢功能，也可以與本單位的OA辦公自動化和DPM設計過程管理，或者與MIS資訊管理系統相結合，形成更加完善的現代化資訊管理網路。傳統檔案館隨著社會的快速發展與變化，其內在形式上也發生了巨大變化，逐漸演變為現代智慧檔案館。智慧檔案館以現代科技為依託，充分結合現代物聯網技術與雲端運算技術構建完善的城市智慧檔案，實現了現代社會全面管理的目標。本文以當前流行的 H5 技術為主，為現代智慧檔案館提供一套 WEB 解決方案。

代碼實現

情境搭建

在本例中，將使用 HT UI 組件對頁面實現布局；使用 RelativeLayout 相對布局器將頁面分為三個部分：left, top, center，使用 VBoxLayout 縱向布局器將 LEFT 部分分為 logo，editor，chart 三個部分

Graph3dView 載入 3D 情境

Graph3dView 是 HT 組件中載入 3D 模型的拓撲組件，RelativeLayout 則是 HT 提供的 UI 解決方案，UI 組件中提供 HTView 組件來實現拓撲與 UI 的融合。

// 初始化相對布局器var relativeLayout = new ht.ui.RelativeLayout();// 初始化 3D 拓撲var g3dView = new ht.graph3d.Graph3dView();// 初始化 HTVIEW 組件， 並將 3D 拓撲放入其中var htView = new ht.ui.HTView(g3dView);// 布局器載入 HTVIEW 組件relativeLayout.addView(htView, {    width: 'match_parent',  // 填滿    height: 'match_parent', // 填滿    marginTop: 64,            // 為 TOP 留下空間    marginLeft: 250            // 為 LEFT 留下空間});

建立 LEFT 中的檔案袋模型

左側的 EDITOR 部分使用 HT 的調色盤組件（ht.widget.Palette）, 將檔案袋添加到調色盤上，並設定為可以拖拽：

var palette = new ht.widget.Palette();// palette 面板是將圖元都分在“組”裡面，然後向“組”中添加圖元即可var group = new ht.Group();// 設定分組為開啟的狀態group.setExpanded(true);// 設定組的說明group.setName('基礎圖元');palette.dm().add(group);// 添加子圖元var childNode = new ht.Node();childNode.setParent(group);childNode.setName(name);childNode.setImage(image);childNode.s({    'draggable': true,                     // true 為可拖拽     'image.stretch': 'centerUniform'    // 圖片申展方式});palette.dm().add(childNode);

實現從調色盤中將圖元拖拽至 3D 情境

在上一步中我們對調色盤中的圖元屬性設定了可拖拽，此時可以實現拖拽圖元的動畫。但是並不能直接將圖元拖拽到 3D 情境中，實現思路是：

1. 在拖拽時擷取拖拽的圖元資訊

2. 拖拽到對應位置時顯示可擺放位置

3. 結束拖拽後在對應位置建立對應的 3D 模型

對應代碼實現如下：

拖拽時擷取圖元資訊

g3dView.getView().addEventListener('dragover', function(e) {    e.preventDefault();    var paletteNode = palette.dm().sm().ld();// 擷取 palette 上最後選中的節點     if (!paletteNode || !g3d.getDataAt(e)) return;        // 擷取滑鼠下的節點    var data = g3d.getDataAt(e);    if (data.s('shape3d') === '檔案櫃.json') {        // 記錄檔案袋拖拽到的是哪個檔案櫃        g3dView._focusData = data;    }});

拖拽到對應位置時建立 3D 模型，在實際實現過程中由於很難準確地擷取到檔案櫃中每一個可以擺放檔案袋的座標位置，所以在本例中採用了預置的方法。具體原理就是在先建立一個正常不可見的檔案櫃模型，並在其中將檔案袋都擺放完整，在拖拽時，將此不可見的模型與將要擺放的模型重合，此時只需判斷滑鼠所在的點下是否存在預置的模型存在就可以知道該處是否可以建立 3D 模型，實現效果如下：

g3dView.getView().addEventListener('dragover', function(e) {     ... // 舊邏輯省略        // 拖拽下來的時候設定 所有的 displayName 為 box 的節點 為可見 （這樣拖拽才能擷取到預置模型）    array.forEach(function(data) {        data.s('3d.visible', true);    });    var data = g3d.getDataAt(e);    if (data.s('shape3d') === '檔案櫃.json') {        // 記錄檔案袋拖拽到的是哪個檔案櫃        g3dView._focusData = data;        // 將預置模型移動到拖拽的柜子座標        shelf.p3(data.p3());    }    if(data.getDisplayName() === 'box') {        // 將對應座標下預置的檔案袋模型進行顯示        // 該屬性可修改模型的透明度，更多屬性可參考 HT 風格手冊        data.s('shape3d.opacity',  0.8);    }    ...})g3dView.getView().addEventListener('drop', function(e) {    // 擷取滑鼠位置模型        var data = g3dView.getDataAt(e);    if(!data) return;    // 滑鼠位置不是預置模型，直接跳過    if(data.getDisplayName() !== 'box') return;    data.s('shape3d.opacity', 0);    // 放手時候設定 所有的 displayName 為 box 的節點 不可見    array.forEach(function(data) {        data.s('3d.visible', false);    });    var node = new ht.Node();    node.s('shape3d', url); // 檔案袋 3D 模型地址    node.r3([Math.PI/2, -Math.PI/2, 0]); // 旋轉檔案袋模型， 使其平放    node.p3(data.p3());    node.setParent(g3dView._focusData);    node.setHost(g3dView._focusData);});

檔案櫃虛化效果實現

上面我們已經實現了檔案袋拖拽至 3D 情境的效果，但是我們可以發現檔案袋模型遠小於柜子，要將檔案袋擺放到正確的位置並不是那麼容易。所以此時我們可以將需要操作的檔案櫃放大到正中間，其它模型進行虛化處理。

// 3D 拓撲互動監聽g3dView.mi(function(e){    if(e.kind === 'doubleClickData') {        // 雙擊事件        var shape3d = e.data.s('shape3d'),            parentShape3d = e.data.getParent() && e.data.getParent().s('shape3d');        if (shape3d && shape3d.indexOf('檔案櫃') > -1) {            // 重點突出檔案櫃            showDetail(e.data);        }        else if (parentShape3d && parentShape3d.indexOf('檔案櫃') > -1) {            showDetail(e.data.getParent());        }    }});showDetail = function(data) {    // 儲存進入虛化狀態前 視角 與 中心點    eyeBack = ht.Default.clone(graph3dView.getEye());    centerBack = ht.Default.clone(graph3dView.getCenter());    // 設定相機指向配置    var opt = {};    opt.animation = true;    opt.ratio = 1;    opt.direction = [1, 0.5, 0];    opt.center = [data.getX(), 100, data.getY()];    graph3dView.flyTo(data, opt);    focusData = data;    data.s('select.brightness', 1);    dataModel.each(function (d) {        if (d === focusData || (!d.s('3d.selectable') && d.getTag() !== 'wall')            || d.getParent() === focusData || d.getDisplayName() === 'box') return;        // 將拓撲中除了要操作的柜子 與柜子中檔案袋 以及牆外 透明度都設定為 opacity (0~1)                // 儲存設定前配置， 還原用        if (!opacityMap[d.getId()]) {            opacityMap[d.getId()] = {                'shape3d.opacity': d.s('shape3d.opacity'),                'shape3d.transparent': d.s('shape3d.transparent'),                'all.opacity': d.s('all.opacity'),                'all.transparent': d.s('all.transparent'),                'left.opacity': d.s('left.opacity'),                'left.transparent': d.s('left.transparent'),                'right.opacity': d.s('right.opacity'),                'right.transparent': d.s('right.transparent'),                'front.opacity': d.s('front.opacity'),                'front.transparent': d.s('front.transparent'),                'back.opacity': d.s('back.opacity'),                'back.transparent': d.s('back.transparent'),                'top.opacity': d.s('top.opacity'),                'top.transparent': d.s('top.transparent'),                'bottom.opacity': d.s('bottom.opacity'),                'bottom.transparent': d.s('bottom.transparent'),                '3d.selectable': d.s('3d.selectable')            }        }                // 透明度設定為 opacity        d.s({            'shape3d.opacity': opacity,            'shape3d.transparent': true,            'all.opacity': opacity,            'all.transparent': true,            'left.opacity': opacity,            'left.transparent': true,            'right.opacity': opacity,            'right.transparent': true,            'front.opacity': opacity,            'front.transparent': true,            'back.opacity': opacity,            'back.transparent': true,            'top.opacity': opacity,            'top.transparent': true,            'bottom.opacity': opacity,            'bottom.transparent': true,            '3d.selectable': false        });    });}

退出虛化模式，以監控 3D 拓撲的選中變化來實現

g3dView.dm().ms(function(e) {    var lastData = g3dView.sm().ld();    // 判斷是否進行虛化    if(focusData) {        if(lastData === focusData || (lastData && lastData.getParetn() === focusData)) return;        g3dView.setEye(eyeBack);        g3dView.setCenter(centerBack);        // 還原模型的原透明度        g3dView.dm().each(function (d) {            if (d === focusData) return;            d.s(opacityMap[d.getId()]);        });                focusData.s('select.brightness', 0.7);        focusData = null;        eyeBack = null;        centerBack = null;    }});

快速查詢功能實現

在 HT 的組件中有提供快速查詢外掛程式 QuickFinder ，此次我們就運用該外掛程式來實現簡單的檔案編號查詢

// 初始化 輸入框var textField = new ht.ui.TextField;textField.setIcon("imgs/search.json");textField.setIconPosition("left");// 初始化查詢器，條件：idvar finder = new ht.QuickFinder(library.view.dm, "id");// 輸入框點擊查詢按鈕時觸發textField.on('p:value', function(e) {    var dm = library.view.dm;    var value = e.newValue;    var datas = finder.find(value);    // 查詢到對應的圖元時，我們將第一個結果進行選中    if (datas && datas.size() > 0) {        library.view.dm.sm().ss(datas.get(0));    }});

總結

經過以上功能的實現，一個基礎的智慧檔案管理系統就成形了。當然做為一個智慧管理系統，這些還是遠遠不夠的，例如檔案動態監控、檔案室內人員走動監控、視頻監控、溫度監控、災害警示等等模組都是後期可以完善的地方。這裡只是簡單地為大家提供了一個基於 HTML5 WEBGL 的 3D 解決方案。同樣原理，智能樓宇、智能機房、智能城市也可以基於此來實現。