How to load three-orbitcontrols with import syntax?

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

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