Passer au contenu principal

xrimagelost

Description

Cet événement est émis par xrweb lorsqu'une image cible n'est plus suivie.

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

PropriétéDescription
nomNom de l'image.
typeUn 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.
échelleFacteur d'échelle à appliquer aux objets attachés à cette image.

Si le type = FLAT :

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

Si type= CYLINDRICAL ou CONICAL :

PropriétéDescription
hauteurHauteur de la cible incurvée.
radiusTopRayon de la cible incurvée en haut.
radiusBottomRayon de la cible incurvée en bas.
arcStartRadiansAngle de départ en radians.
arcLengthRadiansAngle 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)
}
})