Three.js r146版本添加AxesHelper后场景无法显示求助

我使用Three.js r146版本，按照官方文档尝试添加AxesHelper。调用addAxesHelper方法后，能看到AxesHelper已加入场景，但视图中就是看不到它。

相关代码如下：

export default class Viewer {

    axesHelper = new THREE.AxesHelper( 100 )

   ......

   addAxesHelper() {
        this.disposeAxesHelper()
        this.scene.add(this.axesHelper)
    }

   disposeAxesHelper() {
       this.axesHelper.dispose()
   }
}

场景结构截图：

问题原因与修复方案 #

核心问题 #

你在调用addAxesHelper时，先执行了disposeAxesHelper()，而dispose()方法会直接销毁AxesHelper的几何体和材质资源——资源都没了，就算把它加到场景里也没法渲染显示。

修复代码 #

方案1：添加前重新创建实例

修改addAxesHelper方法，先移除旧实例并销毁，再创建新的AxesHelper加入场景：

addAxesHelper() {
    this.disposeAxesHelper()
    // 重新创建实例，因为旧实例资源已销毁
    this.axesHelper = new THREE.AxesHelper(100)
    this.scene.add(this.axesHelper)
}

disposeAxesHelper() {
    // 先从场景移除再销毁
    if (this.axesHelper.parent === this.scene) {
        this.scene.remove(this.axesHelper)
    }
    this.axesHelper.dispose()
}

方案2：避免提前销毁（复用实例）

如果不想每次都创建新实例，调整逻辑只在需要时添加，不要提前销毁：

addAxesHelper() {
    // 只有当辅助线不在场景中时才添加
    if (this.axesHelper.parent !== this.scene) {
        this.scene.add(this.axesHelper)
    }
}

disposeAxesHelper() {
    if (this.axesHelper.parent === this.scene) {
        this.scene.remove(this.axesHelper)
    }
    // 仅在确定不再使用时调用dispose
}

额外排查点 #

• 检查相机位置：确保相机没有和AxesHelper重合，或者视角没有偏离到不可见区域，可以尝试移动相机或调整AxesHelper的位置。
• 调整辅助线尺寸：如果场景物体尺寸很大，100单位的AxesHelper可能太小，尝试增大参数（比如THREE.AxesHelper(500)）。
• 确认渲染循环：确保渲染器在持续执行render(scene, camera)，没有停止渲染。

内容的提问来源于stack exchange，提问作者Евгений Рябышев