How to load three-orbitcontrols with import syntax?

问题

Has anyone tried using the OrbitControls function with ReactJS? Here is the sample code I wrote:

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

It returns the following error:

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

Does anyone know how to resolve this issue?

回答1:

The problem is that when you import THREE, it is not globally scoped which is what the 'three-orbitcontrols' module relies on.

You could use this module instead - 'three-orbit-controls' (https://www.npmjs.com/package/three-orbit-controls)

and import it like so:

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

Usage of orbital controls is the same as you have now but with this, an instance of THREE is being passed to the Orbit Controls module.

EDIT - 2020

Although the above answer was useful when the question was first asked, @Marquizzo rightly pointed out this is no longer the case.

Orbit Controls is now packaged with three.js and there's no need to use require(), when you should use the import statement.

Please refer to this answer now - https://stackoverflow.com/a/55929101/8837901

回答2:

There is also an option to import OrbitControls directly from "three" package like this:

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

and use it in the app without any issues:

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

domElement has to be passed as second argument in latest builds of Three.js. React ref can be used for it.

Here is a live demo with latest React and Three.js https://codesandbox.io/s/github/supromikali/react-three-demo

回答3:

I just did it like this when using parcel bundler:

app.js:

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

// the rest of the example from threejs web page 
// https://github.com/mrdoob/three.js/blob/master/examples/misc_controls_orbit.html

index.html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Parcel threejs example</title>
    <style>
      body {
        margin: 0;
      }
    </style>
  </head>
  <body>
    <script src="app.js"></script>
  </body>
</html>

package.json:

{
  "name": "test-threejs-with-parcel",
  "version": "0.1.0",
  "description": "Threejs with parcel test",
  "main": "app.js",
  "scripts": {
    "start": "parcel index.html",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "parcel-bundler": "^1.10.0"
  },
  "dependencies": {
    "three": "^0.109.0"
  }
}

回答4:

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);

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';

回答5:

I have to go with Anurag with this one. First i had three-orbit-controls installed which danlong suggested, but i ended up having issues with require not being defined when trying to start the WebClient.

After that i switched to orbit-controls-es6 and everything worked just fine.

来源：https://stackoverflow.com/questions/64654114/orbit-controls-not-working-in-three-js-react-native

标签

javascript

reactjs

three.js