Threejs - Importing OrbitControls

OrbitControls is a Three.js submodule to move or zoom or drag the camera around a point.

Option 1: With CDN

The CDN distribution variant of Three.js is prepacked with OrbitControls module.

Just create the Object of OrbitControls as:

const controls = new Three.OrbitControls(camera, renderer.domElement)

Option 2: Webpack + three-orbit-controls module

three-orbit-controls presents OrbitControls as a separate module. It requires the instance of Three for initialization.

The module can be used when using a bundler like webpack or Parcel or plain ES6; the following is a step-by-step guide to import and initialize Orbit Controls using this module:

1. Download three-orbit-controls

npm install three-orbit-controls —save-dev

yarn add -D three-orbit-controls

2. Import the module as:

import * as Three from 'three'
import oc from 'three-orbit-controls'

const OrbitControls = oc(Three)
.
.
const controls =  new OrbitControls(camera, renderer.domElement)

Option 3: Bundler - Without any external Module

Three.js npm library distribution contains examples directory which holds secondary 3d components; OrbitControls is one of them.

Just import OrbitControls from examples/jsm as:

import { OrbitControls } from '@/node_modules/three/examples/jsm/controls/OrbitControls'

.
.
.
const controls =  new OrbitControls(camera, renderer.domElement)

This approach also works with TypeScript.