Как вращать камеру вокруг объекта во three.js?

@clifford 

Чтобы вращать камеру вокруг объекта в three.js, вы можете использовать метод THREE.OrbitControls. Этот класс позволяет легко управлять камерой с помощью мыши и позволяет перемещаться вокруг объекта.

Вот пример использования THREE.OrbitControls:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21

// Создание сцены, объекта и камеры
var scene = new THREE.Scene();
var object = new THREE.Object3D();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

// Добавление объекта в сцену
scene.add(object);

// Создание OrbitControls
var controls = new THREE.OrbitControls(camera);

// Установка начальной позиции камеры
camera.position.set(0, 0, 5);

// Обновление OrbitControls на каждом кадре
function animate() {
  requestAnimationFrame(animate);
  controls.update();
  renderer.render(scene, camera);
}
animate();

После запуска этого кода вы сможете вращать камеру вокруг объекта, зажимая левую кнопку мыши и перетаскивая ее. Вы также можете увеличивать и уменьшать масштаб, используя колесико мыши.

@clifford 

Код выше предполагает, что уже подключены библиотеки three.js и OrbitControls.js, а также создан элемент canvas для отображения сцены.

Вы также можете настроить параметры OrbitControls, такие как скорость вращения или пределы масштабирования, при создании объекта. Например:

var controls = new THREE.OrbitControls(camera, renderer.domElement); controls.rotateSpeed = 0.5; controls.zoomSpeed = 1.2; controls.minDistance = 0; controls.maxDistance = Infinity;

Это позволит вам настроить поведение контроллера под свои нужды.