使用 ThreeJS 和 React 三纤执行 React 应用程序时出现“编译失败”错误答案

【问题标题】：Getting "Failed to compile" error while executing the React application with ThreeJS and React three fiber使用 ThreeJS 和 React 三纤执行 React 应用程序时出现“编译失败”错误
【发布时间】：2021-06-28 05:16:52
【问题描述】：

我正在使用以下代码 -

import React, { Suspense, useRef, useState, useEffect } from "react"
import { Canvas } from "react-three-fiber"
import { useGLTF } from "@react-three/drei/core"
import { OrbitControls } from "drei"

function Model(props) {
  const group = useRef()
  const { nodes, materials } = useGLTF('newmodel.glb')
  return (
    <group ref={group} {...props} dispose={null}>
      <mesh material={materials.lambert129} geometry={nodes.table_1.geometry} />
      <mesh material={materials.blinn6} geometry={nodes.table_2.geometry} />
      <mesh material={materials.lambert54} geometry={nodes.polySurface2862_1.geometry} />
      <mesh material={materials.lambert55} geometry={nodes.polySurface2862_2.geometry} />
      <mesh material={materials.lambert62} geometry={nodes.polySurface2862_3.geometry} />
      <mesh material={materials.lambert54} geometry={nodes.group36_1.geometry} />
      <mesh material={materials.phong339} geometry={nodes.group36_2.geometry} />
      <mesh material={materials.lambert55} geometry={nodes.group36_3.geometry} />
      <mesh material={materials.lambert58} geometry={nodes.group36_4.geometry} />
      <mesh material={materials.lambert63} geometry={nodes.group36_5.geometry} />
      <mesh material={materials.lambert61} geometry={nodes.group36_6.geometry} />
      <mesh material={materials.lambert60} geometry={nodes.group36_7.geometry} />
    </group>
  )
}

export default function App() {
  return (
    <>
      <Canvas style={{height:500,width:700}}>
        <ambientLight intensity={0.3} />
        <spotLight intensity={0.3} angle={0.1} penumbra={1} position={[5, 25, 20]} />
        <Suspense fallback={null}>
          <Model />
        </Suspense>
        <OrbitControls />
      </Canvas>
    </>
  )
}

错误 - 编译失败。 ./node_modules/drei/useSubdivision.js 尝试导入错误：“几何”未从“三”导出。

我尝试了多种导入方法，但都不起作用，我也尝试过切换 drei@2.2.21 three@0.125.0 的版本。请帮忙！

【问题讨论】：

标签： reactjs three.js gltf react-three-fiber

【解决方案1】：

依赖于issues/261

Geometry 已从 three@0.125.0 中删除，请检查您正在安装的 drei 软件包。如果你想使用 three@125 你需要使用@react-three/drei 至少为 3.0.0

【讨论】：

【解决方案2】：

在进行一些研究并遵循 Babak 发布的指南后，该问题已得到解决。对于解决方案，我使用以下版本的软件包 -

@react-three/drei@3.0.0
drei@2.2.17
反应三纤维@5.3.14
三@0.124.0

【讨论】：