Uncaught TypeError: Cannot read property 'call' of undefined at THREE.OrbitControls.dispatchEvent (three.min.js:343)

Questions
1

Hi, I am new to three.js and since I’ve started using orbit controls I have been getting this error when I move my mouse:

Uncaught TypeError: Cannot read property ‘call’ of undefined
at THREE.OrbitControls.dispatchEvent (three.min.js:343)
at THREE.OrbitControls.update (OrbitControls.js:230)
at handleMouseMoveRotate (OrbitControls.js:493)
at HTMLDocument.onMouseMove (OrbitControls.js:901)

I was wondering if anyone came across this issue and if you did is there a way to fix it?

I am using the newest version of three.js and this is how I implement the orbit controls in my code:

controls = new THREE.OrbitControls(camera);
controls.addEventListener(‘change’, renderer);
controls.enableRotate = true;
controls.maxPolarAngle =1.6
controls.minPolarAngle =1.6;
controls.minDistance = 10;
controls.enableZoom = false;
controls.keyPanSpeed = 70;
controls.keys = {
LEFT: 65, //left arrow
UP: 87, // up arrow
RIGHT: 68, // right arrow
BOTTOM: 83 // down arrow
};
controls.target.set(0,40,40);

this code is in the init() function

I would appreciate all the help!

2

You can obtain more info about the error if you switch from three.min.js to three.js. That way you can inspect the code and know what is failing, since three.js is not a minified version of the code.

Besides that, you are calling controls.addEventListener(‘change’, renderer);. You shouldn’t pass the renderer, but a function.

2 Likes
3

I did look into the three.js file and I found the line of code that’s apparently causing the problem:
line 343:

  array[ i ].call( this, event );

when I comment this line out then I get no error.

Also, what sort of a function do I need?

I tried writing:

controls.addEventListener('change', renderer.domElement);

But then I get the error:

Uncaught TypeError: array[i].call is not a function
at THREE.OrbitControls.dispatchEvent (three.js:343)
at THREE.OrbitControls.update (OrbitControls.js:230)
at alley.js:154
4

Do it like so:

controls.addEventListener( 'change', render );

render is a function that looks like so:

function render() {

    renderer.render( scene, camera );

}
3 Likes
5

Thank you so much I have been misspelling this word all this time… I really appreciate it