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 \'tachy         


        

Answer 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