aframe
Raycaster (Komponente)
Suche…
Einführung
Die Raycaster-Komponente führt allgemeine Kreuzungsprüfungen mit einem Raycaster durch. Raycasting ist die Methode, eine Linie von einem Ursprung in eine Richtung auszudehnen und zu prüfen, ob sich diese Linie mit anderen Elementen schneidet. Die Raycaster-Komponente ist ein Wrapper auf dem Raycaster von three.js. Er prüft in einem bestimmten Intervall nach Schnittpunkten anhand einer Liste von Objekten und gibt Ereignisse in der Entität aus, wenn Schnittpunkte erkannt oder Schnittpunkte gelöscht werden (dh wenn der Raycaster nicht mehr vorhanden ist
Parameter
| Parameter | Einzelheiten |
|---|---|
| weit | Maximale Entfernung, unter der die resultierenden Entitäten zurückgegeben werden. Kann nicht niedriger als in der Nähe sein. |
| Intervall | Anzahl der Millisekunden, die zwischen jedem Schnittpunkttest gewartet werden muss. Eine niedrigere Anzahl ist besser für schnellere Updates. Eine höhere Anzahl ist besser für die Leistung. |
| nahe | Mindestentfernung, über die erneute Entitäten zurückgegeben werden. Kann nicht niedriger als 0 sein. |
| Objekte | Abfrageselektor zum Auswählen der Objekte, die auf Schnittpunkt getestet werden sollen. Wenn nicht angegeben, werden alle Entitäten getestet. |
| rekursiv | Überprüft alle untergeordneten Objekte, wenn gesetzt. Sonst werden nur Schnittpunkte mit Stammobjekten geprüft. |
Bemerkungen
Veranstaltungen
| Name | Einzelheiten |
|---|---|
raycaster-intersected | Wird an der durchschnittenen Entität gesendet. Entität kreuzt sich mit einem Raycaster. Ereignisdetails enthalten el, die Raycasting-Entität und Kreuzung, ein Objekt, das detaillierte Daten zur Kreuzung enthält. |
raycaster-intersected-cleared | Wird an der durchschnittenen Entität gesendet. Eine Entität schneidet nicht mehr mit einem Raycaster. Das Ereignisdetail enthält das Raycasting-Element el. |
raycaster-intersection | Wird auf der Raycasting-Einheit gesendet. Raycaster kreuzt sich mit einer oder mehreren Entitäten. Ereignisdetails enthalten ein Array, ein Array mit den überkreuzten Entitäten und Schnittpunkte, ein Array von Objekten, die detaillierte Daten zu den Schnittpunkten enthalten. |
raycaster-intersection-cleared | Wird auf der Raycasting-Einheit gesendet. Raycaster schneidet nicht mehr mit einer Entität. Das Ereignisdetail enthält el, die zuvor überschnittene Entität. |
Mitglied
| Mitglied | Beschreibung |
|---|---|
intersectedEls | Einheiten, die den Raycaster aktuell schneiden. |
objects | Three.js-Objekte, die auf Schnittpunkte getestet werden sollen. Wird scene.children, wenn nicht object property angegeben ist. |
raycaster | drei .js Raycaster-Objekt. |
Methode
| Methode | Beschreibung |
|---|---|
refreshObjects | Aktualisiert die Liste der Objekte, die auf der Objekteigenschaft basieren, um die Kreuzung zu testen. |
Ursprung und Richtung des Raycasters einstellen
Der Raycaster hat einen Ursprung, von dem der Strahl ausgeht, und eine Richtung, in die der Strahl geht.
Der Ursprung des Raycaster liegt an der Position der Raycaster-Entität. Wir können den Ursprung des Raycaster ändern, indem Sie die Positionskomponente der Raycaster-Entität (oder der übergeordneten Entitäten der Raycaster-Entität) festlegen.
Die Richtung des Raycaster befindet sich in "vorderer" Richtung der Raycaster-Entität (dh 0 0 -1 auf der negativen Z-Achse). Wir können die Richtung des Raycaster ändern, indem Sie die Rotationskomponente der Raycaster-Entität (oder der übergeordneten Entitäten der Raycaster-Entität) festlegen.
Zum Beispiel wird hier ein Raycaster entlang der Länge eines gedrehten Geschosses angewendet:
<!-- 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 zum Testen auf Schnittmenge
Wir möchten normalerweise nicht alles in der Szene auf Schnittpunkte testen (z. B. für Kollisionen oder für Klicks). Selektive Kreuzungen sind gut für die Leistung, um die Anzahl der zu prüfenden Entitäten zu begrenzen, da der Schnittpunkttest eine Operation ist, die mehr als 60 Mal pro Sekunde ausgeführt wird.
Um die Objekte auszuwählen oder auszuwählen, die auf Schnittpunkte getestet werden sollen, können wir die Objekteigenschaft verwenden. Wenn diese Eigenschaft nicht definiert ist, testet der Raycaster jedes Objekt in der Szene auf Schnittmenge. Objekte nimmt einen Abfrageauswählwert an:
<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>