THREE.js OrbitControls not working

Question

I'm pretty sure I have everything needed in my JavaScript code for using Three.js OrbitControls. I have:

<script>"OrbitControls.js"></script>

And also:

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

Which it doesn't complain about. But my error says...

Uncaught TypeError: Cannot read property 'LEFT' of undefined (21:20:28:855 | error, javascript) at public_html/OrbitControls.js:76

Which refers to the OrbitControls document where it says:

this.mouseButtons = { ORBIT: THREE.MOUSE.LEFT, ZOOM: THREE.MOUSE.MIDDLE, PAN: THREE.MOUSE.RIGHT };

I don't know how to fix it, anything would be much appreciated!!

Answer 1

Like @ryanpcmcquen suggests already in his comment you are missing THREE.MOUSE object. You should load the three.js library too to make this work.

The THREE.MOUSE object is defined here in the core of the three.js library.

THREE.MOUSE = { LEFT: 0, MIDDLE: 1, RIGHT: 2 };

---

UPDATE

Make sure you have a build version of library loaded where the THREE.MOUSE object is defined in the code. I would suggest downloading it from the http://threejs.org/ website.

• here: http://threejs.org/build/three.js for the full version or
• here: http://threejs.org/build/three.min.js for the minified version.

Both those files have the THREE.MOUSE object.

---

Note: Also think about the correct loading order of your libraries. You will have to include the three.js script before your OrbitControls.js script.