WebGL 3D Archive visual management system based on HTML5

preface

Code implementation

Scenario building

Graph3dView loads 3D scenes

Var relativeLayout = new ht.ui.relativelayout (); Var g3dView = new hT.graph3d.graph3dView (); Var HTVIEW = new ht.ui.htView (g3dView); // Initialize the HTVIEW component and put the 3D topology in it. Relativelayout. addView(HTVIEW, {width:'match_parent'// fill height:'match_parent', // fill in marginTop: 64, // leave space for TOP marginLeft: 250 // Leave space for LEFT});Create the LEFT portfolio model ###The EDITOR section on the left uses the HT Palette component (HT.Widget.palette) to add the archive bag to the Palette and set it to drag and drop: var Palette = new HT.Widget.palette (); Palette = new ht.group (); // Palette = new ht.group (); // Set the group to open state group.setexpanded (true); // Set the description of the group group.setname ('Base element'); palette.dm().add(group); Var childNode = new ht.node (); childNode.setParent(group); childNode.setName(name); childNode.setImage(image); childNode.s({'draggable': true, / /trueTo drag and drop'image.stretch': 'centerUniform'}); palette.dm().add(childNode);Copy the code

Drag and drop primitives from a palette to a 3D scene

g3dView.getView().addEventListener('dragover'.function(e) { e.preventDefault(); var paletteNode = palette.dm().sm().ld(); // Get the last selected node on the Paletteif(! paletteNode || ! g3d.getDataAt(e))return; Var data = g3d.getDataat (e);if (data.s('shape3d') = = ='File cabinet. Json'G3dview. _focusData = data; }});Copy the code

g3dView.getView().addEventListener('dragover'.function(e) { ... Array.foreach () array.foreach () array.foreach () array.foreach () array.foreach (function(data) {

            data.s('3d.visible'.true);

        });



        var data = g3d.getDataAt(e);

        if (data.s('shape3d') = = ='File cabinet. Json'G3dview. _focusData = data; // Move the preset model to shelf.p3(data.p3()); }if(data.getDisplayName() === 'box') {// Display the preset file bag model under the corresponding coordinates // This attribute can modify the transparency of the model, more attributes can refer to the HT style manual data.s('shape3d.opacity', 0.8); }... }) g3dView.getView().addEventListener('drop'.functionVar data = g3dView.getdataat (e);if(! data)return; // Mouse position is not a preset model, skip directlyif(data.getDisplayName() ! = ='box') return;

        data.s('shape3d.opacity', 0); // Make all nodes whose displayName is box invisible array.foreach ()function(data) {

            data.s('3d.visible'.false);

        });



        var node = new ht.Node();

        node.s('shape3d', url); // Node.r3 ([math.pi /2, -math.pi /2, 0]); // Rotate the portfolio model so it lies flat on Node.p3 (data.p3()); node.setParent(g3dView._focusData); node.setHost(g3dView._focusData); });Copy the code

The effect of filing cabinet is realized

// 3D topology interactive listener 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('Filing cabinet'< span style = "max-width: 100%; clear: both; }else if (parentShape3d && parentShape3d.indexOf('Filing cabinet') > -1) { showDetail(e.data.getParent()); }}}); showDetail =functionEyeBack = hT.default.clone (graph3DView.geteye ()); 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; // Set opacity (0~1) of any cabinet to be operated, file bag in the cabinet, and wall outside the topology to 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'}} // Set opacity to 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

            });



        });

    }Copy the code

g3dView.dm().ms(function(e) { var lastData = g3dView.sm().ld(); // Determine whether to blurif(focusData) {

            if(lastData === focusData || (lastData && lastData.getParetn() === focusData)) return; g3dView.setEye(eyeBack); g3dView.setCenter(centerBack); // Restore the opacity of the model 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; }});Copy the code

Fast query function realization

Var textField = new ht.ui.textField; textField.setIcon("imgs/search.json");

    textField.setIconPosition("left"); 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); // Select the first result when the corresponding element is foundif(datas && datas.size() > 0) { library.view.dm.sm().ss(datas.get(0)); }});Copy the code

conclusion