aframe
Raycasters (component)
Zoeken…
Invoering
De raycaster-component voert algemene kruistests uit met een raycaster. Raycasting is de methode om een lijn van een oorsprong naar een richting te verlengen en te controleren of die lijn andere ingangen snijdt. De raycaster-component is een wikkelaar bovenop de three.js raycaster. Het controleert op kruispunten met een bepaald interval tegen een lijst met objecten en zal gebeurtenissen uitzenden op de entiteit wanneer het kruispunten detecteert of kruispunten wist (dwz wanneer de raycaster niet langer
parameters
| Parameter | Details |
|---|---|
| ver | Maximale afstand waaronder resulterende entiteiten worden geretourneerd. Kan niet lager zijn dan in de buurt. |
| interval | Aantal milliseconden om te wachten tussen elke kruistest. Een lager nummer is beter voor snellere updates. Een hoger nummer is beter voor de prestaties. |
| in de buurt | Minimale afstand waarover heropbouwende entiteiten worden geretourneerd. Kan niet lager zijn dan 0. |
| voorwerpen | Query-selector om te kiezen welke objecten moeten worden getest op snijpunt. Indien niet gespecificeerd, worden alle entiteiten getest. |
| recursieve | Controleert alle kinderen op objecten indien ingesteld. Anders controleert alleen kruispunten met rootobjecten. |
Opmerkingen
Evenementen
| Naam | Details |
|---|---|
raycaster-intersected | Uitgezonden op de kruisende entiteit. Entiteit kruist met een raycaster. Evenementsdetail zal el, de raycasting-entiteit en het kruispunt bevatten, een object met gedetailleerde gegevens over het kruispunt. |
raycaster-intersected-cleared | Uitgezonden op de kruisende entiteit. Entiteit kruist niet langer met een raycaster. Evenementgegevens bevatten el, de raycasting-entiteit. |
raycaster-intersection | Uitgezonden op de raycasting-entiteit. Raycaster kruist een of meer entiteiten. Evenementdetails bevatten els, een array met de doorsneden entiteiten en kruispunten, een array met objecten met gedetailleerde gegevens over de kruispunten. |
raycaster-intersection-cleared | Uitgezonden op de raycasting-entiteit. Raycaster kruist niet langer een entiteit. Evenementgegevens bevatten el, de voorheen doorsneden entiteit. |
Lid
| Lid | Beschrijving |
|---|---|
intersectedEls | Entiteiten die momenteel de raycaster kruisen. |
objects | three.js objecten om te testen op kruispunten. Wordt scene.children als er geen eigenschap property is opgegeven. |
raycaster | three.js raycaster-object. |
Methode
| Methode | Beschrijving |
|---|---|
refreshObjects | Vernieuwt de lijst met objecten op basis van de eigenschap objects om te testen op snijpunt. |
De oorsprong en richting van de Raycaster instellen
De raycaster heeft een oorsprong, waar zijn straal begint, en een richting, waar de straal gaat.
De oorsprong van de raycaster ligt op de positie van de raycaster-entiteit. We kunnen de oorsprong van de raycaster wijzigen door de positiecomponent van de raycaster-entiteit (of ouderentiteiten van de raycaster-entiteit) in te stellen.
De richting van de raycaster bevindt zich "vooraan" van de raycaster-entiteit (dwz 0 0 -1, op de negatieve Z-as). We kunnen de richting van de raycaster wijzigen door de rotatiecomponent van de raycaster-entiteit (of ouderentiteiten van de raycaster-entiteit) in te stellen.
Hier is bijvoorbeeld het toepassen van een raycaster over de lengte van een geroteerde kogel:
<!-- 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-entiteiten om te testen op kruispunt
We willen meestal niet alles in de scène testen op kruispunten (bijvoorbeeld voor botsingen of klikken). Selectieve kruispunten zijn goed voor de prestaties om het aantal entiteiten te beperken dat op kruising moet worden getest, aangezien kruistests een bewerking zijn die meer dan 60 keer per seconde wordt uitgevoerd.
Om de entiteiten die we willen testen op snijpunt te selecteren of te kiezen, kunnen we de eigenschap objects gebruiken. Als deze eigenschap niet is gedefinieerd, test de raycaster elk object in de scène op kruising. objecten heeft een query-selectorwaarde nodig:
<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>