Angular 8 and OrbitControl with requestAnimationFrame not working or throwing out an error

I must admit I am very new to THREE js and the concepts in general so my hope is this is a very trivial mistake, if it is I am not seeing it though!

I have a Angular component, I am trying to make use of the OrbitControls and a PerspectiveCamera with a simple sphere in the hope i can move the camera around the sphere and zoom in and out.

I have the following code:

 @ViewChild('rendererContainer', { static: true })
 rendererContainer: ElementRef;
 renderer = new WebGLRenderer();
 scene = null;
 camera = null;
 mesh = null;
 controls = null;

 constructor() {
   this.scene = new Scene();
   const axis = new AxesHelper(window.innerHeight - 100);

   const geometry = new SphereGeometry( Math.random() * 100, 32 , 32, 6, 6, 6, 6 );
   const material = new MeshBasicMaterial( {color: 0xffffff, wireframe: true} );
   const sphere = new Mesh( geometry, material );
   sphere.material = new MeshBasicMaterial( {color: 0xaaaabb, wireframe: true})
   this.scene.add( sphere );


 ngAfterViewInit(): void {

 public addRenderer(){
   this.renderer.setSize(window.innerWidth - 100, window.innerHeight - 100);
public addCamera(){ = new PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 10000);

 public addControls() {
   this.controls = new OrbitControls(, this.renderer.domElement);
   this.controls.enableDamping = true;
   this.controls.dampingFactor = 0.25;
   this.controls.enableZoom = true;

   this.controls.enablePan = false;
   this.controls.addEventListener('change', this.render.bind(this));
 render() {

located in my app.component.ts and a template with a simple div.

The problem is that I do not get the desired result at all, i see that the sphere mesh has been rendered and the camera is where it should be but the orbit controls are not working.

Any advice on where i am going wrong would be very welcome.


I’m not sure if this is the cause of your problem, but you are mixing two approaches to rendering.

This is an standard animation loop:

 render() {

This is rendering when the controls are changed:

this.controls.addEventListener('change', this.render.bind(this));

You can use one or the other, but there’s no need to do both. I would suggest you stick with the animation loop at least until it’s working.

You can use the renderer’s setAnimationLoop instead to start it:

renderer.setAnimationLoop(() => {
    renderer.render(scene, camera);
1 Like