Aフレームコンポーネント間の非同期のやりとり

Question

レーザーオブジェクトと衝突可能なオブジェクトの間に交差点がある場合に、現在オブジェクトを生成しようとしています。私は衝突を検出するためにレイキャスターを使用しています。

オブジェクトを生成するには、衝突が発生している場合のみ、またユーザーがトリガーボタンを押した場合にのみ、オブジェクトを生成したいと思います。 イベントリスナーが押されたときにグローバル変数pressedを作成することを考えていましたが、raycaster-intersectionイベントリスナーでは、この変数がtrueに設定されている場合にのみオブジェクトが生成されます。

const pressed = false 

AFRAME.registerComponent('laser', { 
    init: function() { 
    const laser = this.el.sceneEl.querySelector('#laser'); 
    laser.addEventListener('raycaster-intersection', function(event) { 
     console.log('raycaster-intersection', event.detail.intersections[0].point) 
     if (pressed) { 
     console.log('spawn') 
     } 
    }); 
    } 
}) 

AFRAME.registerComponent('spawner', { 
    init: function() { 
    const blockHand = this.el.sceneEl.querySelector('#blockHand'); 
    blockHand.addEventListener('triggerdown', function(event) { 
     pressed = true 
    }); 
    blockHand.addEventListener('triggerup', function(event) { 
     pressed = false 
    }); 
    } 
}) 

グローバル変数は使用したくないのですが、この場合はどのようにしてこの問題に対処できないのでしょうか。

提案がありますか？

ありがとうございます！

Answer 1

いくつかの解決策：

1. は状態を更新するためにthis.el.addState('pressed')とthis.el.removeState('pressed')を行い、それをチェックするためにthis.el.is('pressed')を使用しています。

2. コンポーネントをまとめて組み合わせて、this.pressedとして保存します。

3. A-フレームマスタービルドは、すぐに0.6.0ので、あなたがしなければならないすべてではなく、両方のraycaster交差点をリッスンし、ダウントリガするよりclickを待ち受けているあなたはhttps://aframe.io/docs/master/components/laser-controls.htmlを使用することができ、レーザー・コントロール成分を有しています。そしてあなたはすべてのコントローラのサポートを無料で手に入れます。