Поверните камеру вокруг объекта с помощью Three.js

Я показываю элемент OBJ с помощью Three.js с помощью WebGlRenderer, теперь я бы хотел, чтобы пользователи могли поворачивать камеру вокруг объекта в любом направлении, я нашел этот ответ:

Поверните камеру в Three.js с помощью мыши

Но оба примера возвращают мне ошибки, первый говорит, что проектор не определен, и я не знаю, что это значит с "проектором". У меня просто простая камера, объект и немного света. Второй код говорит, что undefined не является функцией.

Кто-нибудь знает, как получить нужный мне результат?

Ответы

Ответ 1

Это то, что вы хотите: http://threejs.org/examples/misc_controls_orbit.html

Включите элементы управления орбиты (после их загрузки):

<script src="js/controls/OrbitControls.js"></script>

Установите переменную:

var controls;

Прикрепите элементы управления к камере и добавьте слушателя:

controls = new THREE.OrbitControls( camera );
controls.addEventListener( 'change', render );

а в вашей анимационной функции обновите элементы управления:

controls.update();

[Обновить] controls.autoRotate = true; (проверено в v73. Последние версии OrbitControls.js добавили этот элемент управления.)

Ответ 2

Действительно, если вы замените "камеру" на объект по вашему выбору, объект будет вращаться. Но если вокруг него есть другие объекты (например, сетка на полу), они все равно будут стоять на месте. Это может быть то, что вы хотите, или это может показаться странным. (Представьте, что стул вращается над полом...?)

Я выбираю переопределить центральный объект из OrbitControls.JS из моего кода после инициализации элементов управления орбиты

controls = new THREE.OrbitControls(camera, renderer.domElement);
…
controls.center =  new THREE.Vector3(
    chair.position.x,
    chair.position.y,
    chair.position.z
);

(отказ от ответственности: у меня сложилось впечатление, что существуют разные версии OrbitControls.js, но я полагаю, что все они используют этот центр-объект)

Ответ 3

Добавьте слушателя для запуска метода рендеринга при изменении OrbitControl:

    const controls = new OrbitControls(camera, this.renderer.domElement);
    controls.enableDamping = true;   //damping 
    controls.dampingFactor = 0.25;   //damping inertia
    controls.enableZoom = true;      //Zooming
    controls.autoRotate = true;       // enable rotation
    controls.maxPolarAngle = Math.PI / 2; // Limit angle of visibility
    controls.keys = {
      LEFT: 37, //left arrow
      UP: 38, // up arrow
      RIGHT: 39, // right arrow
      BOTTOM: 40 // down arrow
    };

   controls.addEventListener("change", () => {
      if (this.renderer) this.renderer.render(this.scene, camera);
    });

и в средствах управления обновлением animate:

  start = () => {
    if (!this.frameId) {
      this.frameId = requestAnimationFrame(this.animate);
    }
  };
  stop = () => {
    cancelAnimationFrame(this.frameId);
  };

  renderScene = () => {
    if (this.renderer) this.renderer.render(this.scene, camera);
  };


animate = () => {
    // update controls
    controls.update();
}