Render loop exploding

Question

I made a small demo/boilerplate for loading a custom mesh with Threejs and inspecting it using orbital controls.

The problem here is that when rotating the object the render loop seems to explode and I can't figure out why.

https://codepen.io/rosefalk/pen/ooBYme?editors=0010

function render() {
  console.log('render')
  canvasPosition = document.getElementById( "container" ).children;
  renderer.render( scene, camera );
  requestAnimationFrame( render );
}

If you look in the console it's chugging away merily at what I assume is ~60 calls a second until you start rotating, then it goes up at extreme rate.

Answer 1

Solution - Removal of this part:

controls.addEventListener( 'change', render );

When controls are updating it calls render, render calls itself and that explodes the whole thing, adding a massive amount of extra calls. It's a remnant from when it made sense to only update the scene on user interaction.