@react-third/drei/react-三纤维

Question

我正在尝试使用@react-三/drei。我已经成功安装并使用了@react- Three/Fiber但是当我安装

@react-three/drei

时。我收到以下错误：

./node_modules/three-stdlib/lights/RectAreaLightUniformsLib.js
Attempted import error: 'DataUtils' is not exported from 'three'.

当我将此导入用于@react-三/drei-

时出现错误

import { Preload, ScrollControls, Scroll, useScroll, Image, useFBO, PerspectiveCamera } from '@react-three/drei'

App.jsx

import * as THREE from 'three'
import { Suspense, useRef, useState } from 'react'
import { Canvas, useFrame, useThree } from '@react-three/fiber'
import { Preload, ScrollControls, Scroll, useScroll, Image, useFBO, PerspectiveCamera } from '@react-three/drei'

import SiteNav from "./components/Nav/Nav"
import MainContainer from "./pages/MainContainer";

function App() {
  return (
      <div className="App">
        <SiteNav />
        <MainContainer />
      </div>
  )
}

export default App;

如有任何帮助，我们将不胜感激！谢谢

Answer 1

我认为这里的问题是react-三/drei使用独立的三-stdlib

npm i three-stdlib

应该可以解决问题。

https://github.com/pmndrs/dreireact-drei 文档说了以下内容：

不断增长的反应三纤维有用助手和抽象集合。

npm install @react- Three/drei 👉这个包使用的是独立的 三个-stdlib 而不是三个/examples/jsm。 👈

Answer 2

运行命令即可解决

npm install --legacy-peer-deps three