输入错误与@react 3/drei/drei 3-光纤

Question

我正在尝试使用@3/drei。我已经成功地安装和使用了@react 3/纤维，但是当我安装@react-three/drei时。我得到以下错误：

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

当我将这个导入用于@react 3/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-3/drei使用独立的三stdlib npm i three-stdlib应该可以解决这个问题。

https://github.com/pmndrs/drei react drei文档如下所示：

越来越多的有用的帮助和抽象的反应-三纤维。 npm install @drei 3/drei这个包使用的是独立的三stdlib，而不是三个/示例/jsm。