如何通过移动或拖动鼠标来旋转 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>
注册一个新组件来控制拖动旋转怎么样？首先，您需要禁用
look-controlslook-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>是否可以修改 JavaScript 以实现像脚本中那样的旋转并添加两件事：
非常感谢