title: How do I rotate a box in A-Frame by moving or dragging the mouse?
body: <p>How do I rotate a box in A-Frame by moving or dragging the mouse? </p>
  
  <p>I trying to do something like this: 
  <a href="http://codepen.io/jordizle/pen/haIdo/" rel="nofollow noreferrer">http://codepen.io/jordizle/pen/haIdo/</a>
  <a href="https://jsfiddle.net/MadLittleMods/n6u6asza/" rel="nofollow noreferrer">https://jsfiddle.net/MadLittleMods/n6u6asza/</a></p>
  
  <p>Here is my code.</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;a-scene&gt;
      &lt;a-assets&gt;
        &lt;a-image id="a" src="Background.jpg"&gt;
      &lt;/a-assets&gt;
      &lt;a-box id="b1" src="#a" position="2 2 -3"&gt;&lt;/a-box&gt;
      &lt;a-box id="b2" src="#a" position="-2 2 -3"&gt;&lt;/a-box&gt;
      &lt;a-camera position="0 0 0"&gt;
        &lt;a-cursor&gt;&lt;/a-cursor&gt;
      &lt;/a-camera&gt;
    &lt;/a-scene&gt;
    &lt;script type="text/javascript"&gt;
      var box=document.querySelector('a-box');
      var isDragging=false;
      box.addEventListener('mousedown', function() {
        isDragging=true;
      });
      box.addEventListener('mousemove',function(event) {
        if(isDragging)
        {
            box.setAttribute('rotation', {x:event.clientX , y:event.clientY, z:0});
        }
      });
      box.addEventListener('mouseleave', function() {
        if(isDraggging)
        {
          isDragging=false;
        }
      });
    &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>