Como girar uma caixa no A-Frame movendo ou arrastando o mouse?

Question

Feb 04, 2017, 03:28 PM

Como girar uma caixa no A-Frame movendo ou arrastando o mouse?

Eu estou tentando fazer algo assim:http://codepen.io/jordizle/pen/haIdo/ https://jsfiddle.net/MadLittleMods/n6u6asza/

Aqui está o meu código.

<html>
<head>
  <title>Rotation</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://aframe.io/releases/0.4.0/aframe.min.js"></script>
</head>
<body>
  <a-scene>
    <a-assets>
      <a-image id="a" src="Background.jpg">
    </a-assets>
    <a-box id="b1" src="#a" position="2 2 -3"></a-box>
    <a-box id="b2" src="#a" position="-2 2 -3"></a-box>
    <a-camera position="0 0 0">
      <a-cursor></a-cursor>
    </a-camera>
  </a-scene>
  <script type="text/javascript">
    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;
      }
    });
  </script>
</body>
</html>