如何使用导入语法加载三轨道控件？

Question

有人试过在 ReactJS 中使用 OrbitControls 函数吗？这是我写的示例代码：

import React, { Component } from 'react';
import 'tachyons';
import * as THREE from 'react';
import OrbitControls from 'three-orbitcontrols';
class App extends Component {
render() {
...
//Controls
const controls = new OrbitControls(camera, renderer.domElement)
controls.dampingFactor = 0.25
controls.enableZoom = false

它返回以下错误：

./node_modules/three-orbitcontrols/OrbitControls.js
1054:70-89 "export 'OrbitControls' (imported as 'THREE') was not found in 'three'

有谁知道如何解决这个问题？

Answer 1

还有一个选项可以直接从“三个”包中导入 OrbitControls，如下所示：

import React, { Component } from "react";
import ReactDOM from "react-dom";
import * as THREE from 'three';
import {OrbitControls} from "three/examples/jsm/controls/OrbitControls";

并在应用程序中使用它没有任何问题：

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

domElement必须在 Three.js 的最新版本中作为第二个参数传递。React ref 可以用于它。

这是最新的 React 和 Three.js https://codesandbox.io/s/github/supromikali/react-three-demo的现场演示

Answer 2

Update 2020:

three.js now exports OrbitControls as a module by default, and as others have pointed out, it can be used as follows:

import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';

Original Answer:

There is an npm package that you can use: Orbit Controls ES6

Link: https://www.npmjs.com/package/orbit-controls-es6

Installation:

npm i orbit-controls-es6 --save

Usage:

import OrbitControls from 'orbit-controls-es6';

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

Answer 3

问题是，当您导入 THREE 时，它不是全局范围的，而这正是“三轨道控制”模块所依赖的。

您可以使用此模块 - '三轨道控制' ( https://www.npmjs.com/package/ Three-orbit-controls )

并像这样导入它：

const OrbitControls = require('three-orbit-controls')(THREE);

轨道控制的使用与现在相同，但是这样，THREE 的实例将被传递到轨道控制模块。

编辑 - 2020

尽管上面的答案在第一次提出问题时很有用，但@Marquizzo 正确地指出情况已不再如此。

require()Orbit Controls 现在与 Three.js 一起打包，当您应该使用该import语句时，无需使用, 。

请立即参考此答案 - /sf/answers/3915037101/