如何在ReactJS中通过Autodesk Forge Viewer加载多个模型？

问题背景 #

已有基于React的Forge Viewer单模型加载函数，需要扩展为支持多模型加载。

实现方案 #

多模型加载的核心是加载每个模型时配置keepCurrentModels: true（你的现有代码已包含该配置，这是实现多模型共存的关键），在此基础上改造函数支持批量处理多个模型文档：

• 调整输入参数：将原函数接收单个documentId改为接收包含多个模型配置的数组，每个配置项包含documentId及对应模型的选择参数（如phaseName、guid等）
• 复用原有加载逻辑：遍历模型配置数组，为每个模型执行文档加载和节点选择逻辑
• 异步状态跟踪：用Promise封装单模型加载逻辑，方便统一处理所有模型加载完成/失败的状态

修改后的代码示例 #

// 批量加载多模型的函数
function loadMultipleModels(viewer, modelConfigs) {
    // 封装单个模型的加载逻辑为Promise
    const loadSingleModel = (config) => {
        return new Promise((resolve, reject) => {
            function onDocumentLoadSuccess(viewerDocument) {
                const bubbleNode = viewerDocument.getRoot();
                let defaultModel;

                // 根据当前模型的配置选择视图节点
                if (config.phaseName) {
                    defaultModel = bubbleNode.getMasterView(config.phaseName);
                } else if (config.guid) {
                    defaultModel = bubbleNode.findByGuid(config.guid);
                } else if (config.viewableID) {
                    const results = bubbleNode.search({ viewableID: config.viewableID });
                    if (results && results.length) {
                        defaultModel = results[0];
                    }
                } else if (config.geomIndex !== undefined) {
                    const geoms = bubbleNode.search({ type: "geometry" });
                    if (geoms.length) {
                        if (config.geomIndex < 0 || config.geomIndex >= geoms.length) {
                            console.warn("GeometryIndex Error: Invalid geometry index.");
                        }
                        const index = Math.min(Math.max(config.geomIndex, 0), geoms.length - 1);
                        defaultModel = geoms[index];
                    }
                }

                if (!defaultModel) defaultModel = bubbleNode.getDefaultGeometry(true);
                const skipHiddenFragments = config.skipHiddenFragments || false;
                
                // 加载模型，关键配置keepCurrentModels: true确保不替换现有模型
                viewer.loadDocumentNode(viewerDocument, defaultModel, {
                    keepCurrentModels: true,
                    skipHiddenFragments: skipHiddenFragments,
                }).then(resolve).catch(reject);

                // 仅初始化一次扩展，避免重复加载
                if (!viewer.getExtension("Autodesk.Viewing.MarkupsCore")) {
                    viewer.loadExtension("Autodesk.Viewing.MarkupsCore");
                    viewer.loadExtension("Autodesk.Viewing.MarkupsGui");
                }
                viewer.prefs.set("ghosting", false);
            }

            function onDocumentLoadFailure() {
                console.error(`Failed fetching Forge manifest for document: ${config.documentId}`);
                reject(new Error(`Load failed for ${config.documentId}`));
            }

            if (config.documentId) {
                Autodesk.Viewing.Document.load(
                    config.documentId,
                    onDocumentLoadSuccess,
                    onDocumentLoadFailure
                );
            } else {
                resolve();
            }
        });
    };

    // 并行加载所有模型，也可改用Promise.allSettled兼容部分模型加载失败的场景
    return Promise.all(modelConfigs.map(config => loadSingleModel(config)))
        .then(() => {
            props.eventBus.dispatchEvent({ type: "ALL_MODELS_LOADED", data: { viewer } });
            // 加载完成后自动适配所有模型到视野
            viewer.fitToView();
        })
        .catch(err => {
            console.error("Some models failed to load:", err);
        });
}

在React组件中调用 #

在组件的useEffect（类组件用componentDidMount）中调用批量加载函数，传入模型配置数组：

// React函数组件示例
useEffect(() => {
    if (viewerInstance) { // viewerInstance为已初始化的Viewer实例
        const modelConfigs = [
            {
                documentId: "urn:dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6bXktZm9yZ2UtYXBwL21vZGVsMS5ydnQ",
                phaseName: "Existing"
            },
            {
                documentId: "urn:dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6bXktZm9yZ2UtYXBwL21vZGVsMi5ydnQ",
                guid: "abc123-def456-ghi789"
            }
            // 可添加更多模型配置
        ];
        loadMultipleModels(viewerInstance, modelConfigs);
    }
}, [viewerInstance]);

注意事项 #

• 确保每个模型的documentId（URN）已完成Forge授权，Viewer可正常访问
• 多模型加载后可调用viewer.fitToView()自动调整相机视角，让所有模型显示在视野内
• 若需控制模型加载顺序，可将Promise.all改为串行执行的Promise链

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