React集成Autodesk Forge Viewer加载GeoThreeExtension报错求助

错误根源 #

你遇到的ReferenceError: viewer is not defined是因为GeoThreeExtension扩展代码中直接使用了全局的viewer变量，但在你的React封装组件里，Viewer实例是组件的this.viewer属性，并非全局变量，导致扩展找不到该变量。

修复步骤 #

方法一：修正GeoThreeExtension的代码（推荐） #

Forge扩展的规范是通过this.viewer访问Viewer实例，而非全局变量。修改扩展中所有直接引用viewer的地方，替换为this.viewer：

比如原扩展的load方法代码：

load() {
    viewer.impl.createOverlayScene('geo-three-overlay');
    // 其他使用viewer的代码
}

修改为：

load() {
    this.viewer.impl.createOverlayScene('geo-three-overlay');
    // 其他使用this.viewer的代码
}

同时确保扩展类正确继承自Autodesk.Viewing.Extension，且构造函数接收viewer参数并传递给父类：

class GeoThreeExtension extends Autodesk.Viewing.Extension {
    constructor(viewer, options) {
        super(viewer, options); // 必须调用父类构造，将viewer传入
        // 其他初始化逻辑
    }

    // 其他方法（如load、unload等）中统一使用this.viewer访问Viewer实例
}

方法二：临时全局挂载Viewer（不推荐，仅测试用） #

如果暂时无法修改扩展代码，可以在创建Viewer实例时，将其挂载到全局window对象：
修改组件的componentDidMount方法：

componentDidMount() {
    initializeViewerRuntime(this.props.runtime)
        .then(_ => {
            this.viewer = new Autodesk.Viewing.Private.GuiViewer3D(this.container,
                { extensions: ["GeoThreeExtension","DrawToolExtension","TransformationExtension", "LoggerExtension","SummaryExtension"] });
            window.viewer = this.viewer; // 临时挂载到全局
            this.viewer.start();
            this.updateViewerState({});
        })
        .catch(err => console.error(err));
}

这种方法会污染全局环境，不建议在生产环境使用。

补充说明 #

官方的GeoThreeExtension示例可能是基于非封装的纯HTML环境编写，直接使用了全局的viewer变量。而你的React封装将Viewer实例作为组件的私有属性，所以必须修正扩展代码以符合Forge的扩展规范。

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