How to load three-orbitcontrols with import syntax?

Question

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?

Answer 1

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

Answer 2

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

Answer 3

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