Coaching Overlay

Coaching Overlay le permite incorporar usuarios y garantizar la mejor experiencia.

Escala absoluta de Coaching Overlay

La Superposición de Coaching de Escala Absoluta introduce a los usuarios en las experiencias de escala absoluta, garantizando que recopilan los mejores datos posibles para determinar la escala. Hemos diseñado Coaching Overlay para que sea fácilmente personalizable por los desarrolladores, permitiéndole centrar su tiempo en construir su experiencia WebAR.

Utilice la superposición de revestimiento de escala absoluta en su proyecto:

Abra su proyecto
Añada la siguiente etiqueta a head.html

<meta name="8thwall:package" content="@8thwall.coaching-overlay">

Nota: para los proyectos autohospedado, debería añadir la siguiente etiqueta <script> a su página en su lugar:

<script src='https://cdn.8thwall.com/web/coaching-overlay/coaching-overlay.js'></script>

De manera opcional, personalice los parámetros de su componente coaching-overlay como se define a continuación. Para los proyectos que no sean AFrame, consulte la documentación de CoachingOverlay.configure().

Parámetros del componente A-Frame (todos opcionales)

Parámetro	Tipo	Por defecto	Descripción
animationColor	`Cadena`	`'blanco'`	Color de la animación de Coaching Overlay. Este parámetro acepta argumentos de color CSS válidos.
promptColor	`Cadena`	`'blanco'`	Color de todo el texto de Coaching Overlay. Este parámetro acepta argumentos de color CSS válidos.
promptText	`Cadena`	`'Mover el dispositivo hacia delante y hacia atrás'`	Establece la cadena de texto para el texto explicativo de la animación que informa a los usuarios del movimiento que deben realizar para generar escala.
disablePrompt	`Boolean`	`false`	Establézcalo como verdadero (true) para ocultar el Coaching Overlay por defecto y poder utilizar los eventos de Coaching Overlay de manera personalizada.

Crear un Coaching Overlay personalizado para su proyecto

Coaching Overlay puede añadirse como módulo de canalización y luego ocultarse (utilizando el parámetro disablePrompt ) para que pueda utilizar fácilmente los eventos de Coaching Overlay para activar una superposición personalizada.

Los eventos de Coaching Overlay solo se lanzan cuando la escala se establece en absoluta. Los eventos son emitidos por el bucle de ejecución de la cámara de 8th Wall y pueden escucharse desde un módulo de canalización. Estos eventos incluyen:

coaching-overlay.show: el evento se activa cuando debe mostrarse la el Coaching Overlay.
coaching-overlay.hide: el evento se activa cuando debe ocultarse el Coaching Overlay.

Ejemplo - Coaching Overlay con parámetros especificados por el usuario

coachingoverlay-example

Ejemplo de Aframe (captura de pantalla anterior)

<a-scene
  coaching-overlay="
    animationColor: #E86FFF;
    promptText: Para generar escala mueve el teléfono hacia delante y luego hacia atrás;"
  xrextras-loading
  xrextras-gesture-detector
...
  xrweb="scale: absolute;">

Ejemplo sin AFrame (captura de pantalla anterior)

// Configured here
CoachingOverlay.configure({
    animationColor: '#E86FFF',
    promptText: 'Para generar escala mueve el teléfono hacia delante y luego hacia atrás',
})
XR8.addCameraPipelineModules([
  XR8.GlTextureRenderer.pipelineModule(),
  XR8.Threejs.pipelineModule(),
  XR8.XrController.pipelineModule(),
  XRExtras.FullWindowCanvas.pipelineModule(),
  XRExtras.Loading.pipelineModule(),
  XRExtras.RuntimeError.pipelineModule(),
  LandingPage.pipelineModule(),
  // Added here
  CoachingOverlay.pipelineModule(),
  ...
])

Ejemplo de AFrame - Escucha de eventos de Coaching Overlay

this.el.sceneEl.addEventListener('coaching-overlay.show', () => {
  // Do something
 })

this.el.sceneEl.addEventListener('coaching-overlay.hide', () => {
  // Do something
})

Ejemplo sin AFrame - Escucha de eventos de Coaching Overlay

const myShow = () => {
  console.log('EXAMPLE: COACHING OVERLAY - SHOW')
}

const myHide = () => {
  console.log('EXAMPLE: COACHING OVERLAY - HIDE')
}

const myPipelineModule = {
  name: 'my-coaching-overlay',
  listeners: [
    {event: 'coaching-overlay.show', process: myShow},
    {event: 'coaching-overlay.hide', process: myHide},
  ],
}

const onxrloaded = () => {
  XR8.addCameraPipelineModule(myPipelineModule)
}

window.XR8 ? onxrloaded() : window.addEventListener('xrloaded', onxrloaded)

Coaching Overlay VPS

La Superposición de Entrenamiento VPS embarca a los usuarios en experiencias VPS asegurándose de que localizan correctamente en ubicaciones del mundo real. Hemos diseñado Coaching Overlay para que sea fácilmente personalizable por los desarrolladores, permitiéndole centrar su tiempo en construir su experiencia WebAR.

Utilice la superposición de Coaching VPS en su proyecto:

Abra su proyecto
Añada la siguiente etiqueta a head.html

<meta name="8thwall:package" content="@8thwall.coaching-overlay">

Nota: para los proyectos autohospedado, debería añadir la siguiente etiqueta <script> a su página en su lugar:

<script src='https://cdn.8thwall.com/web/coaching-overlay/coaching-overlay.js'></script>

De manera opcional, personalice los parámetros de su componente coaching-overlay como se define a continuación. Para proyectos que no sean AFrame, consulte la documentación de VpsCoachingOverlay.configure().

Parámetros del componente A-Frame (todos opcionales)

Parámetro	Tipo	Por defecto	Descripción
wayspot-name	`Cadena`		El nombre del punto de ruta en el que la superposición de coaching está guiando al usuario para que se localice. Si no se especifica el nombre del punto de ruta, utilizará el punto de ruta del proyecto más cercano. Si el proyecto no tiene ningún Wayspot de proyecto, utilizará el Wayspot más cercano.
hint-image	`Cadena`		Imagen mostrada al usuario para guiarle hasta la ubicación en el mundo real. Si no se especifica ninguna imagen secundaria, se utilizará la imagen por defecto para la zona de paso. Si Wayspot no tiene una imagen por defecto, no se mostrará ninguna imagen. Las fuentes multimedia aceptadas incluyen el id img o la URL estáticas.
animation-color	`Cadena`	`'#ffffff'`	Color de la animación superposición de coaching. Este parámetro acepta argumentos de color CSS válidos.
duración de la animación	`Número`	`5000`	Tiempo total que se muestra la imagen de sugerencia antes de encogerse (en milisegundos).
prompt-color	`Cadena`	`'#ffffff'`	Color de todo el texto de coaching superpuesto. Este parámetro acepta argumentos de color CSS válidos.
prompt-prefix	`Cadena`	`'Point your camera at'`	Establece la cadena de texto para la acción aconsejada al usuario sobre el nombre del Wayspot.
prompt-suffix	`Cadena`	`'and move around'`	Establece la cadena de texto para la acción de usuario aconsejada debajo del nombre del Wayspot.
status-text	`Cadena`	`'Scanning...'`	Establece la cadena de texto que se muestra debajo de la imagen de sugerencia cuando está en estado reducido.
disable-prompt	`Booleano`	`false`	Establézcalo como verdadero (true) para ocultar el Coaching Overlay por defecto y poder utilizar los eventos de Coaching Overlay de manera personalizada.

Crear un Coaching Overlay personalizado para su proyecto

Los eventos de Coaching Overlay VPS solo se lanzan cuando enableVps se establece en true. Los eventos son emitidos por el bucle de ejecución de la cámara de8th Wall y pueden escucharse desde un módulo de canalización. Estos eventos incluyen:

vps-coaching-overlay.show: el evento se activa cuando debería mostrarse el Coaching Overlay.
coaching-overlay.hide: el evento se activa cuando debería ocultarse el Coaching Overlay.

Ejemplo - Coaching Overlay con parámetros especificados por el usuario

vps-coachingoverlay-example

Ejemplo de AFrame (captura de pantalla anterior)

<a-scene
  vps-coaching-overlay="
    prompt-color: #0000FF;
    prompt-prefix: Go look for;"
  xrextras-loading
  xrextras-gesture-detector
  ...
  xrweb="vpsEnabled: true;">

Ejemplo sin AFrame (captura de pantalla anterior)

// Configured here
VpsCoachingOverlay.configure({
    textColor: '#0000FF',
    promptPrefix: 'Go look for',
})
XR8.addCameraPipelineModules([
  XR8.GlTextureRenderer.pipelineModule(),
  XR8.Threejs.pipelineModule(),
  XR8.XrController.pipelineModule(),
  XRExtras.FullWindowCanvas.pipelineModule(),
  XRExtras.Loading.pipelineModule(),
  XRExtras.RuntimeError.pipelineModule(),
  LandingPage.pipelineModule(),
  // Added here
  VpsCoachingOverlay.pipelineModule(),
  ...
])

Ejemplo de AFrame - Escucha de eventos de Coaching Overlay VPS

this.el.sceneEl.addEventListener('vps-coaching-overlay.show', () => {
  // Do something
 })

this.el.sceneEl.addEventListener('vps-coaching-overlay.hide', () => {
  // Do something
})

Ejemplo sin AFrame - Escucha de eventos de Coaching Overlay VPS

const myShow = () => {
  console.log('EXAMPLE: VPS COACHING OVERLAY - SHOW')
}

const myHide = () => {
  console.log('EXAMPLE: VPS COACHING OVERLAY - HIDE')
}

const myPipelineModule = {
  name: 'my-coaching-overlay',
  listeners: [
    {event: 'vps-coaching-overlay.show', process: myShow},
    {event: 'vps-coaching-overlay.hide', process: myHide},
  ],
}

const onxrloaded = () => {
  XR8.addCameraPipelineModule(myPipelineModule)
}

window.XR8 ? onxrloaded() : window.addEventListener('xrloaded', onxrloaded)

Coaching Overlay para efectos en el cielo (Sky Effects)

La superposición de entrenamiento de Sky Effects introduce a los usuarios en las experiencias de Sky Effects asegurándose de que están apuntando su dispositivo al cielo. Hemos diseñado Coaching Overlay para que sea fácilmente personalizable por los desarrolladores, permitiéndote centrar su tiempo en construir tu experiencia WebAR.

Utilice Coaching Overlay para efectos en el cielo en su proyecto

Abra su proyecto
Añada la siguiente etiqueta a head.html

<meta name="8thwall:package" content="@8thwall.coaching-overlay">

Nota: para los proyectos autohospedado, debería añadir la siguiente etiqueta <script> a su página en su lugar:

<script src='https://cdn.8thwall.com/web/coaching-overlay/coaching-overlay.js'></script>

De manera opcional, personalice los parámetros de su componente sky-coaching-overlay como se define a continuación. Para los proyectos sin AFrame, consulte la documentación

SkyCoachingOverlay.configure().

Parámetros del componente A-Frame (todos opcionales)

Parámetro	Tipo	Por defecto	Descripción
animationColor	`Cadena`	`'blanco'`	Color de la animación de Coaching Overlay. Este parámetro acepta argumentos de color CSS válidos.
promptColor	`Cadena`	`'blanco'`	Color de todo el texto de Coaching Overlay. Este parámetro acepta argumentos de color CSS válidos.
promptText	`Cadena`	`'Apunta con tu teléfono hacia el cielo'`	Establece la cadena de texto para el texto explicativo de la animación que informa a los usuarios del movimiento que deben realizar.
disablePrompt	`Boolean`	`false`	Establézcalo como verdadero para ocultar el Coaching Overlay por defecto y poder utilizar los eventos de Coaching Overlay de manera personalizada.
autoByThreshold	`Booleano`	`true`	Mostrar/ocultar automáticamente la superposición en función del porcentaje de píxeles del cielo que esté por encima o por debajo de `hideThreshold` / `showThreshold`
showThreshold	`Número`	0,1	Mostrar una superposición actualmente oculta si el porcentaje de píxel de cielo está por debajo de este umbral.
hideThreshold	`Número`	0,05	Ocultar una superposición mostrada actualmente si el porcentaje de píxel de cielo está por encima de este umbral.

Crear un Coaching Overlay personalizado para su proyecto

El Coaching Overlay en el cielo puede añadirse como un módulo de canalización y luego ocultarse (utilizando el parámetro disablePrompt) para que pueda utilizar fácilmente los eventos del Coaching Overlay para activar una superposición personalizada.

sky-coaching-overlay.show: el evento se activa cuando debería mostrarse el Coaching Overlay.
sky-coaching-overlay.show: el evento se activa cuando debería ocultarse el Coaching Overlay.

SkyCoachingOverlay.control

Por defecto, el Coaching Overlay para efectos en el cielo muestra y oculta automáticamente el Coaching Overlay dependiendo de si el usuario está mirando al cielo o no. Puede manejarlo utilizando SkyCoachingOverlay.control.

// Show the coaching overlay
SkyCoachingOverlay.control.show()
// Hide the coaching overlay
SkyCoachingOverlay.control.hide()
// Make it so the sky coaching overlay automatically shows / hides itself.
SkyCoachingOverlay.control.setAutoShowHide(true)
// Make it so the sky coaching overlay does not automatically show / hide itself.
SkyCoachingOverlay.control.setAutoShowHide(false)
// Hides the coaching overlay and cleans it up
SkyCoachingOverlay.control.cleanup()

Por ejemplo, puede que parte de su experiencia ya no requiera que el usuario mire al cielo. Si no llama a setAutoShowHide(false), el Coaching Overlay aparecerá encima de su interfaz de usuario. En este caso, llame a setAutoShowHide(false) y luego controle manualmente mostrar y ocultar mediante show() y hide(). O cuando esté listo para pedir al usuario que vuelva a mirar al cielo, setAutoShowHide(true).

Ejemplo - Coaching Overlay para el cielo con parámetros especificados por el usuario

sky-coachingoverlay-example

Ejemplo de AFrame (captura de pantalla anterior)

<a-scene
  ...
  xrlayers="cameraDirection: back;"
  sky-coaching-overlay="
    animationColor: #E86FFF;
    promptText: ¡Mira hacia el cielo!;"
  ...
  renderer="colorManagement: true"
>

Ejemplo sin AFrame (captura de pantalla anterior)

// Configured here
SkyCoachingOverlay.configure({
    animationColor: '#E86FFF',
    promptText: '¡Mira hacia el cielo!',
})
XR8.addCameraPipelineModules([  // Add camera pipeline modules.
    // Existing pipeline modules.
    XR8.GlTextureRenderer.pipelineModule(),      // Draws the camera feed.
    XR8.Threejs.pipelineModule(),                // Creates a ThreeJS AR Scene as well as a Sky scene.
    window.LandingPage.pipelineModule(),         // Detects unsupported browsers and gives hints.
    XRExtras.FullWindowCanvas.pipelineModule(),  // Modifies the canvas to fill the window.
    XRExtras.Loading.pipelineModule(),           // Manages the loading screen on startup.
    XRExtras.RuntimeError.pipelineModule(),      // Shows an error image on runtime error.

    // Enables Sky Segmentation.
    XR8.LayersController.pipelineModule(),
    SkyCoachingOverlay.pipelineModule(),

    ...
    mySkySampleScenePipelineModule(),
  ])

  XR8.LayersController.configure({layers: {sky: {invertLayerMask: false}}})
  XR8.Threejs.configure({layerScenes: ['sky']})

Ejemplo de AFrame - Escucha de eventos de Coaching Overlay en el Cielo

this.el.sceneEl.addEventListener('sky-coaching-overlay.show', () => {
  // Do something
 })

this.el.sceneEl.addEventListener('sky-coaching-overlay.hide', () => {
  // Do something
})

Ejemplo sin AFrame - Escucha de eventos de Coaching Overlay en el Cielo

const myShow = () => {
  console.log('EXAMPLE: SKY COACHING OVERLAY - SHOW')
}

const myHide = () => {
  console.log('EXAMPLE: SKY COACHING OVERLAY - HIDE')
}

const myPipelineModule = {
  name: 'my-sky-coaching-overlay',
  listeners: [
    {event: 'sky-coaching-overlay.show', process: myShow},
    {event: 'sky-coaching-overlay.hide', process: myHide},
  ],
}

const onxrloaded = () => {
  XR8.addCameraPipelineModule(myPipelineModule)
}

window.XR8 ? onxrloaded() : window.addEventListener('xrloaded', onxrloaded)

Coaching Overlay de seguimiento de manos

La sobreimpresión de seguimiento de la mano introduce a los usuarios en las experiencias de seguimiento de la mano asegurándose de que están apuntando con su teléfono a una mano. Hemos diseñado Coaching Overlay para que sea fácilmente personalizable por los desarrolladores, permitiéndole centrar su tiempo en construir tu experiencia WebAR.

Utilice Coaching Overlay de seguimiento manual en su proyecto

Abra su proyecto
Añada la siguiente etiqueta a head.html

<meta name="8thwall:package" content="@8thwall.coaching-overlay">

Nota: para los proyectos autohospedado, debería añadir la siguiente etiqueta <script> a su página en su lugar:

<script src='https://cdn.8thwall.com/web/coaching-overlay/coaching-overlay.js'></script>

De manera opcional, personalice los parámetros de su component de hand-coaching-overlay como se define a continuación. Para los proyectos sin AFrame, consulte la documentación

HandCoachingOverlay.configure().

Parámetros del componente A-Frame (todos opcionales)

Parámetro	Tipo	Por defecto	Descripción
animationColor	`Cadena`	`'blanco'`	Color de la animación de Coaching Overlay. Este parámetro acepta argumentos de color CSS válidos.
promptColor	`Cadena`	`'blanco'`	Color de todo el texto de Coaching Overlay. Este parámetro acepta argumentos de color CSS válidos.
promptText	`Cadena`	`'Apunta con el teléfono hacia la mano'`	Establece la cadena de texto para el texto explicativo de la animación que informa a los usuarios del movimiento que deben realizar.
disablePrompt	`Boolean`	`false`	Establézcalo como verdadero (true) para ocultar el Coaching Overlay por defecto y poder utilizar los eventos de Coaching Overlay de manera personalizada.

Crear un Coaching Overlay personalizado para su proyecto

El Coaching Overlay manual puede añadirse como módulo de canalización y luego ocultarse (utilizando el parámetro disablePrompt) para que pueda utilizar fácilmente los eventos de Coaching Overlay para activar una superposición personalizada.

hand-coaching-overlay.show: el evento se activa cuando debería mostrarse el Coaching Overlay.
hand-coaching-overlay.hide: el evento se activa cuando debería ocultarse el Coaching Overlay.

Ejemplo - Coaching Overlay manual con parámetros especificados por el usuario

hand-coachingoverlay-example

Ejemplo de AFrame (captura de pantalla anterior)

<a-scene
  ...
  xrhand="allowedDevices:any; cameraDirection:back;"
  hand-coaching-overlay="
    animationColor: #E86FFF;
    promptText: Apunta con el teléfono a tu mano izquierda;"
...
  renderer="colorManagement: true"
>

Ejemplo sin AFrame (captura de pantalla anterior)

// Configurado aquí
HandCoachingOverlay.configure({
    animationColor: '#E86FFF',
    promptText: '¡Apunta con el teléfono a tu mano izquierda!',
})
XR8.addCameraPipelineModules([  // Add camera pipeline modules.
    // Módulos de canalización existentes.
    XR8.GlTextureRenderer.pipelineModule(),      // Draws the camera feed.
    XR8.Threejs.pipelineModule(),                // Creates a ThreeJS AR Scene as well as a Sky scene.
    window.LandingPage.pipelineModule(),         // Detects unsupported browsers and gives hints.
    XRExtras.FullWindowCanvas.pipelineModule(),  // Modifies the canvas to fill the window.
    XRExtras.Loading.pipelineModule(),           // Manages the loading screen on startup.
    XRExtras.RuntimeError.pipelineModule(),      // Muestra una imagen de error.

    // Enables Hand Tracking.
    XR8.HandController.pipelineModule(),
    HandCoachingOverlay.pipelineModule(),

    ...
    myHandSampleScenePipelineModule(),
  ])

Ejemplo de AFrame - Escucha de eventos de Coaching Overlay Manual

this.el.sceneEl.addEventListener('hand-coaching-overlay.show', () => {
  // Do something
 })

this.el.sceneEl.addEventListener('hand-coaching-overlay.hide', () => {
  // Do something
})

Ejemplo sin Aframe- Escucha de eventos de Coaching Overlay manual

const myShow = () => {
  console.log('EXAMPLE: HAND COACHING OVERLAY - SHOW')
}

const myHide = () => {
  console.log('EXAMPLE: HAND COACHING OVERLAY - HIDE')
}

const myPipelineModule = {
  name: 'my-hand-coaching-overlay',
  listeners: [
    {event: 'hand-coaching-overlay.show', process: myShow},
    {event: 'hand-coaching-overlay.hide', process: myHide},
  ],
}

const onxrloaded = () => {
  XR8.addCameraPipelineModule(myPipelineModule)
}

window.XR8 ? onxrloaded() : window.addEventListener('xrloaded', onxrloaded)

Escala absoluta de Coaching Overlay​

Utilice la superposición de revestimiento de escala absoluta en su proyecto:​

Parámetros del componente A-Frame (todos opcionales)​

Crear un Coaching Overlay personalizado para su proyecto​

Ejemplo - Coaching Overlay con parámetros especificados por el usuario​

Ejemplo de Aframe (captura de pantalla anterior)​

Ejemplo sin AFrame (captura de pantalla anterior)​

Ejemplo de AFrame - Escucha de eventos de Coaching Overlay​

Ejemplo sin AFrame - Escucha de eventos de Coaching Overlay​

Coaching Overlay VPS​

Utilice la superposición de Coaching VPS en su proyecto:​

Parámetros del componente A-Frame (todos opcionales)​

Crear un Coaching Overlay personalizado para su proyecto​

Ejemplo - Coaching Overlay con parámetros especificados por el usuario​

Ejemplo de AFrame (captura de pantalla anterior)​

Ejemplo sin AFrame (captura de pantalla anterior)​

Ejemplo de AFrame - Escucha de eventos de Coaching Overlay VPS​

Ejemplo sin AFrame - Escucha de eventos de Coaching Overlay VPS​

Coaching Overlay para efectos en el cielo (Sky Effects)​

Utilice Coaching Overlay para efectos en el cielo en su proyecto​

Parámetros del componente A-Frame (todos opcionales)​

Crear un Coaching Overlay personalizado para su proyecto​

Ejemplo - Coaching Overlay para el cielo con parámetros especificados por el usuario​

Ejemplo de AFrame (captura de pantalla anterior)​

Ejemplo sin AFrame (captura de pantalla anterior)​

Ejemplo de AFrame - Escucha de eventos de Coaching Overlay en el Cielo​

Ejemplo sin AFrame - Escucha de eventos de Coaching Overlay en el Cielo​

Coaching Overlay de seguimiento de manos​

Utilice Coaching Overlay de seguimiento manual en su proyecto​

Parámetros del componente A-Frame (todos opcionales)​

Crear un Coaching Overlay personalizado para su proyecto​

Ejemplo - Coaching Overlay manual con parámetros especificados por el usuario​

Ejemplo de AFrame (captura de pantalla anterior)​

Ejemplo sin AFrame (captura de pantalla anterior)​

Ejemplo de AFrame - Escucha de eventos de Coaching Overlay Manual​

Ejemplo sin Aframe- Escucha de eventos de Coaching Overlay manual​

Escala absoluta de Coaching Overlay

Utilice la superposición de revestimiento de escala absoluta en su proyecto:

Parámetros del componente A-Frame (todos opcionales)

Crear un Coaching Overlay personalizado para su proyecto

Ejemplo - Coaching Overlay con parámetros especificados por el usuario

Ejemplo de Aframe (captura de pantalla anterior)

Ejemplo sin AFrame (captura de pantalla anterior)

Ejemplo de AFrame - Escucha de eventos de Coaching Overlay

Ejemplo sin AFrame - Escucha de eventos de Coaching Overlay

Coaching Overlay VPS

Utilice la superposición de Coaching VPS en su proyecto:

Parámetros del componente A-Frame (todos opcionales)

Crear un Coaching Overlay personalizado para su proyecto

Ejemplo - Coaching Overlay con parámetros especificados por el usuario

Ejemplo de AFrame (captura de pantalla anterior)

Ejemplo sin AFrame (captura de pantalla anterior)

Ejemplo de AFrame - Escucha de eventos de Coaching Overlay VPS

Ejemplo sin AFrame - Escucha de eventos de Coaching Overlay VPS

Coaching Overlay para efectos en el cielo (Sky Effects)

Utilice Coaching Overlay para efectos en el cielo en su proyecto

Parámetros del componente A-Frame (todos opcionales)

Crear un Coaching Overlay personalizado para su proyecto

Ejemplo - Coaching Overlay para el cielo con parámetros especificados por el usuario

Ejemplo de AFrame (captura de pantalla anterior)

Ejemplo sin AFrame (captura de pantalla anterior)

Ejemplo de AFrame - Escucha de eventos de Coaching Overlay en el Cielo

Ejemplo sin AFrame - Escucha de eventos de Coaching Overlay en el Cielo

Coaching Overlay de seguimiento de manos

Utilice Coaching Overlay de seguimiento manual en su proyecto

Parámetros del componente A-Frame (todos opcionales)

Crear un Coaching Overlay personalizado para su proyecto

Ejemplo - Coaching Overlay manual con parámetros especificados por el usuario

Ejemplo de AFrame (captura de pantalla anterior)

Ejemplo sin AFrame (captura de pantalla anterior)

Ejemplo de AFrame - Escucha de eventos de Coaching Overlay Manual

Ejemplo sin Aframe- Escucha de eventos de Coaching Overlay manual