在View and Data API中更改指定元素的顏色

峻祁連發表於2015-12-08
ViewAPI

大家在使用View and Data API開發過程中，經常會用到的就是改變某些元素的顏色已區別顯示。比如根據某些屬性做不同顏色的專題顯示，或者用不同顏色表示施工進度，或者只是簡單的以顏色變化來提醒使用者以示區別。作為開發者，一定會喜歡看的這樣的API：

//load the extension 
viewer.loadExtension('Autodesk.ADN.Viewing.Extension.Color');
// an array of node Id
var elementIds= [1735, 1736];
//set color to red
viewer.setColorMaterial(elementIds,0xff0000);  
//restore to original color 
viewer.restoreColorMaterial(elementIds);

 

可惜View and Data API中並沒有提供這樣的API，不過我們可以自己來做。下面就是一個這樣的擴充套件，如果你正好需要，可以直接拿去用。

///////////////////////////////////////////////////////////////////////////////
// Autodesk.ADN.Viewing.Extension.Color
//
///////////////////////////////////////////////////////////////////////////////
AutodeskNamespace("Autodesk.ADN.Viewing.Extension");
Autodesk.ADN.Viewing.Extension.Color = function(viewer, options) {

    Autodesk.Viewing.Extension.call(this, viewer, options);

    var overlayName = "temperary-colored-overlay";
    var _self = this;

    _self.load = function() {

        console.log('Autodesk.ADN.Viewing.Extension.Color loaded');
        ///////////////////////////////////////////////////////////////////////////
        // Generate GUID
        //
        ///////////////////////////////////////////////////////////////////////////
        function newGuid() {
            var d = new Date().getTime();
            var guid = 'xxxx-xxxx-xxxx-xxxx-xxxx'.replace(/[xy]/g, function(c) {
                var r = (d + Math.random() * 16) % 16 | 0;
                d = Math.floor(d / 16);
                return (c == 'x' ? r : (r & 0x7 | 0x8)).toString(16);
            });
            return guid;
        };

        ///////////////////////////////////////////////////////////////////////////
        // add new material
        //
        ///////////////////////////////////////////////////////////////////////////
        function addMaterial(color) {
            var material = new THREE.MeshPhongMaterial({
                color: color
            });
            //viewer.impl.matman().addMaterial(newGuid(), material);
            viewer.impl.createOverlayScene(overlayName, material, material);
            return material;
        }

        ///////////////////////////////////////////////////////////////////////////
        // Set color for nodes
        // objectIds should be an array of dbId
        // 
        //
        ///////////////////////////////////////////////////////////////////////////
        Autodesk.Viewing.Viewer3D.prototype.setColorMaterial = function(objectIds, color) {
            var material = addMaterial(color);

            for (var i=0; i<objectIds.length; i++) {

                var dbid = objectIds[i];

                //from dbid to node, to fragid
                var it = viewer.model.getData().instanceTree;

                it.enumNodeFragments(dbid, function (fragId) {

                    
                    var renderProxy = viewer.impl.getRenderProxy(viewer.model, fragId);
                    
                    renderProxy.meshProxy = new THREE.Mesh(renderProxy.geometry, renderProxy.material);

                    renderProxy.meshProxy.matrix.copy(renderProxy.matrixWorld);
                    renderProxy.meshProxy.matrixWorldNeedsUpdate = true;
                    renderProxy.meshProxy.matrixAutoUpdate = false;
                    renderProxy.meshProxy.frustumCulled = false;

                    viewer.impl.addOverlay(overlayName, renderProxy.meshProxy);
                    viewer.impl.invalidate(true);
                    
                }, false);
            }

        }


        Autodesk.Viewing.Viewer3D.prototype.restoreColorMaterial = function(objectIds) {
       
            for (var i=0; i<objectIds.length; i++) {

                var dbid = objectIds[i];


                //from dbid to node, to fragid
                var it = viewer.model.getData().instanceTree;

                it.enumNodeFragments(dbid, function (fragId) {

                    
                     var renderProxy = viewer.impl.getRenderProxy(viewer.model, fragId);

                    if(renderProxy.meshProxy){

                      //remove all overlays with same name
                      viewer.impl.clearOverlay(overlayName);
                      //viewer.impl.removeOverlay(overlayName, renderProxy.meshProxy);
                      delete renderProxy.meshProxy;
                      

                      //refresh the sence
                      
                      viewer.impl.invalidate(true);


                    }
                                         
                }, true);
            }

  
        }

        _self.unload = function() {
            console.log('Autodesk.ADN.Viewing.Extension.Color unloaded');
            return true;
        };
    };
};
Autodesk.ADN.Viewing.Extension.Color.prototype = Object.create(Autodesk.Viewing.Extension.prototype);
Autodesk.ADN.Viewing.Extension.Color.prototype.constructor = Autodesk.ADN.Viewing.Extension.Color;
Autodesk.Viewing.theExtensionManager.registerExtension('Autodesk.ADN.Viewing.Extension.Color', Autodesk.ADN.Viewing.Extension.Color);
 

這段程式碼我也在我的IoT示例中使用，原始碼在 github 上。

相關文章