Question

我正在尝试在 A-Frame场景内创建基于鼠标单击并拖动的指南针 ...但我面临的问题是基于鼠标光标移动;图像旋转。

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>

在aframe中创建指南针

1 个答案: