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");

// 初始化查询器，条件：id
var 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 解決方案。同樣原理，智慧樓宇、智慧機房、智慧城市也可以基於此來實現。

相關推薦：

關於圖書館管理系統驗證管理員的有關問題

html結合工業互聯網實現智慧飛機控制（附程式碼）
#

HTML5結合互聯網 實現的3D隧道（附程式碼）

以上是HTML5的WebGL3D檔案館圖書視覺化管理系統的實現的詳細內容。更多資訊請關注PHP中文網其他相關文章！