使用Three.js实现GitHub地球效果时Face未从three导出错误如何解决

你遇到的报错是因为依赖的three-glow-mesh库早已停止维护，它仅适配Three.js 0.124及更早版本。Three.js从0.125版本开始移除了旧版Geometry下的Face相关接口，统一使用BufferGeometry，该库未做适配，因此导入时会抛出找不到Face导出的错误。

• 方案1：降级Three.js版本
  直接将Three.js降级到兼容的旧版本即可解决导入报错，执行安装命令：

  npm install three@0.124.0
  

  注意：如果当前使用的three-globe是较新版本，可能和旧版Three.js存在兼容性冲突，需要同时降级three-globe到对应适配版本。

• 方案2：替换发光效果实现（更推荐）
  放弃使用废弃的three-glow-mesh，手动实现大气层发光效果，适配新版Three.js，替换你代码中try/catch包裹的发光部分代码即可：

  // 自定义发光材质，替代three-glow-mesh
  const glowGeometry = new SphereGeometry(110, 75, 75); // 比地球半径大10%做外层发光
  const glowMaterial = new THREE.ShaderMaterial({
    uniforms: {
      c: { type: "f", value: 0.3 },
      p: { type: "f", value: 6 },
      glowColor: { type: "c", value: new THREE.Color(0x3a228a) },
      viewVector: { type: "v3", value: camera.position }
    },
    vertexShader: `
      uniform vec3 viewVector;
      uniform float c;
      uniform float p;
      varying float intensity;
      void main() {
        vec3 vNormal = normalize(normalMatrix * normal);
        vec3 vNormel = normalize(normalMatrix * viewVector);
        intensity = pow(c - dot(vNormal, vNormel), p);
        gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
      }
    `,
    fragmentShader: `
      uniform vec3 glowColor;
      varying float intensity;
      void main() {
        vec3 glow = glowColor * intensity;
        gl_FragColor = vec4(glow, intensity);
      }
    `,
    side: THREE.BackSide,
    blending: THREE.AdditiveBlending,
    transparent: true
  });
  const glowMesh = new THREE.Mesh(glowGeometry, glowMaterial);
  Globe.add(glowMesh);
  

  该实现效果和three-glow-mesh基本一致，且兼容所有新版Three.js，不需要额外依赖。

• 方案3：手动修复three-glow-mesh源码
  你可以直接修改node_modules中three-glow-mesh/dist/index.module.js的代码，移除所有对Face的引用，适配BufferGeometry规则，该方案需要你了解Three.js的几何接口差异，维护成本较高。

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