Search code examples
javascriptautodesk-forgeautodesk-viewerautodeskautodesk-bim360

How to programmatically set the default color of all objects to gray using Autodesk Platform Services v7 viewer APIs for progress tracking purposes?


I'm working with Autodesk Platform Services v7, and I'm trying to find a way to programmatically set the default color of all objects to either no color or gray. This is for progress tracking in building construction, where users need to manually color objects that have completed construction.

The issue

I've searched through the official documentation, and while I did come across a method that allows me to change the color of selected objects, this doesn't match my needs as I want to change the color of all objects at once.

https://aps.autodesk.com/en/docs/viewer/v7/reference/Viewing/Viewer3D/#setselectioncolor-color-selectiontype

Expected behavior

I'm looking for a code snippet that can automatically set the default color of all objects to either no color or gray.

Any help would be greatly appreciated. Thank you in advance!

Code

import * as THREE from "three";

function MyCustomExtension(viewer, options) {
    Autodesk.Viewing.Extension.call(this, viewer, options);
}

MyCustomExtension.prototype = Object.create(Autodesk.Viewing.Extension.prototype);
MyCustomExtension.prototype.constructor = MyCustomExtension;

MyCustomExtension.prototype.onToolbarCreated = function (toolbar) {
  const viewer = this.viewer;
  const button = new Autodesk.Viewing.UI.Button("show-env-bg-button");

  button.onClick = function (e) {
    const instanceTree = viewer.model.getInstanceTree();
    const rootId = instanceTree.getRootId(); // it was 1
    const color = new THREE.Vector4(1, 0, 0, 1);
    viewer.setThemingColor(rootId, color, viewer.model, true);
  };
}

MyCustomExtension.prototype.load = function () {
    const viewer = this.viewer;
}

MyCustomExtension.prototype.unload = function () {
    return true;
};

Autodesk.Viewing.theExtensionManager.registerExtension(
    "MyCustomExtension",
    MyCustomExtension
);

-------------------Mar 14, Added-----------------------

I will explain further with screenshots. First, I want to change the color of all objects in this picture to gray. For example, there is a big yellow box in front of me, and I want to change it to gray. There is also a blue fence, which I want to change to gray. There is also some yellow piping, which I would like to change to gray. After we change everything to gray, we would like to paint them another color as a construction progress control.

enter image description here

If I just click on this yellow box to select it, it turns light blue. Next, when I run the code you taught me and then click on it, it becomes transparent.

enter image description here enter image description here

So, I have not been able to achieve what I wanted to achieve... What I wanted to achieve is to make all objects that are painted in various colors gray once and for all.


Solution

  • One easy way to do this, is to use setThemingColor().

    You can set this function on the root dbid (in most case it's the dbid 1, to be confirmed with instance tree or derivative tree) and apply this color to all objects thanks to the recursive option.

    NOP_VIEWER.setThemingColor(1, new THREE.Vector4(0.9, 0.9, 0.9, 1), NOP_VIEWER.model, true)
    

    However, it does NOT replace the object color. So if you reduce the alpha channel of your color, the original object color and the theming color will be blended.

    What do you mean by 'no-color' ? If you want transparent objects (maybe with only the outline), you can hide theses objects and let Ghost hidden objects option do the job ?