Blazor WebAssembly集成Three.js出现WebGL黑画布及控制台报错

问题根因 #

1. Three.js版本不兼容：你引入的r79版本Three.js过于老旧，该版本中THREE.BufferGeometry没有setFromPoints方法，此API为后续版本新增，r79时期仅旧版THREE.Geometry支持点转几何体逻辑。
2. 引入逻辑冲突：你同时配置了npm安装Three.js和CDN引入两套逻辑，webpack打包后的npm版本Three.js没有正确挂载到全局，也没有引入到页面，实际全局THREE对象使用的是CDN的旧版本，所以出现API不存在的报错。
3. 你当前的问题和Blazor的WebGL/JSInterop支持无关，完全是前端JS侧的Three.js配置错误。

解决步骤 #

• 方式一：统一使用CDN引入（最简单）

  1. 删除你NpmJS目录下的Three.js相关安装、webpack打包配置，不需要用npm管理Three.js依赖
  2. 将index.html中引入的r79版本Three.js替换为最新稳定版的Three.js资源
  3. 重新运行项目即可正常调用setFromPoints API

• 方式二：保留npm打包引入

  1. 删除index.html中Three.js的CDN引入，不要同时使用两套引入
  2. 在你的NpmJS/src/index.js入口文件中，将THREE挂载到全局window对象：

  import * as THREE from 'three';
  window.THREE = THREE;
  

  3. 确认webpack打包后的输出js文件已经正确引入到index.html中，放在你当前引入的javascript/threeTutorial.js之前加载
  4. 确认你的npm安装的Three.js是最新稳定版，避免版本过低缺少API

• 可选兼容方案（不升级Three.js版本）
  如果你一定要保留r79版本，将几何体创建代码替换为旧版本兼容写法即可：

  const geometry = new THREE.Geometry();
  geometry.vertices = points;
  

• 额外检查项
  确认你的GameCanvas组件的Razor视图中存在id为gameCanvas的DOM节点，否则渲染器挂载时会出现找不到节点的报错，示例：

  <div id="gameCanvas"></div>
  

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