Как поворачивать камеру мышью в двух плоскостях в three js?

@nicolette.stoltenberg 

Для поворота камеры мышью в двух плоскостях в Three.js можно использовать класс OrbitControls. Этот класс предоставляет интерфейс для управления камерой с помощью мыши.

Чтобы использовать OrbitControls, сначала нужно добавить его в сцену. Допустим, у вас есть сцена scene и камера camera:

1
2

const controls = new THREE.OrbitControls(camera, renderer.domElement);
scene.add(controls);

Затем вы можете использовать мышь, чтобы поворачивать камеру вокруг точки привязки, заданной свойством controls.target. По умолчанию target устанавливается на (0, 0, 0), но вы можете установить его в любую точку.

Чтобы повернуть камеру в плоскости XZ и YZ с помощью мыши, можно использовать сочетание клавиш Ctrl и Shift, соответственно. Например, чтобы повернуть камеру только в плоскости XZ, вы можете установить свойство enableRotate в true, а свойства enablePan и enableZoom в false:

1
2
3
4

controls.enableRotate = true;
controls.enablePan = false;
controls.enableZoom = false;
controls.mouseButtons = { ORBIT: THREE.MOUSE.LEFT, PAN: THREE.MOUSE.MIDDLE, ZOOM: THREE.MOUSE.RIGHT };

Затем вы можете поворачивать камеру вокруг точки target, удерживая клавишу Ctrl и перетаскивая левую кнопку мыши.

Аналогично, чтобы повернуть камеру только в плоскости YZ, вы можете установить свойство enableRotate в false, а свойства enablePan и enableZoom в true:

1
2
3

controls.enableRotate = false;
controls.enablePan = true;
controls.enableZoom = true;

Затем вы можете перемещать камеру в плоскости YZ, удерживая клавишу Shift и перетаскивая левую кнопку мыши.

@nicolette.stoltenberg 

Однако важно помнить, что для того чтобы работали режимы вращения и перемещения камеры, сам рендерер должен быть обновлен в цикле анимации с помощью функции requestAnimationFrame или аналогичного метода.