无法在react-three-fiber中导入dat.gui

Question

对于使用react-three-fiber创建的项目，我导入了以下库：

import * as THREE from 'three';
import React, { Suspense, useState } from "react";
import { Canvas, useLoader } from "@react-three/fiber";
import { OrbitControls } from "@react-three/drei";

这很好用，然后我决定为场景制作一个更整洁的UI，并尝试根据https://sbcode.net/threejs/dat-gui/导入import { GUI } from '/jsm/libs/dat.gui.module';

但是，它显示了一个错误：

Failed to compile
./src/App.js
Module not found: You attempted to import /jsm/libs/dat.gui.module which falls outside of the project src/ directory. Relative imports outside of src/ are not supported.
This error occurred during the build time and cannot be dismissed.

这很奇怪，因为前面的四个库都在src之外。

然后，我尝试放置相对路径，但编译器无法解析该路径。

然后，我尝试在src文件夹中移动dat.gui.module.js文件，但同样出现无法解决的错误。

这是我的项目的文件夹结构：

-Project
 |-node_modules
 | L-(all the ext. libs including @react-three etc.)
 |-src
 | L-App.js
 L-public
   L-index.html

如何让dat.gui在我的react-three-fiber项目中工作？

Answer 1

你必须像import { GUI } from 'three/examples/jsm/libs/dat.gui.module'一样导入它。然后你可以像下面的例子一样在useEffect中使用它。

const gui = new GUI()
useEffect(() => {
  const folder = gui.addFolder("Light")
  folder.add(lightRef.current, 'intensity', 0, 1, 0.001)
}, [])

Answer 2

您需要使用动态导入而不是静态导入将dat.gui导入到react.js中。

而不是这样：

import { GUI } from 'three/examples/jsm/libs/dat.gui.module'

在componentDidMount或useEffect钩子中尝试以下内容：

const { GUI } = await import('three/examples/jsm/libs/dat.gui.module')
const gui = new GUI()

或者这样：

import('three/examples/jsm/libs/dat.gui.module').then(({ GUI }) => {
  const gui = new GUI()
})

Answer 3

从dat.gui库导入GUI

import * as dat from "dat.gui";

或者只使用dat-gui-react

React dat.GUI