HTML5 WebGL3D アーカイブライブラリビジュアル管理システムの実装-H5 チュートリアル-php.cn

この記事の内容は、HTML5 WebGL3D アーカイブブック視覚化管理システムの実装に関するものです。必要な方は参考にしていただければ幸いです。

はじめに

ファイル管理システムは、各業務システムのファイル管理の標準化を含め、統一規格を確立することでファイル管理全体を標準化する完全なファイルリソース情報共有サービスプラットフォームであり、主に効率化されたファイル収集機能を実現します。企業や機関における最新のファイル管理のための完全なソリューションを提供します。ファイル管理システムは、ユーザーに完全なファイル管理およびネットワーククエリ機能を提供する自己完結型システムにすることも、ユニットの OA オフィスオートメーションと統合することもできます。 DPM 設計プロセス管理、または MIS 情報管理システムと組み合わせて、より完全な最新の情報管理ネットワークを形成します。社会の急速な発展と変化に伴い、伝統的なアーカイブもその内部形態に大きな変化をもたらし、徐々に現代的なスマートアーカイブへと進化してきました。スマートアーカイブは最新のテクノロジーに依存し、最新のモノのインターネット技術とクラウドコンピューティング技術を完全に組み合わせて、完全な都市スマートアーカイブを構築し、現代社会の包括的な管理という目標を達成します。この記事では、現在普及している H5 テクノロジーに焦点を当て、最新のスマートアーカイブのための一連の WEB ソリューションを提供します。

コードの実装

シーン構築

この例では、HT UI コンポーネントを使用してページをレイアウトします。RelativeLayout 相対レイターを使用してページを 3 つの部分 (左、上、中央) に分割し、VBoxLayout を使用します。垂直レイアウトは、左側の部分をロゴ、エディター、チャートの 3 つの部分に分割します

HTML5 WebGL3D アーカイブライブラリビジュアル管理システムの実装

Graph3dView は 3D シーンをロードします

Graph3dView は HT コンポーネントに 3D モデルをロードするトポロジカルコンポーネントであり、RelativeLayout は UI ソリューションですHT が提供する HTView コンポーネントは、トポロジと UI の統合を実現するために 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 モデルを作成できるかどうかを確認できます。効果は次のとおりです:

HTML5 WebGL3D アーカイブライブラリビジュアル管理システムの実装

g3dView.getView().addEventListener(&#39;dragover&#39;, function(e) { 
    ... // 旧逻辑省略
    
    // 拖拽下来的时候设置 所有的 displayName 为 box 的节点 为可见 （这样拖拽才能获取到预置模型）
    array.forEach(function(data) {
        data.s(&#39;3d.visible&#39;, true);
    });

    var data = g3d.getDataAt(e);
    if (data.s(&#39;shape3d&#39;) === &#39;档案柜.json&#39;) {
        // 记录文件袋拖拽到的是哪个档案柜
        g3dView._focusData = data;

        // 将预置模型移动到拖拽的柜子坐标
        shelf.p3(data.p3());
    }

    if(data.getDisplayName() === &#39;box&#39;) {
        // 将对应坐标下预置的档案袋模型进行显示
        // 该属性可修改模型的透明度，更多属性可参考 HT 风格手册
        data.s(&#39;shape3d.opacity&#39;,  0.8);
    }
    ...
})

g3dView.getView().addEventListener(&#39;drop&#39;, function(e) {
    // 获取鼠标位置模型    
    var data = g3dView.getDataAt(e);
    if(!data) return;
    // 鼠标位置不是预置模型，直接跳过
    if(data.getDisplayName() !== &#39;box&#39;) return;
    data.s(&#39;shape3d.opacity&#39;, 0);
    // 放手时候设置 所有的 displayName 为 box 的节点 不可见
    array.forEach(function(data) {
        data.s(&#39;3d.visible&#39;, false);
    });

    var node = new ht.Node();
    node.s(&#39;shape3d&#39;, 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 === &#39;doubleClickData&#39;) {
        // 双击事件
        var shape3d = e.data.s(&#39;shape3d&#39;),
            parentShape3d = e.data.getParent() && e.data.getParent().s(&#39;shape3d&#39;);
        if (shape3d && shape3d.indexOf(&#39;档案柜&#39;) > -1) {
            // 重点突出档案柜
            showDetail(e.data);
        }
        else if (parentShape3d && parentShape3d.indexOf(&#39;档案柜&#39;) > -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(&#39;select.brightness&#39;, 1);
    dataModel.each(function (d) {
        if (d === focusData || (!d.s(&#39;3d.selectable&#39;) && d.getTag() !== &#39;wall&#39;)
            || d.getParent() === focusData || d.getDisplayName() === &#39;box&#39;) return;
        // 将拓扑中除了要操作的柜子 与柜子中档案袋 以及墙外 透明度都设置为 opacity (0~1)
        
        // 保存设置前配置， 还原用
        if (!opacityMap[d.getId()]) {
            opacityMap[d.getId()] = {
                &#39;shape3d.opacity&#39;: d.s(&#39;shape3d.opacity&#39;),
                &#39;shape3d.transparent&#39;: d.s(&#39;shape3d.transparent&#39;),
                &#39;all.opacity&#39;: d.s(&#39;all.opacity&#39;),
                &#39;all.transparent&#39;: d.s(&#39;all.transparent&#39;),
                &#39;left.opacity&#39;: d.s(&#39;left.opacity&#39;),
                &#39;left.transparent&#39;: d.s(&#39;left.transparent&#39;),
                &#39;right.opacity&#39;: d.s(&#39;right.opacity&#39;),
                &#39;right.transparent&#39;: d.s(&#39;right.transparent&#39;),
                &#39;front.opacity&#39;: d.s(&#39;front.opacity&#39;),
                &#39;front.transparent&#39;: d.s(&#39;front.transparent&#39;),
                &#39;back.opacity&#39;: d.s(&#39;back.opacity&#39;),
                &#39;back.transparent&#39;: d.s(&#39;back.transparent&#39;),
                &#39;top.opacity&#39;: d.s(&#39;top.opacity&#39;),
                &#39;top.transparent&#39;: d.s(&#39;top.transparent&#39;),
                &#39;bottom.opacity&#39;: d.s(&#39;bottom.opacity&#39;),
                &#39;bottom.transparent&#39;: d.s(&#39;bottom.transparent&#39;),
                &#39;3d.selectable&#39;: d.s(&#39;3d.selectable&#39;)
            }
        }
        
        // 透明度设置为 opacity
        d.s({
            &#39;shape3d.opacity&#39;: opacity,
            &#39;shape3d.transparent&#39;: true,
            &#39;all.opacity&#39;: opacity,
            &#39;all.transparent&#39;: true,
            &#39;left.opacity&#39;: opacity,
            &#39;left.transparent&#39;: true,
            &#39;right.opacity&#39;: opacity,
            &#39;right.transparent&#39;: true,
            &#39;front.opacity&#39;: opacity,
            &#39;front.transparent&#39;: true,
            &#39;back.opacity&#39;: opacity,
            &#39;back.transparent&#39;: true,
            &#39;top.opacity&#39;: opacity,
            &#39;top.transparent&#39;: true,
            &#39;bottom.opacity&#39;: opacity,
            &#39;bottom.transparent&#39;: true,
            &#39;3d.selectable&#39;: 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(&#39;select.brightness&#39;, 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(&#39;p:value&#39;, 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 ソリューションを提供するだけです。同様の原理で、スマートビル、スマートコンピュータルーム、スマートシティもこれに基づいて実現できます。