Javascript 如何通过移动或拖动鼠标在a帧中旋转长方体？_Javascript_Jquery_Aframe_Webvr

Javascript 如何通过移动或拖动鼠标在a帧中旋转长方体？

javascript jquery aframe

Javascript 如何通过移动或拖动鼠标在a帧中旋转长方体？,javascript,jquery,aframe,webvr,Javascript,Jquery,Aframe,Webvr,如何通过移动或拖动鼠标在a帧中旋转长方体我正在尝试这样做：这是我的密码 <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

如何通过移动或拖动鼠标在a帧中旋转长方体

我正在尝试这样做：

这是我的密码

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


轮换
var-box=document.querySelector（'a-box'）；
var IsDraging=错误；
box.addEventListener（'mousedown'，function（）{
IsDraging=true；
});
box.addEventListener（'mousemove'，函数（事件）{
if（ISDRAGING）
{
setAttribute（'rotation'，{x:event.clientX，y:event.clientY，z:0}）；
}
});
box.addEventListener（'mouseleave'，function（）{
if（isdragging）
{
IsDraging=错误；
}
});

注册一个新组件来控制拖动旋转怎么样？首先，您需要禁用

外观控件

，因为

外观控件

也使用拖动操作。其次，将事件侦听器附加到文档


轮换
AFRAME.registerComponent（'drag-rotate-component'{
架构：{speed:{default:1}}，
init:function（）{
this.ifMouseDown=false；
此.x_线=0；
此.y_线=0；
document.addEventListener（'mousedown'，this.OnDocumentMouseDown.bind（this））；
document.addEventListener（'mouseup'，this.OnDocumentMouseUp.bind（this））；
document.addEventListener（'mousemove'，this.OnDocumentMouseMove.bind（this））；
},
OnDocumentMouseDown:函数（事件）{
this.ifMouseDown=true；
this.x_cord=event.clientX；
this.y_cord=event.clientY；
},
OnDocumentMouseUp:function（）{
this.ifMouseDown=false；
},
OnDocumentMouseMove:函数（事件）
{
if（this.ifMouseDown）
{
var temp_x=event.clientX-this.x_线缆；
var temp_y=event.clientY-this.y_线；
非常感谢！非常好用！