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

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