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:
- Download
three-orbit-controls
npm install three-orbit-controls —save-dev
yarn add -D three-orbit-controls
- 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.