CODEWITHSUNDEEP
javascriptanimationthree.jsrotationorbit.js
sheavictoria
sheavictoria

Reputation: 57

THREE.js OrbitControls not working

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!!

Upvotes: 3

Views: 4671

Answers (1)

Wilt
Wilt

Reputation: 44336

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.

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.

Upvotes: 2

Related Questions