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

Question

有没有人尝试过将 OrbitControls 函数与 ReactJS 一起使用？这是我写的示例代码:

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