Question

我需要知道，如何使用pre，home和next按钮创建导航栏。

条形应位于光标下方并水平跟随。这样当你往下看时就可以点击按钮。

我已经有3个按钮，他们移动光标，但现在它们只能水平移动而不是垂直移动。

<a-assets>

<a-mixin id="pre"  geometry="primitive: circle; radius: 0.1" material="color:blue; opacity:0.2"></a-mixin>
<a-mixin id="home" geometry="primitive: circle; radius: 0.1" material="color:green; opacity:0.2"></a-mixin>
<a-mixin id="next" geometry="primitive: circle; radius: 0.1" material="color:#fe0000; opacity:0.2"></a-mixin>

</a-assets>

<a-entity camera look-controls>
<a-cursor ></a-cursor> 
<a-entity mixin="pre" position="-0.2 -0.5 -2"></a-entity>
<a-entity mixin="home" position="0.05 -0.5 -2"></a-entity>
<a-entity mixin="next" position="0.3 -0.5 -2"></a-entity>
</a-entity>

Answer 1

当你将实体放在光标内时，它会像光标一样移动，除非你让脚本在所需的位置阻止它。
但是在我看来，你应该创建一个由按钮组成的实体：

<a-entity id="button_wrapper" position="0 0 -3" camera-check>
    <a-entity mixin="pre" position="-0.2 -0.5 -2"></a-entity>
    <a-entity mixin="home" position="0.05 -0.5 -2"></a-entity>
    <a-entity mixin="next" position="0.3 -0.5 -2"></a-entity>
</a-entity>
<a-entity id = "camera" camera look-controls>
    <a-cursor >
    </a-cursor>
</a-entity>

通过这种方式，您可以创建一个脚本，使用相机移动实体，或者在相机更改时移动对象，或者在tick（）上移动它：

  AFRAME.registerComponent('camera-check', {
  init: function () {
     var rotation;
     camera = document.querySelector('#camera');
     camera.addEventListener('componentchanged', function(evt) {
         if (evt.detail.name === 'rotation') {
         // here You have your new rotation reference in evt.detail.newData
         // and Your old rotation reference in evt.detail.oldData

         this.el.setAttribute("rotation","0 "+evt.detail.newData.y+" 0");
         }
     });
  },
  tick: function(){
    // this.el.setAttribute("rotation","0 "+document.querySelector('a-box').getAttribute("rotation").y)+" 0");
  }
});

工作小提琴here。

一个框架导航栏，只移动水平

1 个答案: