aframe
Raycasters (componente)
Buscar..
Introducción
El componente raycaster realiza pruebas generales de intersección con un raycaster. La difusión de rayos es el método de extender una línea desde un origen hacia una dirección, y verificar si esa línea se cruza con otras entidades. El componente raycaster es una envoltura encima de three.js raycaster. Comprueba las intersecciones en un cierto intervalo contra una lista de objetos, y emitirá eventos en la entidad cuando detecte intersecciones o desatasque las intersecciones (es decir, cuando el raycaster ya no esté).
Parámetros
| Parámetro | Detalles |
|---|---|
| lejos | Distancia máxima bajo la cual se devuelven las entidades resultantes. No puede ser más bajo que cerca. |
| intervalo | Número de milisegundos para esperar entre cada prueba de intersección. Un número más bajo es mejor para actualizaciones más rápidas. Un número más alto es mejor para el rendimiento. |
| cerca | Distancia mínima a partir de la cual se devuelven las entidades resuilting. No puede ser inferior a 0. |
| objetos | Selector de consultas para seleccionar qué objetos probar para la intersección. Si no se especifica, todas las entidades serán probadas. |
| recursivo | Comprueba todos los hijos de los objetos si se establece. De lo contrario, solo comprueba las intersecciones con objetos raíz. |
Observaciones
Eventos
| Nombre | Detalles |
|---|---|
raycaster-intersected | Emitido en la entidad intersectada. La entidad se está cruzando con un raycaster. El detalle del evento contendrá el, la entidad de difusión de rayos y la intersección, un objeto que contiene datos detallados sobre la intersección. |
raycaster-intersected-cleared | Emitido en la entidad intersectada. La entidad ya no se intersecta con un raycaster. El detalle del evento contendrá el, la entidad de emisión de rayos. |
raycaster-intersection | Emitido en la entidad de emisión de rayos. Raycaster se está cruzando con una o más entidades. Los detalles del evento contendrán els, una matriz con las entidades intersecadas, e intersecciones, una matriz de objetos que contienen datos detallados sobre las intersecciones. |
raycaster-intersection-cleared | Emitido en la entidad de emisión de rayos. Raycaster ya no se intersecta con una entidad. El detalle del evento contendrá el, la entidad anteriormente intersectada. |
Miembro
| Miembro | Descripción |
|---|---|
intersectedEls | Entidades que actualmente se cruzan con el raycaster. |
objects | Objetos three.js para probar las intersecciones. Serán scene.children si no se especifica la propiedad de los objetos. |
raycaster | Objeto raycaster three.js. |
Methode
| Método | Descripción |
|---|---|
refreshObjects | Actualiza la lista de objetos basados en la propiedad de objetos para probar la intersección. |
Estableciendo el Origen y la Dirección del Raycaster
El raycaster tiene un origen, donde comienza su rayo, y una dirección, donde va el rayo.
El origen del raycaster se encuentra en la posición de la entidad raycaster. Podemos cambiar el origen del transmisor de rayos estableciendo el componente de posición de la entidad de transmisor de rayos (o entidades primarias de la entidad de transmisor de rayos).
La dirección del transmisor de rayos está en "frente" de la entidad del transmisor de rayos (es decir, 0 0 -1, en el eje Z negativo). Podemos cambiar la dirección del transmisor de rayos estableciendo el componente de rotación de la entidad de transmisor de rayos (o entidades primarias de la entidad de transmisor de rayos).
Por ejemplo, aquí está aplicando un transmisor de rayos a lo largo de una bala girada:
<!-- 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>
Entidades de lista blanca para probar la intersección
Por lo general, no queremos probar todo en la escena en busca de intersecciones (por ejemplo, para colisiones o clics). Las intersecciones selectivas son buenas para el rendimiento, ya que limitan el número de entidades a probar para la intersección, ya que la prueba de intersección es una operación que se ejecutará más de 60 veces por segundo.
Para seleccionar o elegir las entidades que queremos probar para la intersección, podemos usar la propiedad objetos. Si esta propiedad no está definida, entonces el raycaster probará todos los objetos en la escena en busca de intersección. objetos toma un valor selector de consulta:
<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>