如何通过APS v7 Viewer API批量设置所有对象默认颜色为灰色

问题描述 #

我正在使用Autodesk Platform Services v7，需要通过编程将所有对象的默认颜色批量设置为灰色（或无颜色），用于建筑施工进度追踪——后续用户可手动为已完工对象标记颜色。查阅官方文档后仅找到修改选中对象颜色的方法，无法满足批量修改所有对象的需求。现有代码执行后，选中对象变为透明，未实现预期效果。

预期效果 #

获取可自动将所有对象默认颜色设为灰色的代码片段，统一模型中所有彩色对象（如黄色箱体、蓝色围栏、黄色管道等）为灰色，便于后续改色追踪施工进度。

现有代码 #

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
);

解决方案 #

问题出在setThemingColor的使用方式和颜色值设置上：

• 原代码的颜色值THREE.Vector4(1, 0, 0, 1)是红色，且仅设置根节点的递归应用可能因模型结构问题导致异常
• 灰色的正确Vector4值应为new THREE.Vector4(0.5, 0.5, 0.5, 1)（RGB各0.5对应中性灰，最后一位1表示完全不透明）
• 更可靠的方式是遍历所有可见对象DbId，确保每个对象都被应用主题色

修改后的完整代码如下：

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("set-all-gray-button");
  button.setToolTip("批量设置所有对象为灰色");
  button.addClass("set-all-gray-button");

  button.onClick = function (e) {
    const model = viewer.model;
    if (!model) return;

    const instanceTree = model.getInstanceTree();
    const grayColor = new THREE.Vector4(0.5, 0.5, 0.5, 1); // 中性灰，完全不透明

    // 递归遍历所有子节点，收集所有对象DbId
    const allDbIds = [];
    instanceTree.enumNodeChildren(instanceTree.getRootId(), function(dbId) {
      allDbIds.push(dbId);
    }, true);

    // 批量设置主题色
    viewer.setThemingColor(allDbIds, grayColor, model);
    // 强制刷新视图，确保颜色变更立即生效
    viewer.impl.invalidate(true);
  };

  // 将按钮添加到工具栏分组
  const controlGroup = new Autodesk.Viewing.UI.ControlGroup("custom-toolbar-group");
  controlGroup.addControl(button);
  toolbar.addControl(controlGroup);
}

MyCustomExtension.prototype.load = function () {
    console.log("MyCustomExtension loaded");
    return true;
}

MyCustomExtension.prototype.unload = function () {
    // 卸载时清理工具栏控件
    const toolbar = this.viewer.toolbar;
    const controlGroup = toolbar.getControl("custom-toolbar-group");
    if (controlGroup) {
      toolbar.removeControl(controlGroup);
    }
    console.log("MyCustomExtension unloaded");
    return true;
};

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

关键修改说明 #

• 颜色值修正：使用中性灰的Vector4值，避免透明问题
• 全对象遍历：通过enumNodeChildren递归获取所有对象DbId，确保无遗漏
• 批量设置优化：直接传入DbId数组给setThemingColor，提升执行效率
• 视图强制刷新：调用invalidate(true)确保颜色变更实时显示
• 工具栏完善：添加按钮提示和卸载清理逻辑，提升扩展健壮性

内容的提问来源于stack exchange，提问作者Wes