Componentes de JavaScript

8thwall-camera 

Componente de cámara de 8thwall.

Deprecated: Use los componentes en https://github.com/WonderlandEngine/wonderland-ar-tracking en su lugar.

anchor 

Establece la ubicación del objeto a la ubicación de un XRAnchor

Cree anclajes usando la función estática Anchor.create().

Ejemplo para usar con cursor:

1cursorTarget.onClick.add((object, cursor, originalEvent) => {
2    /* Solo los eventos en XR tendrán un frame adjunto */
3    if(!originalEvent.frame) return;
4    Anchor.create(anchorObject, {uuid: id, persist: true}, originalEvent.frame);
5});

audio-listener 

Representa un componente de audio listener de Wonderland. Actualiza la posición y orientación de una instancia de escucha de WebAudio.

Nota: Solo un escucha debe estar activo a la vez.

audio-source 

Representa una fuente de audio en Wonderland Engine, permitiendo la reproducción de archivos de audio.

cursor 

Cursor 3D para escritorio/móvil/VR.

Implementa un cursor de ray-casting en la escena. Para reaccionar a clics/hover/unhover/cursor down/cursor up/move use un cursor-target.

Para VR, el rayo se lanza en dirección de this.object.getForward(). Para escritorio y móvil, el vector hacia adelante se proyecta inversamente para considerar dónde en la pantalla el usuario hizo clic.

.globalTarget se puede usar para llamar a callbacks para todos los objetos, incluso aquellos que no tienen un cursor target adjunto, pero coinciden con el grupo de colisión.

.hitTestTarget se puede usar para llamar a callbacks de resultados de hit test de WebXR,

Vea Ejemplo de Animación.

Adjunta un componente hit-test-location al cursorObject, que será usado por el cursor para enviar eventos al hitTestTarget con HitTestResult.|

cursor-target 

Objetivo de clic/hover/move/botón para cursor.

Para disparar código al hacer clic, hover, unhover, mover el cursor, presionar botón de cursor o soltar botón de cursor, use .addClickFunction(f), .addHoverFunction(f), .addUnHoverFunction(f), .addMoveFunction(f), .addDownFunction(f) y .addUpFunction(f) respectivamente con cualquier function f() {}.

Para llamar a miembros en un componente diferente, puede configurar un cursor target así:

1start: function() {
2  let target = this.object.addComponent('cursor-target');
3  target.onClick.add(this.onClick.bind(this));
4},
5onClick: function() {
6  console.log(this.object.name, "was clicked!");
7}

Funciones:

 1const target = this.object.getComponent(CursorTarget);
 2const callback = function(object, cursorComponent) {};
 3
 4target.onHover.add(callback);
 5target.onHover.remove(callback);
 6
 7target.onUnHover.add(callback);
 8target.onUnHover.remove(callback);
 9
10target.onClick.add(callback);
11target.onClick.remove(callback);
12
13target.onMove.add(callback);
14target.onMove.remove(callback);
15
16target.onDown.add(callback);
17target.onDown.remove(callback);
18
19target.onUp.add(callback);
20target.onUp.remove(callback);

Requisitos:

• un componente de collision debe estar adjunto al mismo objeto.

Vea Ejemplo de Animación.

debug-object 

Imprime información limitada de depuración sobre el objeto.

La información consiste en: El nombre de este objeto, el nombre de un parámetro del objeto, la traducción mundial del objeto, la transformación mundial y la transformación local.

Utilizado principalmente por los desarrolladores del motor para fines de depuración o como código de ejemplo.

device-orientation-look 

Recupera la orientación del dispositivo desde un dispositivo móvil y ajusta la orientación del objeto en consecuencia.

Útil para experiencias de ventana mágica.

finger-cursor 

Habilita la interacción con cursor-targets a través de superposiciones de colisión, por ejemplo, en la punta de un dedo en una mano rastreada.

Requisitos:

• Un componente de colisión (generalmente una esfera con radio 0.05) en el mismo objeto

fixed-foveation 

Aplica foveación fija una vez que se inicia una sesión de WebXR.

La foveación fija reduce el costo de sombreado en la periferia al renderizar en resoluciones más bajas en los bordes de la visión del usuario.

hand-tracking 

Seguimiento de manos fácil a través de la API de Dispositivos WebXR API “Hand Input”](https://immersive-web.github.io/webxr-hand-input/).

Permite mostrar las manos ya sea como uniones de esferas o mallas texturizadas.

Para reaccionar al agarre, use this.isGrabbing(). Para otros gestos, consulte this.joints - un array de Object3D y use los índices de las juntas listados en la especificación WebXR Hand Input.

A menudo se desea usar rastreo de manos o controladores, no ambos. Este componente proporciona deactivateChildrenWithoutPose para ocultar la visualización de seguimiento de manos si no hay pose disponible y controllerToDeactivate para desactivar otro objeto una vez que la pose de seguimiento de manos esté disponible. Fuera de las sesiones XR, no se habilitan ni deshabilitan rastreo o controladores para interactuar bien con el componente vr-mode-active-switch.

Requisitos:

• Para usar el seguimiento de manos, habilite “seguimiento de articulaciones” en chrome://flags en Oculus Browser para Oculus Quest/Oculus Quest 2.

Vea Ejemplo de Seguimiento de Manos.

hit-test-location 

Configura un Test de Impacto “Hit Test” de la API de Dispositivos WebXR y coloca el objeto en la ubicación del impacto.

Requisitos:

• Especifique 'hit-test' en las características requeridas u opcionales en el botón de AR en su archivo html. Vea Wastepaperbin AR como un ejemplo.

Deprecated: Use onHitLost y onHitFound en su lugar.|

image-texture 

Descarga una imagen desde una URL y la aplica como diffuseTexture o flatTexture a un componente de malla adjunto.

Se admiten materiales de los siguientes sombreadores:

• “Phong Opaque Textured”
• “Flat Opaque Textured”
• “Background”
• “Physical Opaque Textured”
• “Foliage”

input-profile 

Carga y asigna dinámicamente perfiles de entrada para controladores XR.

mouse-look 

Controla la orientación de la cámara mediante el movimiento del mouse.

Implementado de manera eficiente para afectar la orientación del objeto solo cuando se mueve el mouse.

orbital-camera 

El componente OrbitalCamera permite al usuario orbitar alrededor de un punto objetivo, que es la posición del propio objeto. Gira a la distancia especificada.

Observaciones: El componente funciona usando mouse o toque. Por lo tanto, no funciona en VR.

plane-detection 

Genera mallas y colisiones para XRPlanes usando API de Dispositivos WebXR - Detección de Planos.

player-height 

Establece la altura del jugador para un desplazamiento Y por encima del suelo para espacios de referencia ’locales’ y ‘del espectador’.

target-framerate 

Establece la tasa de fotogramas objetivo

Actualiza la tasa de fotogramas objetivo a la tasa de fotogramas objetivo más cercana soportada al framerate dado.

La tasa de fotogramas objetivo se usa para el compositor VR del dispositivo como una indicación de con qué frecuencia refrescar el pantalla con nuevas imágenes. Esto significa que se le pedirá a la aplicación producir marcos en intervalos más regulares, posiblemente gastando menos tiempo en marcos que probablemente se descarten.

Para aplicaciones con carga pesada, establecer una tasa de fotogramas objetivo bien ajustada puede mejorar la estabilidad de renderizado de las aplicaciones y reducir el parpadeo.

Asimismo, la tasa de fotogramas objetivo puede utilizarse para habilitar velocidades de actualización de 120Hz en Oculus Quest 2 en aplicaciones más simples.

teleport 

Locomoción VR por teletransporte.

Vea Ejemplo de Teletransporte.

trail 

Rastro dinámico basado en mallas

Este componente mantiene un seguimiento de la posición mundial del objeto al que se añade. En un intervalo fijo, la posición mundial se almacena como puntos de inicio y fin de los segmentos del rastro.

El rastro se estrecha a lo largo de su longitud. Las coordenadas de textura UV están configuradas de manera que el eje-U cubre el ancho del rastro y el eje-V cubre la longitud del rastro. Esto permite que la apariencia del rastro se defina usando una textura.

two-joint-ik-solver 

Cinemática inversa para cadenas de dos articulaciones (por ejemplo, rodillas o codos)

video-texture 

Descarga un video desde una URL y lo aplica como diffuseTexture o flatTexture en el material dado.

Las texturas de video necesitan ser actualizadas regularmente siempre que un nuevo fotograma esté disponible. Este componente maneja la detección de un nuevo fotograma y actualiza la textura para reflejar el fotograma actual del video.

Se admiten materiales de los siguientes sombreadores:

• “Phong Opaque Textured”
• “Flat Opaque Textured”
• “Background”
• “Physical Opaque Textured”
• “Foliage”

El video puede ser accedido a través de this.video:

1  let videoTexture = this.object.getComponent('video-texture');
2  videoTexture.video.play();
3  videoTexture.video.pause();

Vea Ejemplo de Video.

vr-mode-active-switch 

Permite cambiar todos los demás componentes en un objeto a activos/inactivos dependiendo de si una sesión VR/AR está activa.

Útil para ocultar controladores hasta que el usuario ingrese en VR, por ejemplo.

vrm 

Componente para cargar y manejar modelos VRM 1.0.

El posado del modelo debe hacerse exclusivamente girando los huesos. Estos se pueden acceder usando la propiedad .bones y siguen la denominación de huesos de VRM. Note que no todos los modelos VRM tendrán todos los huesos posibles. La pose de descanso (pose en T) se captura en la propiedad .restPose. Restablecer un hueso a su pose de descanso puede hacerse de la siguiente manera:

1vrmComponent.bones[vrmBoneName].rotationLocal = vrmComponent.restPose[vrmBoneName];

Mover el modelo a través del mundo debe hacerse moviendo el objeto al que este componente está adjunto. En otras palabras, moviendo la raíz del modelo VRM. No se deben usar los huesos ni ningún objeto descendiente para mover el modelo VRM.

La extensión principal VRMC_vrm así como las extensiones VRMC_springBone y VRMC_node_constraint son soportadas.

Limitaciones:

• No hay soporte para VRMC_material_mtoon
• No se admiten las expresiones
• No se admite el lookAt basado en expresiones
• El modo de anotación de malla auto no es compatible

wasd-controls 

Movimiento básico con las teclas W/A/S/D.