Поворот камеры вокруг модели в Autodesk Forge

Я создал расширение, которое вращает камеру вокруг модели Revit, которая была загружена в созданном ведре, но как мне заставить камеру постоянно вращаться вокруг модели после нажатия кнопки на панели инструментов. Кроме того, как мне снова нажать ту же кнопку, чтобы остановить вращение? Приведенный ниже код - это то, что я использовал для поворота камеры после нажатия кнопки.

var _this = this;
var _viewer = _this.viewer;
var turnTableToolbarButton = new Autodesk.Viewing.UI.Button('turnTableButton');
turnTableToolbarButton.onClick = function (e) { 

    const nav = _viewer.navigation;
    const up = nav.getCameraUpVector();
    var pos = nav.getPosition();
    const axis = new THREE.Vector3(0, 0, 1);
    const speed = 10.0 * Math.PI / 180;

    const matrix = new THREE.Matrix4().makeRotationAxis(axis, speed * 0.1);

    pos.applyMatrix4(matrix);
    up.applyMatrix4(matrix);

    nav.setView(pos, new THREE.Vector3(0, 0, 0));
    nav.setCameraUpVector(up);
    var viewState = _viewer.getState();
    _viewer.restoreState(viewState);
};

javascript autodesk-forge autodesk-viewer

14.11.2018 12:44

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

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

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

396

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Я думаю, что вам нужно здесь использовать requestAnimation, когда ваша кнопка останавливает или запускает запрос нового кадра:

  let started = false;

  let rotateCamera = () => {
      if (started) {
          requestAnimationFrame(rotateCamera);
      }

      const nav = viewer.navigation;
      const up = nav.getCameraUpVector();
      const axis = new THREE.Vector3(0, 0, 1);
      const speed = 10.0 * Math.PI / 180;
      const matrix = new THREE.Matrix4().makeRotationAxis(axis, speed * 0.1);

      let pos = nav.getPosition();
      pos.applyMatrix4(matrix);
      up.applyMatrix4(matrix);
      nav.setView(pos, new THREE.Vector3(0, 0, 0));
      nav.setCameraUpVector(up);
      var viewState = viewer.getState();
      // viewer.restoreState(viewState);

  };

  turnTableToolbarButton.onClick = function (e) {
      started = !started;
      if (started) rotateCamera()
  };

Проверьте мое репо расширений, чтобы увидеть полный код на основе вашего фрагмента и живой иллюстрации.

Я оставил ваш подход как есть, чтобы показать, что он работает, но, боюсь, он требует некоторой оптимизации. Я проведу некоторые исследования и обновлю свое репо позже, выбрав более оптимальный подход к тому, что вы делаете.

— 14.11.2018 21:30

Спасибо, я использовал приведенный выше код, и теперь модель отлично вращается.

— 15.11.2018 10:18

14.11.2018 21:24