如何通过移动或拖动鼠标来旋转A-Frame中的框？ [英] How do I rotate a box in A-Frame by moving or dragging the mouse?
本文介绍了如何通过移动或拖动鼠标来旋转A-Frame中的框？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
如何通过移动或拖动鼠标来旋转A-Frame中的框？
How do I rotate a box in A-Frame by moving or dragging the mouse?
我尝试这样做：
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>
推荐答案
如何注册新组件来控制拖动旋转？首先，您需要禁用 look-controls ，因为 look-controls 也使用拖动操作。第二，将事件监听器附加到文档。
How about register a new component to control drag rotate? first, you need to disable look-controls,because look-controls also use the drag operation. second, attach event listeners to document.
<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>
这篇关于如何通过移动或拖动鼠标来旋转A-Frame中的框？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
