HTML5 WebGL3D图书档案可视化管理系统的实现

本文的内容与HTML5 WebGL3D档案书可视化管理系统的实现有关. 它具有一定的参考价值. 有需要的朋友可以参考它，希望对您有帮助.

档案管理系统是一个完整的档案资源信息共享服务平台，它通过建立统一的标准（包括每个业务系统的文件管理）来统一整个文件管理，该标准主要实现了档案收集功能. 为企事业单位档案的现代化管理提供完整的解决方案. 档案管理系统可以是一个独立的系统，可以为用户提供完整的档案管理和网络查询功能. ，或与MIS信息管理系统结合以形成更全面的现代信息管理网络. 随着社会的飞速发展和变化，传统档案馆的内部形式发生了巨大变化，并逐步发展成为现代智能档案馆. 依靠现代技术，智能档案充分整合了现代物联网技术和云计算技术，构建了完整的城市智能档案，实现了现代社会综合管理的目标. 本文重点介绍当前流行的H5技术，并提供了一套用于现代智能档案的WEB解决方案.

在此示例中，页面将使用HT UI组件进行布局；该页面将使用RelativeLayout相对布局分为三个部分: 左，顶部，中心和左部分将使用VBoxLayout垂直布局分为徽标和编辑器. ，图表三部分

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 留下空间
});

左侧的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模型

相应的代码实现如下:

拖动时获取原始信息

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

HTFinder组件中提供了QuickFinder插件图书管理系统html代码，这次我们将使用该插件来实现简单的文件编号查询

// 初始化 输入框
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代码，智能计算机房和智能城市.

本文来自电脑杂谈，转载请注明本文网址：
https://www.pc-fly.com/a/jisuanjixue/article-152818-1.html