如何通过移动或拖动鼠标来旋转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>
字符串
1条答案
按热度按时间5gfr0r5j1#
注册一个新的组件来控制拖动旋转怎么样?首先,你需要禁用
look-controls
,因为look-controls
也使用拖动操作。字符串