title: How do I rotate a 3d model in A-Frame by moving or dragging the mouse?
body: <p>Based on this <a href="https://stackoverflow.com/questions/42041517/how-do-i-rotate-a-box-in-a-frame-by-moving-or-dragging-the-mouse/42105892#42105892">How do I rotate a box in A-Frame by moving or dragging the mouse?</a></p>
  
  <p>how i can do it with a 3d model? i need rotate a 3d model/object in a view</p>
  
  <p>i have tried this code, but doesn't works</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
    &lt;title&gt;Rotation&lt;/title&gt;
    &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"&gt;&lt;/script&gt;
    &lt;script src="https://aframe.io/releases/0.4.0/aframe.min.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;script type="text/javascript"&gt;
      AFRAME.registerComponent('drag-rotate-component',{
        schema : { speed : {default:1}},
        init : function(){
          this.ifMouseDown = false;
          this.x_cord = 0;
          this.y_cord = 0;
          document.addEventListener('mousedown',this.OnDocumentMouseDown.bind(this));
          document.addEventListener('mouseup',this.OnDocumentMouseUp.bind(this));
          document.addEventListener('mousemove',this.OnDocumentMouseMove.bind(this));
        },
        OnDocumentMouseDown : function(event){
          this.ifMouseDown = true;
          this.x_cord = event.clientX;
          this.y_cord = event.clientY;
        },
        OnDocumentMouseUp : function(){
          this.ifMouseDown = false;
        },
        OnDocumentMouseMove : function(event)
        {
          if(this.ifMouseDown)
          {
            var temp_x = event.clientX-this.x_cord;
            var temp_y = event.clientY-this.y_cord;
            if(Math.abs(temp_y)&lt;Math.abs(temp_x))
            {
              this.el.object3D.rotateY(temp_x*this.data.speed/1000);
            }
            else
            {
              this.el.object3D.rotateX(temp_y*this.data.speed/1000);
            }
            this.x_cord = event.clientX;
            this.y_cord = event.clientY;
          }
        }
      });
    &lt;/script&gt;
    &lt;a-scene&gt;
     &lt;a-assets&gt;
        &lt;a-asset-item id="man" src="./assets/models/man/man.dae"&gt;&lt;/a-asset-item&gt;
     &lt;/a-assets&gt;
     &lt;a-collada-model src="#man" rotation="0 45 0"&gt;&lt;/a-model&gt;
     &lt;a-sky color="#ECECEC"&gt;&lt;/a-sky&gt;
     &lt;a-entity position="0 -0.5 1"&gt;
       &lt;a-camera look-controls="enabled:false"&gt;&lt;/a-camera&gt;
     &lt;/a-entity&gt;
    &lt;/a-scene&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Thanks in advance!</p>
  
  <p>Also have tried this, but not luck</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;title - Demo 3D Model&lt;/title&gt;
      &lt;meta name="description" content="Inlabs demo - 3D Model"&gt;
          &lt;script src="../../../dist/aframe-master.js"&gt;&lt;/script&gt;
  
    &lt;/head&gt;
    &lt;body&gt;
      &lt;a-scene&gt;
        &lt;a-assets&gt;
          &lt;a-asset-item id="man" src="./assets/models/man/man.dae"&gt;&lt;/a-asset-item&gt;
        &lt;/a-assets&gt;
  
        &lt;a-collada-model src="#man" rotation="0 45 0"&gt;&lt;/a-model&gt;
        &lt;a-sky color="#ECECEC"&gt;&lt;/a-sky&gt;
        &lt;a-entity position="0 -0.5 1"&gt;
          &lt;a-camera drag-rotate-component look-controls="enabled:false"&gt;&lt;/a-camera&gt;
        &lt;/a-entity&gt;
      &lt;/a-scene&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>