（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>

并创建一个具有“触发器”类的实体。

<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 后从对象中删除类“触发器”，但它仍然可以与光标相交。

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

Answer 1

移除白名单类后，需要刷新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);
}