aframe
Raycasters (komponent)
Sök…
Introduktion
Raycaster-komponenten gör allmän skärningstest med en raycaster. Raycasting är metoden för att utöka en linje från ett ursprung mot en riktning och kontrollera om den linjen korsar varandra med andra enheter. Raycaster-komponenten är ett omslag på toppen av three.js-raycaster. Den kontrollerar för korsningar i ett visst intervall mot en lista med objekt och kommer att avge händelser på enheten när den upptäcker korsningar eller rensning av korsningar (dvs. när strålkastaren inte längre är
parametrar
| Parameter | detaljer |
|---|---|
| långt | Maximalt avstånd under vilket resulterande enheter returneras. Kan inte vara lägre än nära. |
| intervall | Antal millisekunder att vänta mellan varje korsningstest. Lägre antal är bättre för snabbare uppdateringar. Högre antal är bättre för prestanda. |
| nära | Minsta avstånd över vilket återuppbyggnadsenheter returneras. Kan inte vara lägre än 0. |
| objekt | Frågaväljare för att välja vilka objekt som ska testas för korsning. Om det inte anges testas alla enheter. |
| rekursiv | Kontrollerar alla barn av objekt om de är inställda. Annars kontrollerar bara korsningar med rotobjekt. |
Anmärkningar
evenemang
| namn | detaljer |
|---|---|
raycaster-intersected | Utsänds från den korsade enheten. Enheten korsar varandra med en raycaster. Händelsedetalj kommer att innehålla el, raycasting-enheten och korsningen, ett objekt som innehåller detaljerad information om skärningspunkten. |
raycaster-intersected-cleared | Utsänds från den korsade enheten. Enheten korsar inte längre en strålkastare. Eventdetaljer kommer att innehålla el, raycasting-enheten. |
raycaster-intersection | Utsläpps från raycasting-enheten. Raycaster korsar varandra med en eller flera enheter. Händelsedetaljer kommer att innehålla els, en matris med de korsade enheterna och korsningar, en matris med objekt som innehåller detaljerad information om korsningarna. |
raycaster-intersection-cleared | Utsläpps från raycasting-enheten. Raycaster korsar inte längre en enhet. Eventdetaljer kommer att innehålla el, den tidigare korsade enheten. |
Medlem
| Medlem | Beskrivning |
|---|---|
intersectedEls | Enheter som för närvarande korsar strålkastaren. |
objects | three.js-objekt att testa för korsningar. Kommer att vara scen.barn om inte objekt är inte angiven. |
raycaster | three.js raycaster-objekt. |
Methode
| Metod | Beskrivning |
|---|---|
refreshObjects | Uppdaterar listan med objekt baserade på objektets egendom för att testa för korsning. |
Ställa in Raycasterens ursprung och riktning
Strålkastaren har ett ursprung, där strålen börjar, och en riktning, där strålen går.
Stråleorganets ursprung ligger i raycasterenhetens position. Vi kan ändra ursprunget till raycasteren genom att ställa in positionskomponenten för raycaster-enheten (eller moder-enheter för raycaster-enheten).
Riktningsstrålens riktning är framme för strålkastareenheten (dvs. 0 0 -1, på den negativa Z-axeln). Vi kan ändra riktningen för raycasteren genom att ställa in rotationskomponenten för raycaster-enheten (eller moder-enheter för raycaster-enheten).
Till exempel applicerar här en strålkastare längs en roterad kula:
<!-- 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>
Vitlistande enheter för att testa för korsning
Vi vill vanligtvis inte testa allt i scenen för korsningar (t.ex. för kollisioner eller klick). Selektiva korsningar är bra för prestanda för att begränsa antalet enheter som ska testas för korsning eftersom korsningstestning är en operation som går över 60 gånger per sekund.
För att välja eller välja de enheter vi vill testa för korsning kan vi använda objektets egenskap. Om den här egenskapen inte är definierad testar raycasteren alla objekt i scenen för skärningspunkt. objekt tar en frågaväljare:
<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>