OrbitControls issue with angular 6

Questions
1

Hi,

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?

2

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

1 Like
3

Hello,

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

See in:
orbit-controls.directive.ts

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

which includes:
THREE=require(‘three’);

Check source code and demo.

4

This working fine with three <= r99 :grin:

5

Indeed.
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.
Cheers!

6

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
7

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 !