threejs disable orbit camera while using transform control

Question

I have a scene with multiple meshes, each one of them associated to a different transformControl; in order to select different objects, I'm using raycasting techniques. I'm also using an orbit camera in order to navigate the scene.

Whenever I modify the position/rotation/scale of the selected object using transform control, I want to disable orbit camera, because sometimes while I'm clicking on a picker, I'm also picking on the background of the scene, so the orbit camera moves.

I'd like to stop this behavior and I've already tried to handle it with raycasting techniques, but it doesn't work.

controls.enable = false; to disable OrbitControls. You disable it for example if your raycaster does not return any objects and enable it on mouseUp again? — GuyGood, Nov 18 '13 at 23:26
That's right. I've already tried doing what you suggest, but I doesn't work. It seems that the raycaster doesn't work while the mouse is over the transform control pickers, even if i can use those picker. I really don't understand.. — rastafermo, Nov 19 '13 at 08:35
maybe check the threejs Editor code, because well, it is implemented there. ^^ — GuyGood, Nov 19 '13 at 09:53

score 26 · Accepted Answer · answered Jul 07 '14 at 20:44

26

Stumbled over this and thought it would be helpful to see the answer (credits to BuildingJarl):

// if youre definition is like
var controls = new THREE.OrbitControls( camera );

// you can easily disable it by using
controls.enabled = false;

In my case I was using a UI overlay and I got issues with getting the focus to it. Disabling the controls solved my problems.

Greetings Mat

answered Jul 07 '14 at 20:44

schlenger

1,447
1
19
40

this answer is in the comments of the question. – gaitat Jul 07 '14 at 21:40
as I already said: credits to BuildingJarl... but this way you can see the answer directly. Just found it helpful. greetings – schlenger Jul 08 '14 at 00:18
4

To add some information beside, if you need to disable the cursor keys as well, use `controls.noPan = false;`. https://github.com/mrdoob/three.js/blob/master/examples/js/controls/OrbitControls.js – Avatar Aug 10 '14 at 17:11

score 4 · Answer 2 · answered Oct 15 '16 at 18:27

Taken from three.js editor's code:

var orbitControls= new THREE.EditorControls(camera, renderer.domElement);
orbitControls.addEventListener('change', render);

var transformControls = new THREE.TransformControls(camera, renderer.domElement);    
transformControls.addEventListener('change', render);
transformControls.attach(mesh);
transformControls.addEventListener('mouseDown', function () {
    orbitControls.enabled = false;
});
transformControls.addEventListener('mouseUp', function () {
    orbitControls.enabled = true;
});

threejs disable orbit camera while using transform control

2 Answers2