OrbitControls of THREE.js displaying error

Question

I have already installed THREE.js in my angular project.I am trying to use OrbitControls in the below fashion but it is giving an error:-

var controls = new THREE.OrbitControls(this.camera,this.renderer.domElement);

The error is :

Property 'OrbitControls' does not exist on type 'typeof import.

Can anybody suggest how to use OrbitControl in angular project?

I tried to install the below npm libraries but without luck :-

npm i @types/three --save-dev 
npm i --save three-orbit-controls

Sorbian

Answer 1

Package three-orbit-controls has been deprecated.

Try with :

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

Cactus

Answer 2

In Angular Three this is everything you need in your template (Important to note ngts and ngt):

<ngts-orbit-controls />

<ngt-mesh #cube>
  <ngt-box-geometry />
  <ngt-mesh-matcap-material color="red" />
</ngt-mesh>

And in your component, you simply import NgtsOrbitControls and reference your mesh:

cubeRef = viewChild.required<ElementRef<Mesh>>('cube');

See here a working stackblitz example online. (After clicking on the link, it takes about 30 seconds to start, as the packages are reinstalled each time. On your own computer, it would take milliseconds.)

Cheryle