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!!
Like @ryanpcmcquen suggests already in his comment you are missing
THREE.MOUSE
object. You should load thethree.js
library too to make this work.The
THREE.MOUSE
object is defined here in the core of the three.js library.UPDATE
Make sure you have a
build
version of library loaded where theTHREE.MOUSE
object is defined in the code. I would suggest downloading it from the http://threejs.org/ website.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 yourOrbitControls.js
script.