(A-Frame) 如何阻止对象与光标相交？

Question

我用a-frame做web-vr。我很好用，但我有一些情况不知道如何实施。首先，我放置了一个带光标的相机，并将光线投射器设置为与对象“.trigger”相交。

<a-entity camera="" look-controls="" position="" rotation="" scale="" visible=""> <a-entity cursor="fuse: true; fuseTimeout: 1500" position="0 0 -1" geometry="primitive: ring; radiusInner: 0.02; radiusOuter: 0.03" material="color: cyan; shader: flat" raycaster="objects: .trigger" rotation="" scale="" visible=""> <a-animation begin="click" easing="ease-in" attribute="scale" fill="forwards" from="0.1 0.1 0.1" to="1 1 1" dur="150"></a-animation> <a-animation begin="cursor-fusing" easing="ease-in" attribute="scale" fill="backwards" from="1 1 1" to="0.1 0.1 0.1" dur="1500"></a-animation> </a-entity> </a-entity>

并使用 class "trigger" 创建一个实体。

<a-entity class="tigger" id="clip01" clip01="on: click; conditionId: ShowClipTrigger" data-is-trigger="true" geometry="primitive: plane; width: 2; height: 3" material=" src: #clip01-pic; opacity: 0.99;" position="-5.913 -3.544 4.675" rotation="-82.048 122.222 11.345" scale="" visible="" animation__move="" animation__rotate=""></a-entity>

“.trigger”对象会在收到点击事件后触发一些动作。我的问题是如何在点击触发器后禁用相交。我尝试在单击 evnet 后从对象中删除 class "trigger"，但它仍然可以与光标相交。

我搜索了 a-frame 文档raycaster，但没有任何线索。

Answer 1

移除白名单后class，需要刷新raycaster：

var raycasterEl = AFRAME.scenes[0].querySelector('[raycaster]');
raycasterEl.components.raycaster.refreshObjects();

您也可以通过在事件侦听器中进行简单切换来实现此目的：

 var switch=true;
 el.addEventListener("click", function(evt) {
    if(switch){
      //doStuff
      switch = false;
    }
 });

或者像我一样完全移除监听器here:

//listener
this.doStuff = this.doStuff.bind(this);
el.addEventListener("click", this.doStuff());
//function
doStuff: function(){
this.el.removeEventListener("click",this.doStuff);
}

(A-Frame) 如何阻止对象与光标相交？

(A-Frame) How to stop a object intersect with cursor?

aframe