如何通過移動或拖動鼠標來旋轉A框中的框？

如何通過移動或拖動鼠標來旋轉A框中的框？如何通過移動或拖動鼠標來旋轉A框中的框？

我試圖做這樣的事情： http://codepen.io/jordizle/pen/haIdo/ https://jsfiddle.net/MadLittleMods/n6u6asza/

這裏是我的代碼。

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

來源

2017-02-04 Suraj Sudhakar

如何註冊一個新組件來控制拖動旋轉？首先，您需要禁用look-controls，因爲look-controls也使用拖動操作。第二，將事件監聽器附加到文檔。

<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> 
 
<script type="text/javascript"> 
 
    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)<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; 
 
     } 
 
     } 
 
    }); 
 
    </script> 
 
    <a-scene> 
 
    <a-box id="b1" color="green" position="2 2 -3" drag-rotate-component></a-box> 
 
    <a-box id="b2" color="blue" position="-2 2 -3"></a-box> 
 
    <a-camera position="0 0 0" look-controls="enabled:false"> 
 
     <a-cursor></a-cursor> 
 
    </a-camera> 
 
    </a-scene> 
 
    
 
</body> 
 
</html>

來源

2017-02-08 06:10:32

非常感謝！完美的作品！ –

如何通過移動或拖動鼠標來旋轉A框中的框？

回答

相關問題