Three.js运行报错material.onBeforeRender is not a function求助

这个报错的核心原因是Three.js核心库版本和你引入的扩展组件版本不匹配，其次可能是加载的GLTF模型材质存在异常，按照以下步骤排查即可解决：

• 第一步：解决版本不匹配问题
  你当前通过本地<script src="lib/three.js"></script>引入的Three.js核心库，和你在模块中引入的OrbitControls、GLTFLoader（均为r122版本）版本不一致，会导致GLTFLoader加载生成的材质对象缺少核心库要求的onBeforeRender等标准方法。
  解决方法：确认你本地lib目录下的three.js版本为r122，保证核心库、OrbitControls、GLTFLoader三者版本完全一致。如果本地版本不是r122，要么更换本地核心库为r122版本，要么将OrbitControls、GLTFLoader的引入地址更换为和本地核心库匹配的版本。
• 第二步：校验GLTF模型材质
  若版本统一后仍报错，说明GLTF模型自身的材质存在异常，在GLTF加载的成功回调中添加材质校验逻辑即可：
  在JS代码的loader.load成功回调中，scene.add(root)前添加以下代码，检测异常材质并替换为默认标准材质：

  root.traverse(child => {
    if (child.isMesh) {
      // 校验材质是否为Three.js合法材质对象
      if (!child.material || !child.material.isMaterial) {
        child.material = new THREE.MeshStandardMaterial({ color: 0xcccccc })
      }
    }
  })
  

• 额外优化点
  你当前的OrbitControls只在初始化时执行了一次update()，如果需要控制器交互生效，需要将orbitControl.update()放入tick渲染循环中执行。

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