Rotate camera around model in Autodesk Forge










0















I have created an extension that rotates the camera around a Revit model that was uploaded in a bucket made, but how do I make the camera constantly rotate around the model after the button in the toolbar has been clicked on. In addition, how do I click the same button again to stop the rotation? The code below is what I used to rotate the camera once the button is clicked on.



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);
;









share|improve this question




























    0















    I have created an extension that rotates the camera around a Revit model that was uploaded in a bucket made, but how do I make the camera constantly rotate around the model after the button in the toolbar has been clicked on. In addition, how do I click the same button again to stop the rotation? The code below is what I used to rotate the camera once the button is clicked on.



    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);
    ;









    share|improve this question


























      0












      0








      0








      I have created an extension that rotates the camera around a Revit model that was uploaded in a bucket made, but how do I make the camera constantly rotate around the model after the button in the toolbar has been clicked on. In addition, how do I click the same button again to stop the rotation? The code below is what I used to rotate the camera once the button is clicked on.



      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);
      ;









      share|improve this question
















      I have created an extension that rotates the camera around a Revit model that was uploaded in a bucket made, but how do I make the camera constantly rotate around the model after the button in the toolbar has been clicked on. In addition, how do I click the same button again to stop the rotation? The code below is what I used to rotate the camera once the button is clicked on.



      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






      share|improve this question















      share|improve this question













      share|improve this question




      share|improve this question








      edited Nov 23 '18 at 10:10







      Nathan Hurley

















      asked Nov 14 '18 at 11:44









      Nathan HurleyNathan Hurley

      476




      476






















          1 Answer
          1






          active

          oldest

          votes


















          0














          I think what you would need here is use of requestAnimation, with your button stopping or starting the request for the new frame:



           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()
          ;




          Check my repo of extensions for full code based on your snippet and a live illustration.






          share|improve this answer























          • I left your approach as is to show that it works, but I am afraid it needs some optimizations. I will do some investigations and update my repo later with a more optimal approach of what you are doing.

            – denis-grigor
            Nov 14 '18 at 20:30












          • Thanks, I used the code provided above and the model rotates perfectly now.

            – Nathan Hurley
            Nov 15 '18 at 9:18










          Your Answer






          StackExchange.ifUsing("editor", function ()
          StackExchange.using("externalEditor", function ()
          StackExchange.using("snippets", function ()
          StackExchange.snippets.init();
          );
          );
          , "code-snippets");

          StackExchange.ready(function()
          var channelOptions =
          tags: "".split(" "),
          id: "1"
          ;
          initTagRenderer("".split(" "), "".split(" "), channelOptions);

          StackExchange.using("externalEditor", function()
          // Have to fire editor after snippets, if snippets enabled
          if (StackExchange.settings.snippets.snippetsEnabled)
          StackExchange.using("snippets", function()
          createEditor();
          );

          else
          createEditor();

          );

          function createEditor()
          StackExchange.prepareEditor(
          heartbeatType: 'answer',
          autoActivateHeartbeat: false,
          convertImagesToLinks: true,
          noModals: true,
          showLowRepImageUploadWarning: true,
          reputationToPostImages: 10,
          bindNavPrevention: true,
          postfix: "",
          imageUploader:
          brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
          contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
          allowUrls: true
          ,
          onDemand: true,
          discardSelector: ".discard-answer"
          ,immediatelyShowMarkdownHelp:true
          );



          );













          draft saved

          draft discarded


















          StackExchange.ready(
          function ()
          StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53299467%2frotate-camera-around-model-in-autodesk-forge%23new-answer', 'question_page');

          );

          Post as a guest















          Required, but never shown

























          1 Answer
          1






          active

          oldest

          votes








          1 Answer
          1






          active

          oldest

          votes









          active

          oldest

          votes






          active

          oldest

          votes









          0














          I think what you would need here is use of requestAnimation, with your button stopping or starting the request for the new frame:



           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()
          ;




          Check my repo of extensions for full code based on your snippet and a live illustration.






          share|improve this answer























          • I left your approach as is to show that it works, but I am afraid it needs some optimizations. I will do some investigations and update my repo later with a more optimal approach of what you are doing.

            – denis-grigor
            Nov 14 '18 at 20:30












          • Thanks, I used the code provided above and the model rotates perfectly now.

            – Nathan Hurley
            Nov 15 '18 at 9:18















          0














          I think what you would need here is use of requestAnimation, with your button stopping or starting the request for the new frame:



           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()
          ;




          Check my repo of extensions for full code based on your snippet and a live illustration.






          share|improve this answer























          • I left your approach as is to show that it works, but I am afraid it needs some optimizations. I will do some investigations and update my repo later with a more optimal approach of what you are doing.

            – denis-grigor
            Nov 14 '18 at 20:30












          • Thanks, I used the code provided above and the model rotates perfectly now.

            – Nathan Hurley
            Nov 15 '18 at 9:18













          0












          0








          0







          I think what you would need here is use of requestAnimation, with your button stopping or starting the request for the new frame:



           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()
          ;




          Check my repo of extensions for full code based on your snippet and a live illustration.






          share|improve this answer













          I think what you would need here is use of requestAnimation, with your button stopping or starting the request for the new frame:



           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()
          ;




          Check my repo of extensions for full code based on your snippet and a live illustration.







          share|improve this answer












          share|improve this answer



          share|improve this answer










          answered Nov 14 '18 at 20:24









          denis-grigordenis-grigor

          23126




          23126












          • I left your approach as is to show that it works, but I am afraid it needs some optimizations. I will do some investigations and update my repo later with a more optimal approach of what you are doing.

            – denis-grigor
            Nov 14 '18 at 20:30












          • Thanks, I used the code provided above and the model rotates perfectly now.

            – Nathan Hurley
            Nov 15 '18 at 9:18

















          • I left your approach as is to show that it works, but I am afraid it needs some optimizations. I will do some investigations and update my repo later with a more optimal approach of what you are doing.

            – denis-grigor
            Nov 14 '18 at 20:30












          • Thanks, I used the code provided above and the model rotates perfectly now.

            – Nathan Hurley
            Nov 15 '18 at 9:18
















          I left your approach as is to show that it works, but I am afraid it needs some optimizations. I will do some investigations and update my repo later with a more optimal approach of what you are doing.

          – denis-grigor
          Nov 14 '18 at 20:30






          I left your approach as is to show that it works, but I am afraid it needs some optimizations. I will do some investigations and update my repo later with a more optimal approach of what you are doing.

          – denis-grigor
          Nov 14 '18 at 20:30














          Thanks, I used the code provided above and the model rotates perfectly now.

          – Nathan Hurley
          Nov 15 '18 at 9:18





          Thanks, I used the code provided above and the model rotates perfectly now.

          – Nathan Hurley
          Nov 15 '18 at 9:18



















          draft saved

          draft discarded
















































          Thanks for contributing an answer to Stack Overflow!


          • Please be sure to answer the question. Provide details and share your research!

          But avoid


          • Asking for help, clarification, or responding to other answers.

          • Making statements based on opinion; back them up with references or personal experience.

          To learn more, see our tips on writing great answers.




          draft saved


          draft discarded














          StackExchange.ready(
          function ()
          StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53299467%2frotate-camera-around-model-in-autodesk-forge%23new-answer', 'question_page');

          );

          Post as a guest















          Required, but never shown





















































          Required, but never shown














          Required, but never shown












          Required, but never shown







          Required, but never shown

































          Required, but never shown














          Required, but never shown












          Required, but never shown







          Required, but never shown







          這個網誌中的熱門文章

          How to read a connectionString WITH PROVIDER in .NET Core?

          Node.js Script on GitHub Pages or Amazon S3

          Museum of Modern and Contemporary Art of Trento and Rovereto