Gltf Cursor-Listener Klick-Ereignis in A-Frame

Question

Ich bin nicht in der Lage herauszufinden, warum Cursor-Listener funktioniert für alle Entitäten mit Ausnahme meiner Gltf-Modell.

Hier ist mein html

<div id="myEmbeddedScene"> 
    <a-scene embedded=""> 
    <a-assets> 
      <a-asset-item id="ducks" src="../images/test.glb"></a-asset-item> 
    </a-assets> 

    <a-box cursor-listener color="#CCC" width="3" depth="3" height="0.1" position="0 0 -2"></a-box> 

    <a-entity cursor-listener id="duck" gltf-model="#ducks" position="0 0.1 -2" rotation="0 -90 0"></a-entity> 

    <a-camera> 
     <a-cursor></a-cursor> 
    </a-camera> 

    </a-scene> 
</div> 

und hier geht die Cursor-Listener-Komponente aus einem Rahmen

AFRAME.registerComponent('cursor-listener', { 
    init: function() { 
      this.el.addEventListener('click', function (evt) { 
      console.log('I was clicked');    
     }); 
    } 
}); 

Das Konsolenprotokoll für die Box Einheit, aber nicht für das gltf Modell gerade fein auftritt . Bitte könnte jemand ihren Rat anbieten?

Answer 1

Sie haben die issue described here aufgerufen: Nach dem Laden eines Modells muss der zum Auffinden von Klicks verwendete Raycaster aktualisiert werden, damit er das Modell kennt.

Wir haben eine more robust solution on the way für A-Frame 0.8.0, aber in der Zwischenzeit können Sie das Problem mit so etwas wie dies funktionieren:

AFRAME.registerComponent('raycaster-autorefresh', { 
    init: function() { 
    var el = this.el; 
    this.el.addEventListener('model-loaded', function() { 
     var cursorEl = el.querySelector('[raycaster]'); 
     cursorEl.components.raycaster.refreshObjects(); 
    }); 
    } 
}); 

Sie dann die raycaster-autorefresh in die Szene Element benötigen würde hinzufügen . Hier ist ein Codepen showing the solution.