在框架中创建指南针

Question

我正在尝试根据鼠标单击和拖动在 A 帧场景 中创建罗盘 ... 但问题是我这里面对的是基于鼠标光标的移动；图片旋转了。

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>

在框架中创建指南针

Creating a compass in aframe

javascript

jquery

webvr

aframe