# OrbitControls issue with angular 6

**URL:** <https://discourse.threejs.org/t/orbitcontrols-issue-with-angular-6/5092>\
**Category:** Questions\
**Tags:** angular\
**Created:** [November 24, 2018, 6:19pm UTC](https://discourse.threejs.org/t/orbitcontrols-issue-with-angular-6/5092 "2018-11-24T18:19:56Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![mghildiy](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mghildiy/32/50455_2.png) [@mghildiy](https://discourse.threejs.org/u/mghildiy)\
**Post date:** [November 24, 2018, 6:19pm UTC](https://discourse.threejs.org/t/orbitcontrols-issue-with-angular-6/5092/1 "2018-11-24T18:19:56Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [November 25, 2018, 10:28am UTC](https://discourse.threejs.org/t/orbitcontrols-issue-with-angular-6/5092/2 "2018-11-25T10:28:35Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![makimenko](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/makimenko/32/4900_2.png) [@makimenko](https://discourse.threejs.org/u/makimenko)\
**Post date:** [March 15, 2019, 8:46pm UTC](https://discourse.threejs.org/t/orbitcontrols-issue-with-angular-6/5092/3 "2019-03-15T20:46:49Z")

</div>

Hello,

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

> **[makimenko/angular-template-for-threejs](https://github.com/makimenko/angular-template-for-threejs)**
>
> Angular threejs examples (three template for dummies) - makimenko/angular-template-for-threejs

See in:  
**orbit-controls.directive.ts**

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

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

Check source code and demo.

---

<div class="post-metadata">

**Author:** ![doum](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/doum/32/5825_2.png) [@doum](https://discourse.threejs.org/u/doum)\
**Post date:** [April 4, 2019, 6:49am UTC](https://discourse.threejs.org/t/orbitcontrols-issue-with-angular-6/5092/4 "2019-04-04T06:49:24Z")

</div>

This working fine with three \<= r99 😁

---

<div class="post-metadata">

**Author:** ![makimenko](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/makimenko/32/4900_2.png) [@makimenko](https://discourse.threejs.org/u/makimenko)\
**Post date:** [April 4, 2019, 7:44pm UTC](https://discourse.threejs.org/t/orbitcontrols-issue-with-angular-6/5092/5 "2019-04-04T19:44:22Z")

</div>

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!

---

<div class="post-metadata">

**Author:** ![wparrott](https://avatars.discourse-cdn.com/v4/letter/w/b38774/32.png) [@wparrott](https://discourse.threejs.org/u/wparrott)\
**Post date:** [April 7, 2019, 2:48am UTC](https://discourse.threejs.org/t/orbitcontrols-issue-with-angular-6/5092/6 "2019-04-07T02:48:36Z")

</div>

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:

```auto
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.

---

<div class="post-metadata">

**Author:** ![doum](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/doum/32/5825_2.png) [@doum](https://discourse.threejs.org/u/doum)\
**Post date:** [April 8, 2019, 9:27am UTC](https://discourse.threejs.org/t/orbitcontrols-issue-with-angular-6/5092/7 "2019-04-08T09:27:57Z")

</div>

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 !