CODEWITHSUNDEEP
javascriptthree.js
Austin Best
Austin Best

Reputation: 1058

How to use Three.js OrbitControl on multiple objects

So i have the orbit control working, but i have 3 objects on the page. When it controls one, it controls them all. Also pan/zoom does not work at all with the OrthographicCamera.

I have each instance of the OrbitControls assigned its own variable, so it is not global across them all.

controlsObjOne = new THREE.OrbitControls(cameraObjOne);
controlsObjOne.addEventListener('change', renderObjOne);

I use ObjTwo, Three, etc for the other models. Everything works this way (camera, light, render, etc) except the orbit. Is it possible with this library or is there another one that i have not seen that will work with multiple objects?

Upvotes: 1

Views: 3750

Answers (1)

mrflix
mrflix

Reputation: 400

The reason for this is that by default, the OrbitControls attach the eventListeners for mouse/touch input to the document. One can hand over a domElement as a second parameter. Then all eventListeners will be bound to that element (for example the renderer canvas domElement). But that will highly limit the navigation possibilities, since the mousemove will only get registered when the mouse is in the canvas area.

What you want is the mousedown eventListeners on the renderer-canvas and the mousemove on the document to freely move the mouse once the mouse is pressed.

I created a modified version with a 3rd parameter to hand over your canvas element: https://gist.github.com/mrflix/8351020

Upvotes: 4

Related Questions