Forger 查看器 setThemingColor()

Question

目的是为所选元素着色。为制作作品创建服务文件 (viewer-service.js):

import { Vector4 } from "three";

class ViewerService {

    /*
        Get all depended elements
    */
    getLeafNodes(model, dbIds) {
        return new Promise((resolve, reject) => {
            try {
                const instanceTree = model.getData().instanceTree;

                dbIds = dbIds || instanceTree.getRootId();

                const dbIdArray = Array.isArray(dbIds) ? dbIds : [dbIds];
                let leafIds = [];

                const getLeafNodesRec = (id) => {
                    let childCount = 0;

                    instanceTree.enumNodeChildren(id, (childId) => {
                        getLeafNodesRec(childId);

                        ++childCount;
                    });

                    if (childCount == 0) {
                        leafIds.push(id);
                    }
                };

                for (let i = 0; i < dbIdArray.length; ++i) {
                    getLeafNodesRec(dbIdArray[i]);
                }

                return resolve(leafIds);
            } catch (ex) {
                return reject(ex);
            }
        });
    }

    /*
        Color element
    */
    add(viewer, dbids) {

        let red = new Vector4(1, 0, 0, 0.5);

        this.getLeafNodes(viewer.model, dbids)
            .then((leafNodes) => {
                for (let i = 0; i < leafNodes.length; i++) {
                    console.log(leafNodes[i]);
                    console.log(red);
                    viewer.setThemingColor(leafNodes[i], red, viewer.model, true);
                }
            })
            .catch((error) => console.warn(error));
    }
}

export default new ViewerService();

并在 vue 组件中使用此服务：

<script>
import viewerService from "@/services/viewer-service";

export default {
  data() {
    return {
      viewer: null,
      options: {
        env: "Local",
        document: this.url,
      },
      dbids: null,
    };
  },
  props: {
    url: {
      type: String,
      required: true,
    },
  },
  mounted() {
    this.loadViewer();
  },
  methods: {
    loadViewer() {
      let config3d = {};
      this.viewer = new Autodesk.Viewing.Private.GuiViewer3D(
        this.$refs.forgeViewer,
        config3d
      );
      Autodesk.Viewing.Initializer(this.options, () => {
        this.viewer.initialize();

        this.viewer.addEventListener(
          Autodesk.Viewing.SELECTION_CHANGED_EVENT,
          this.onSelectionChanged
        );

        this.viewer.start(this.url, this.options);
      });
    },
    onSelectionChanged(event) {
      this.dbids = event.dbIdArray;
      console.log(this.dbids);
    },
    add() {
      viewerService.add(this.viewer, this.dbids);
    }
  },
};
</script>

当我执行方法 add() 时，它执行操作但元素的颜色没有改变。 The console log 我使用的是最新版本的 Viewer。这段代码有什么问题？

我也试过：

viewer.setThemingColor(leafNodes[i], red);
viewer.setThemingColor(leafNodes[i], red, null, true);

Answer 1

终于找到问题了。我正在为这个项目使用 Vue.js 和 npm 包管理器，并确保我从包管理器安装了最新版本的 'three.js'。但是 Forge Viewer 需要另一个，所以我开始在项目中使用全局变量并得到结果。

Forger 查看器 setThemingColor()

Forger Viewer setThemingColor()

autodesk-forge