a-frame導航欄，只移動horizo​​nal

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> 

有了這種方式，你可以創建一個腳本移動實體與相機或者移動的物體時，相機的變化，或移動它打勾（）：

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。