在框架中创建指南针

Question

我试图在框架场景内创建指南针基于鼠标单击和拖动...但我在这里面临的问题是基于鼠标光标移动;图像旋转。

function diff(x, y) { 
 
    var centerItem = $('#pointer'), 
 
     centerLoc = centerItem.offset(); 
 
    var dx = x - (centerLoc.left + (centerItem.width()/2)); 
 
    dy = y - (centerLoc.top + (centerItem.height()/2)); 
 
    return Math.atan2(dy, dx) * (180/Math.PI); 
 
} 
 

 
$('body').mousemove(function(e) { 
 
    var x = e.pageX; 
 
    var y = e.pageY; 
 
    var myAngle = diff(x, y); 
 
    var rotationValue = 'rotate(' + myAngle + 'deg)'; 
 

 
    $("#pointer").css({ 
 
    '-moz-transform': rotationValue, // FireFox 
 
    '-webkit-transform': rotationValue, // Chrome 
 
    '-o-transform': rotationValue, 
 
    '-ms-transform': rotationValue, 
 
    'transform': rotationValue 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<img class="compass" src="http://i.imgur.com/YahETIk.png" id="pointer" />

我该如何解决这个问题？提前致谢。

Answer 1

而不是鼠标移动，请使用相机旋转。

<script> 
    AFRAME.registerComponent('compass', { 
     init: function() { 
     this.pointer = document.getElementById('pointer'); 
     }, 

     tick: function() { 
     var yRotation = this.el.getAttribute('rotation').y; 
     this.pointer.style.transform = 'rotate(' + yRotation + 'deg)'; 
     } 
    }); 
    </script> 

    <img class="compass" src="http://i.imgur.com/YahETIk.png" id="pointer"/> 

    <a-scene> 
     <a-camera compass></a-camera> 
    </a-scene>