WebGLRenderer.render called with undefined camera - three.js

Question

I'm using three.js and OrbitControls.js in combination, in a 3D app. Sometimes WebGLRenderer.render gets called with an undefined camera. This happens when I use the mouse to navigate the 3D model, using the controls delivered by OrbitConrols.
The undefined camera argument is weird, as my animate function (see code below) always calls WebGLRenderer.render with a well defined camera. Also, when instantiating OrbitControls, I give it a well defined camera. So the question is - how can it be that WebGLRenderer.render is at some point called with an undefined camera?
NOTE: The source code for the WebGLRenderer.render function can be seen in line 20426 in the three.js source code.
I attempted to locate all the potential call sites by searching for the text string render(. There are 14 such matches on the string render(, but none of these gives an undefined camera as argument. Thus, the trail was cold.
I tried stack tracing from the callee (the function body of the WebGLRenderer.renderfunction), but this merely lead back to some mix-it-all event hub. But it gave me a hint that the caller might be Javascript itself, calling from its DOM event system. That would explain why I couldn't find the call site in the three.js source code.
Thus perhaps the problem is associated with the point at which OrbitControls interacts with the Javascript event system. When initialising my app, I register an event on my OrbitControls instance. See code below. Could this be causing trouble? No camera is given as argument when this happens though :/
var myControls = require('../../instances/three/myControls');
var myRenderer = require('../../instances/three/myRenderer');
myControls.damping = 0.2;
myControls.domElement.addEventListener( 'change', myRenderer.render );
EDIT:
I'm using these versions:
three.js 0.81.0
three-orbit-controls 72.0.0

Answer 1

So, indeed the wrong-doing call to render was coming from some event system (the Javascript DOM event system). This module shows where the render function is given as callback to an event listener:
var myControls = require('../../instances/three/myControls');
var myRenderer = require('../../instances/three/myRenderer');
myControls.damping = 0.2;
myControls.addEventListener( 'change', myRenderer.render );
module.exports = {};
( where the myControls module looks like this:
var THREE = require('three');
var orbitControls = require('three-orbit-controls');
var myRenderer = require('../../instances/three/myRenderer');
var myCamera = require('./myCamera');
require('../../sideeffects/three/addCamera');
// add orbitControls to THREE:
var OrbitControls = orbitControls( THREE );
// make controls:
var controls = new OrbitControls( myCamera, myRenderer.domElement );
module.exports = controls;
)
However, it seems that OrbitControls.js has been changed in such a way that instances of the OrbitControls constructor are no longer DOM-elements. Thus, one CANNOT register events on them, as I was doing with the line:
myControls.addEventListener( 'change', myRenderer.render );
Instead, instances of the OrbitControls constructor has a new property: domElement which, as you might have guessed, is indeed a DOM element. Thus, I can fix the problem by changing the target of my event attachment to myControls.domElement. Thus the above line comes to look like this:
myControls.domElement.addEventListener( 'change', myRenderer.render );
and that solved the problem :)
EDIT:
It turns out that this line can actually be omitted completely! It is only necessary if there is no animation loop (a perpetual loop that calls requestAnimationFrame on each loop step)
Also, dampening can be enabled by doing this:
myControls.enableDamping = true;
and then adding myControls.update(); somewhere in your animation loop.