xrimageupdated

Description

Cet événement est émis par xrweb lorsqu'une image cible change de position, de rotation ou d'échelle.

imageupdated.detail : { name, type, position, rotation, scale, scaledWidth, scaledHeight, height, radiusTop, radiusBottom, arcStartRadians, arcLengthRadians }

Propriété	Description
nom	Nom de l'image.
type	Un des éléments suivants : 'FLAT', 'CYLINDRICAL', 'CONICAL'.`
position : {x, y, z}	La position 3D de l'image localisée.
rotation : {w, x, y, z}	L'orientation locale 3D de l'image localisée.
échelle	Facteur d'échelle à appliquer aux objets attachés à cette image.

Si le type = FLAT :

Propriété	Description
largeur mise à l'échelle	La largeur de l'image dans la scène, multipliée par l'échelle.
hauteur mise à l'échelle	Hauteur de l'image dans la scène, multipliée par l'échelle.

Si type= CYLINDRICAL ou CONICAL :

Propriété	Description
hauteur	Hauteur de la cible incurvée.
radiusTop	Rayon de la cible incurvée en haut.
radiusBottom	Rayon de la cible incurvée en bas.
arcStartRadians	Angle de départ en radians.
arcLengthRadians	Angle central en radians.

Exemple

AFRAME.registerComponent('my-named-image-target', {
  schema: {
    name: { type: 'string' }
  },
  init: function () {
    const object3D = this.el.object3D
    const name = this.data.name
    object3D.visible = false

    const showImage = ({detail}) => {
      if (name != detail.name) {
        return
      }
      object3D.position.copy(detail.position)
      object3D.quaternion.copy(detail.rotation)
      object3D.scale.set(detail.scale, detail.scale, detail.scale)
      object3D.visible = true
    }

    const hideImage = ({detail}) => {
      if (name != detail.name) {
        return
      }
      object3D.visible = false
    }

    this.el.sceneEl.addEventListener('xrimagefound', showImage)
    this.el.sceneEl.addEventListener('xrimageupdated', showImage)
    this.el.sceneEl.addEventListener('xrimagelost', hideImage)
  }
})