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

大家在使用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);

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

这段代码我也在我的IoT示例中使用，源代码在 github 上。