How do I rotate a box in A-Frame by moving or dragging the mouse?
I trying to do something like this:
http://codepen.io/jordizle/pen/haIdo/
https://jsfiddle.net/MadLittleMods/n6u6asza/
Here is my code.
<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>
See Question&Answers more detail:
os 与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
