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

大家在使用ViewandDataAPI开发过程中，经常会用到的就是改变某些元素的颜色已区别显示。比如根据某些属性做不同颜色的专题显示，或者用不同颜色表示施工进度，或者只是简单的以颜色变化来提醒用户以示区别。作为开发者，一定会喜欢看的这样的API：

//loadtheextension
viewer.loadExtension('Autodesk.ADN.Viewing.Extension.Color');
//anarrayofnodeId
varelementIds=[1735,1736];
//setcolortored
viewer.setColorMaterial(elementIds,0xff0000);
//restoretooriginalcolor
viewer.restoreColorMaterial(elementIds);

可惜ViewandDataAPI中并没有提供这样的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);

varoverlayName="temperary-colored-overlay";
var_self=this;

_self.load=function(){

console.log('Autodesk.ADN.Viewing.Extension.Colorloaded');
///////////////////////////////////////////////////////////////////////////
//GenerateGUID
//
///////////////////////////////////////////////////////////////////////////
functionnewGuid(){
vard=newDate().getTime();
varguid='xxxx-xxxx-xxxx-xxxx-xxxx'.replace(/[xy]/g,function(c){
varr=(d+Math.random()*16)%16|0;
d=Math.floor(d/16);
return(c=='x'?r:(r&0x7|0x8)).toString(16);
});
returnguid;
};

///////////////////////////////////////////////////////////////////////////
//addnewmaterial
//
///////////////////////////////////////////////////////////////////////////
functionaddMaterial(color){
varmaterial=newTHREE.MeshPhongMaterial({
color:color
});
//viewer.impl.matman().addMaterial(newGuid(),material);
viewer.impl.createOverlayScene(overlayName,material,material);
returnmaterial;
}

///////////////////////////////////////////////////////////////////////////
//Setcolorfornodes
//objectIdsshouldbeanarrayofdbId
//
//
///////////////////////////////////////////////////////////////////////////
Autodesk.Viewing.Viewer3D.prototype.setColorMaterial=function(objectIds,color){
varmaterial=addMaterial(color);

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

vardbid=objectIds[i];

//fromdbidtonode,tofragid
varit=viewer.model.getData().instanceTree;

it.enumNodeFragments(dbid,function(fragId){

varrenderProxy=viewer.impl.getRenderProxy(viewer.model,fragId);

renderProxy.meshProxy=newTHREE.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(vari=0;i<objectIds.length;i++){

vardbid=objectIds[i];

//fromdbidtonode,tofragid
varit=viewer.model.getData().instanceTree;

it.enumNodeFragments(dbid,function(fragId){

varrenderProxy=viewer.impl.getRenderProxy(viewer.model,fragId);

if(renderProxy.meshProxy){

//removealloverlayswithsamename
viewer.impl.clearOverlay(overlayName);
//viewer.impl.removeOverlay(overlayName,renderProxy.meshProxy);
deleterenderProxy.meshProxy;

//refreshthesence

viewer.impl.invalidate(true);

}

},true);
}

}

_self.unload=function(){
console.log('Autodesk.ADN.Viewing.Extension.Colorunloaded');
returntrue;
};
};
};
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,.csharpcodepre
{
font-size:small;
color:black;
font-family:consolas,"CourierNew",courier,monospace;
background-color:#ffffff;
/*white-space:pre;*/
}
.csharpcodepre{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上。