2017-09-27 1 views
0

J'essaie de définir des événements de souris sur obj. modèle en A-frame. J'ai remarqué que mon objet ne déclencherait aucun évènement souris (mouseenter, mouseleave, click ...). J'ai donc ajouté geometry="primitive: box; height: 50; width: 50; depth: 50" à l'objet et les événements ont commencé à fonctionner ... Mais je veux que l'objet déclenche des événements et non la boîte à l'intérieur.A-frame .obj modèle géométrie et événements

Questions:

Est-il possible de faire une géométrie complexe qui ressemble à l'objet? Est-ce que je fais quelque chose de mal et que mon objet devrait déclencher des événements de souris sans propriété de géométrie?

code:

<a-assets> 
     <a-asset-item id="heart-obj" src="Heart.obj"></a-asset-item> 
     <a-asset-item id="heart-mtl" src="Heart.mtl"></a-asset-item> 
</a-assets> 

<a-entity id="heart" 
    obj-model="obj: #heart-obj; mtl: #heart-mtl" 
    geometry="primitive: box; height: 50; width: 50; depth: 50" 
    scale="0.1 0.1 0.1" 
    position="0 1.6 -12" 
    event-set__enter="_event: mouseenter; _target: #heartText; visible: true" 
    event-set__leave="_event: mouseleave; _target: #heartText; visible: false"> 
    <a-text id="heartText" 
     value="This is a heart" 
     align="center" 
     color="#FFF" 
     visible="false" 
     scale="10 10 10" 
     position="-15 24 27" 
     geometry="primitive: plane; width: 2" 
     material="color: #333"> 
    </a-text> 
</a-entity> 

<a-camera> 
    <a-cursor id="cursor"></a-cursor> 
</a-camera> 

Importations

<script src="https://aframe.io/releases/0.7.0/aframe.min.js"></script> 
<script src="https://unpkg.com/[email protected]/dist/aframe-event-set-component.min.js"></script> 
+0

Il est probable que vous rencontriez le bug discuté ici: https://github.com/aframevr/aframe/issues/2980 –

+0

Ajout d'une boîte invisible entourant l'objet (pas à l'intérieur) n'est pas une solution de contournement terrible pendant ce temps. – ngokevin

Répondre

0

Merci pour la pointe @DonMcCurdy.

J'ai donc ajouté (from):

AFRAME.registerComponent('raycaster-refresh', { 
    init: function() { 
    var sceneEl = this.el.sceneEl; 
    sceneEl.addEventListener('object3dset', function() { 
     var raycasterEl = sceneEl.querySelector('[raycaster]'); 
     raycasterEl.components.raycaster.refreshObjects(); 
    }); 
    } 
}); 

<a-scene raycaster-refresh> 
... 
</a-scene> 

Les événements de souris fonctionnent même sans la boîte à l'intérieur de l'objet 3D.