OrbitControls issue with angular 6


I am trying to make use of Three in angular 6 based application.
I import three in my ts file as:

import * as THREE from ‘three’;

And then I try to use OrbitControls as:

var controls = new THREE.OrbitControls(camera);

But it gives me error as:

TypeError: three__WEBPACK_IMPORTED_MODULE_1__.OrbitControls is not a constructor

Other things like Geometry, BufferGeometry, PerspectiveCamera etc have worked all right.

Are there any specific steps to be taken to use OrbitControls in angular 6?

OrbitControls is no part of the core. You have to transform the class into a module and import it separately.

1 Like


We have working example (Angular 2-7) on GitHub:

See in:

there is an import:
import ‘…/js/EnableThreeExamples’;

which includes:

Check source code and demo.

This working fine with three <= r99 :grin:

Angular’s typescript is based on @types/three package and currently the latest version is 0.93.30. We will try to upgrade/modify repository once new version of @types/three will be released.

From the npm modules three ver 0.103.0 I’m able to load the new modularized orbitcontrol in my angular 7 project as follows:

import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';

I noticed in the three git repo recent work to modularize controls, loaders and utils. But I was expecting to import from something ‘three/controls’ or ‘three/loaders’ rather than from the examples/* path.

1 Like

Try my solution and this’s my package.json

“dependencies”: {

@types/three”: “^0.93.30”,
“three”: “0.99.0”


In your viewer component import this

import ‘./js/enablethreejs.js’;
import ‘three/examples/js/controls/OrbitControls’;

and source of js/enablethreejs.js

THREE = require(‘three’);

good luck !