aframe
Raycasters (componente)
Ricerca…
introduzione
Il componente raycaster esegue test di intersezione generale con un raycaster. Raycasting è il metodo per estendere una linea da un'origine verso una direzione e verificare se quella linea si interseca con altre entrate. Il componente raycaster è un wrapper in cima al raycaster three.js. Controlla le intersezioni a un certo intervallo rispetto a un elenco di oggetti e emette eventi sull'entità quando rileva intersezioni o cancellazioni di intersezioni (cioè, quando il raycaster non è più
Parametri
| Parametro | Dettagli |
|---|---|
| lontano | Distanza massima in cui vengono restituite le entità risultanti. Non può essere inferiore quindi vicino. |
| intervallo | Numero di millisecondi da attendere tra ogni test di intersezione. Un numero inferiore è migliore per gli aggiornamenti più veloci. Il numero più alto è migliore per le prestazioni. |
| vicino | Distanza minima su cui vengono restituite le entità di ripubblicazione. Non può essere inferiore a 0. |
| oggetti | Selettore di query per scegliere quali oggetti testare per l'intersezione. Se non specificato, tutte le entità saranno testate. |
| ricorsivo | Controlla tutti i figli di oggetti se impostati. Altrimenti controlla solo le intersezioni con gli oggetti radice. |
Osservazioni
eventi
| Nome | Dettagli |
|---|---|
raycaster-intersected | Emesso sull'entità intersecata. L'entità si interseca con un radiotrasmettitore. Il dettaglio dell'evento conterrà el, l'entità raycasting e l'intersezione, un oggetto contenente dati dettagliati sull'intersezione. |
raycaster-intersected-cleared | Emesso sull'entità intersecata. L'entità non si interseca più con un radiotrasmettitore. Il dettaglio dell'evento conterrà el, l'entità raycasting. |
raycaster-intersection | Emesso sull'entità raycasting. Raycaster si interseca con una o più entità. Il dettaglio dell'evento conterrà els, una matrice con le entità intersecate e le intersezioni, una serie di oggetti contenenti dati dettagliati sulle intersezioni. |
raycaster-intersection-cleared | Emesso sull'entità raycasting. Raycaster non si interseca più con un'entità. Il dettaglio dell'evento conterrà el, l'entità precedentemente intersecata. |
Membro
| Membro | Descrizione |
|---|---|
intersectedEls | Entità che attualmente intersecano il raycaster. |
objects | oggetti three.js per testare le intersezioni. Sarà scena.children se non è specificata la proprietà degli oggetti. |
raycaster | oggetto raycaster three.js. |
Methode
| Metodo | Descrizione |
|---|---|
refreshObjects | Aggiorna l'elenco di oggetti in base alla proprietà dell'oggetto per verificare l'intersezione. |
Impostazione dell'origine e della direzione del Raycaster
Il raycaster ha un'origine, dove inizia il suo raggio e una direzione, dove va il raggio.
L'origine del raycaster è nella posizione dell'entità del raycaster. Possiamo cambiare l'origine del raycaster impostando il componente di posizione dell'entità raycaster (o entità padre dell'entità raycaster).
La direzione del raycaster è in "fronte" dell'entità raycaster (cioè 0 0 -1, sull'asse Z negativo). Possiamo cambiare la direzione del raycaster impostando il componente di rotazione dell'entità raycaster (o entità padre dell'entità raycaster).
Ad esempio, qui si applica un raycaster lungo la lunghezza di un proiettile ruotato:
<!-- 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>
Whitelisting Entities to Test for Intersection
Di solito non vogliamo testare tutto nella scena per le intersezioni (ad esempio, per collisioni o per clic). Le intersezioni selettive sono buone per le prestazioni per limitare il numero di entità da testare per l'intersezione poiché il test di intersezione è un'operazione che verrà eseguita oltre 60 volte al secondo.
Per selezionare o selezionare le entità che vogliamo testare per l'intersezione, possiamo usare la proprietà objects. Se questa proprietà non è definita, il raycaster testerà tutti gli oggetti nella scena per l'intersezione. oggetti prende un valore di selettore di query:
<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>