@react three/drei/react three光纤的导入错误

Question

我正在尝试使用@react three/drei。我已成功安装并使用@react three/fiber，但当我安装@react-three/drei时。我得到以下错误：

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

当我使用此导入@react three/drei-时出错

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

应用程序.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 three/drei使用独立的三个stdlibnpm i three-stdlib应该可以解决这个问题。

https://github.com/pmndrs/dreireact drei docs说如下：

reactthree-fiber的有用助手和抽象的不断增加的集合。

npm install@react three/drei此软件包使用的是单机版三个stdlib，而不是三个/examples/jsm。