Importing Threejs OrbitControls with Webpack

three.js

OrbitControls controls camera movements in Three.js ecosystem. When using CDN, the import of OrbitControl is just as new Three.OribitControls() but when using with webpack or importing the library with ES6 style, It is no longer the case.

The following code snippet, import OrbitControls correctly with webpack / ES6:

Approach 1: With three-orbit-controls module

  1. Download three-orbit-controls

    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)
    

Approach 2: Without external Module

Just import file from installed location.

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

This approach also works with TypeScript.

This site uses third-party cookies to gather website usage and performance data.