javascript - threejs disable orbit camera while using transform control - Stack Overflow

admin管理员组

文章数量:1178545

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.

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.

• javascript
• three.js
• transformation
• raycasting

Share Improve this question Follow edited Nov 18, 2013 at 23:19 Charles 51.4k1313 gold badges106106 silver badges144144 bronze badges asked Nov 18, 2013 at 21:44 rastafermorastafermo 43811 gold badge55 silver badges1313 bronze badges 5

• 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 Commented Nov 18, 2013 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 Commented Nov 19, 2013 at 8:35
• maybe check the threejs Editor code, because well, it is implemented there. ^^ – GuyGood Commented Nov 19, 2013 at 9:53
• controls.enabled = false – joey Commented Apr 19, 2014 at 13:39
• 2 should be controls.enableRotate = false; – aswzen Commented Aug 8, 2019 at 16:01

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 30

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

Taken from three.js editor's example code, you can just disable orbitControls when transformControls are used:

import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
import { TransformControls } from 'three/addons/controls/TransformControls.js';

let orbitControls= new OrbitControls(camera, renderer.domElement);
orbitControls.addEventListener('change', render);

let transformControls = new TransformControls(camera, renderer.domElement);
transformControls.addEventListener('change', render);
transformControls.attach(targetObject);
transformControls.addEventListener('dragging-changed', function (event) {
    orbitControls.enabled = !event.value;
});

On every dragging of the controls, the orbitControls will be set orbitControls.enabled = false.

Note that if you have targetObject.matrixAutoUpdate = false then you need to call targetObject.updateMatrix() before render in the change event handler.

本文标签： javascriptthreejs disable orbit camera while using transform controlStack Overflow