在 React 项目中导入 Three.js FlyControls 时出现问题?

Question

我一直在努力尝试将默认的飞行控件导入到我的 React Three.js 项目中。

我尝试通过以下方式从三个.js node_modules位置的各自文件夹中导入 FlyControls：

import * as THREE from 'three';
import FlyControls from "three/examples/js/controls/FlyControls"
// in componentDidMount()
this.controls = new FlyControls(this.camera, this.renderer.domElement);

这给了我错误ReferenceError: Three is not defined.如果我尝试将控件分配行更改为以下内容：

this.controls = new THREE.FlyControls(this.camera, this.renderer.domElement);

我收到此错误：Attempted import error: 'FlyControls' is not exported from 'three' (imported as 'THREE').

我也尝试过安装三飞控件 npm 包，这条路线也没有任何运气，这是我在这种情况下使用的代码：

import FlyControls from 'three-fly-controls';
// in componentDidMount()
this.controls = new FlyControls(this.camera, this.renderer.domElement);

有谁知道如何将这些控件导入相关？

Answer 1

我没有使用飞行控件，但我通过这样做让轨道控件使用 npm 包工作：

import * as THREE from 'three';
const OrbitControls = require('three-orbit-controls')(THREE);

然后，我在我的项目中实例化了它们，如下所示：

this.controls = new OrbitControls(this.camera, this.renderer.domElement);