aframe
Raycasters (composant)
Recherche…
Introduction
Le composant raycaster effectue des tests d'intersection générale avec un raycaster. Raycasting est la méthode qui permet d’étendre une ligne d’une origine à une autre et de vérifier si cette ligne intersecte d’autres entités. Le composant raycaster est un wrapper sur le raycaster three.js. Il vérifie les intersections à un certain intervalle par rapport à une liste d'objets et émet des événements sur l'entité lorsqu'il détecte des intersections ou efface des intersections (par exemple, lorsque le raycaster n'est plus
Paramètres
| Paramètre | Détails |
|---|---|
| loin | Distance maximale sous laquelle les entités résultantes sont renvoyées. Ne peut pas être plus bas que près. |
| intervalle | Nombre de millisecondes à attendre entre chaque test d'intersection. Un nombre inférieur est préférable pour des mises à jour plus rapides. Un nombre plus élevé est préférable pour la performance. |
| près | Distance minimale sur laquelle les entités de remise en forme sont renvoyées. Ne peut être inférieur à 0. |
| objets | Sélecteur de requête pour choisir les objets à tester pour l'intersection. S'il n'est pas spécifié, toutes les entités seront testées. |
| récursif | Vérifie tous les enfants des objets s'ils sont définis. Else vérifie uniquement les intersections avec des objets racine. |
Remarques
Événements
| prénom | Détails |
|---|---|
raycaster-intersected | Emis sur l'entité intersectée. L'entité est en intersection avec un raycaster. Le détail de l'événement contiendra el, l'entité raycasting et l'intersection, un objet contenant des données détaillées sur l'intersection. |
raycaster-intersected-cleared | Emis sur l'entité intersectée. L'entité ne se recoupe plus avec un raycaster. Le détail de l'événement contiendra el, l'entité Raycasting. |
raycaster-intersection | Emis sur l'entité raycasting. Raycaster est en intersection avec une ou plusieurs entités. Les détails de l'événement contiendront des els, un tableau avec les entités intersectées et des intersections, un tableau d'objets contenant des données détaillées sur les intersections. |
raycaster-intersection-cleared | Emis sur l'entité raycasting. Raycaster ne se recoupe plus avec une entité. Le détail de l'événement contiendra el, l'entité précédemment intersectée. |
Membre
| Membre | La description |
|---|---|
intersectedEls | Entités qui intersectent actuellement le raycaster. |
objects | three.js objets à tester pour les intersections. Sera scene.children si la propriété object n'est pas spécifiée. |
raycaster | objet trois.js raycaster. |
Methode
| Méthode | La description |
|---|---|
refreshObjects | Actualise la liste des objets basés sur la propriété objects pour tester l'intersection. |
Définition de l'origine et de la direction du Raycaster
Le raycaster a une origine, où son rayon commence et une direction, où le rayon va.
L'origine du raycaster est à la position de l'entité raycaster. Nous pouvons changer l’origine du raycaster en définissant le composant position de l’entité raycaster (ou des entités parentes de l’entité raycaster).
La direction du raycaster est en "avant" de l'entité raycaster (c.-à-d. 0 0 -1, sur l'axe Z négatif). Nous pouvons changer la direction du raycaster en définissant le composant de rotation de l’entité raycaster (ou des entités parentes de l’entité raycaster).
Par exemple, ici, vous appliquez un raycaster sur la longueur d'une balle pivotée:
<!-- Bullet, rotated to be parallel with the ground. -->
<a-entity id="bullet" geometry="primitive: cylinder; height: 0.1" rotation="-90 0 0">
<!-- Raycaster, targets enemies, made to be as long as the bullet, positioned to the start of the bullet, rotated to align with the bullet. -->
<a-entity raycaster="objects: .enemies; far: 0.1" position="0 -0.5 0" rotation="90 0 0"></a-entity>
</a-entity>
Entités de liste blanche pour tester l'intersection
Nous ne voulons généralement pas tester tout ce qui se trouve dans la scène pour les intersections (par exemple, pour les collisions ou les clics). Les intersections sélectives sont bonnes pour la performance afin de limiter le nombre d'entités à tester pour l'intersection, car le test d'intersection est une opération qui sera exécutée plus de 60 fois par seconde.
Pour sélectionner ou sélectionner les entités à tester pour l'intersection, nous pouvons utiliser la propriété objects. Si cette propriété n'est pas définie, le raycaster testera chaque objet de la scène pour l'intersection. Les objets prennent une valeur de sélecteur de requête:
<a-entity raycaster="objects: .clickable" cursor></a-entity>
<a-entity class="clickable" geometry="primitive: box" position="1 0 0"></a-entity>
<a-entity class="not-clickable" geometry="primitive: sphere" position="-1 0 0"></a-entity>