Implementation of HTML5 WebGL3D Archives Library Visual Management System

The content of this article is about the implementation of the HTML5 WebGL3D archive library visual management system. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

Foreword

The archives management system is a complete archive resource information sharing service platform that standardizes the entire document management by establishing unified standards, including standardizing the document management of each business system. It mainly realizes archives flow. collection function. Provide a complete solution for the modern management of files in enterprises and institutions. The file management system can be a self-contained system to provide users with complete file management and network query functions, or it can be integrated with the unit's OA office automation and DPM design process management , or combined with MIS information management system to form a more complete modern information management network. With the rapid development and changes of society, traditional archives have also undergone tremendous changes in their internal form, gradually evolving into modern smart archives. The smart archives relies on modern technology and fully combines modern Internet of Things technology and cloud computing technology to build complete urban smart archives and achieve the goal of comprehensive management of modern society. This article focuses on the currently popular H5 technology and provides a set of WEB solutions for modern smart archives.

Code implementation

Scene construction

In this example, HT UI components will be used to layout the page; use The RelativeLayout relative layouter divides the page into three parts: left, top, and center. Use the VBoxLayout vertical layouter to divide the LEFT part into three parts: logo, editor, and chart

Graph3dView loads 3D scenes

Graph3dView is the topology component in the HT component that loads 3D models. RelativeLayout is the UI solution provided by HT. The UI component provides the HTView component to implement topology and UI. fusion.

// 初始化相对布局器
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 留下空间
});

Create the portfolio model in LEFT

The EDITOR part on the left uses HT's palette component (ht.widget.Palette) to add the portfolio to the palette. And set it to be draggable:

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

Achieve dragging primitives from the palette to the 3D scene

In the previous step, we set the properties of the primitives in the palette It can be dragged, and the animation of dragging elements can be realized at this time. However, the primitive cannot be directly dragged into the 3D scene. The implementation idea is:

1. Get the dragged primitive information when dragging

2. Display the placeable position when dragging to the corresponding position

3. Create the corresponding 3D model at the corresponding position after finishing dragging

The corresponding code is implemented as follows:

Get the element information when dragging

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;
    }

});

Create a 3D model when dragging to the corresponding position. In the actual implementation process, it is difficult to accurately obtain it in the filing cabinet. Every coordinate position where the portfolio can be placed, so the preset method is used in this example. The specific principle is to first create a normally invisible file cabinet model, and place all the file bags in it. When dragging, the invisible model coincides with the model to be placed. At this time, you only need to judge You can know whether a 3D model can be created there by checking whether there is a preset model under the point where the mouse is located. The effect is as follows:

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

File Realization of cabinet blur effect

Above we have realized the effect of dragging the archive bag to the 3D scene, but we can find that the archive bag model is much smaller than the cabinet, and it is not so easy to place the archive bag in the correct position. easy. So at this time we can enlarge the filing cabinet that needs to be operated to the middle, and blur the other models.

// 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
        });

    });
}

Exit the blur mode and monitor the selected changes of the 3D topology to achieve

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

Quick query function implementation

The quick query plug-in QuickFinder is provided in the HT component. This time we will use this plug-in to implement simple file number query

// 初始化 输入框
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));
    }
});

Summary

After the implementation of the above functions, a basic smart file management system has been formed. Of course, as a smart management system, these are far from enough. Modules such as dynamic monitoring of files, monitoring of people moving around in the archives room, video monitoring, temperature monitoring, disaster alarms, etc. are all areas that can be improved later. Here we simply provide you with a 3D solution based on HTML5 WEBGL. With the same principle, smart buildings, smart computer rooms, and smart cities can also be realized based on this.

Related recommendations:

Questions about the library management system verification administrator

html Combined with the industrial Internet to realize intelligent aircraft control (with code)

HTML5 combined with the Internet to realize 3D tunnel (with code)

The above is the detailed content of Implementation of HTML5 WebGL3D Archives Library Visual Management System. For more information, please follow other related articles on the PHP Chinese website!