大家在使用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 上。