How To Load Three-orbitcontrols With Import Syntax?

May 29, 2023 Post a Comment

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 fr

Solution 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

Solution 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

Solution 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"
  }
}

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

Solution 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.

JavaScript Programmer Calgary