Zum Hauptinhalt springen

xrimagelost

Beschreibung

Dieses Ereignis wird von xrweb ausgelöst, wenn ein Bildziel nicht mehr verfolgt wird.

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

EigentumBeschreibung
nameDer Name des Bildes.
typEine von 'FLAT', 'CYLINDRICAL', 'CONICAL'.`
position: {x, y, z}Die 3d-Position des georteten Bildes.
rotation: {w, x, y, z}Die lokale 3d-Ausrichtung des georteten Bildes.
scaleEin Skalierungsfaktor, der auf das an dieses Bild angehängte Objekt angewendet werden soll.

Wenn Typ = FLAT:

EigentumBeschreibung
scaledWidthDie Breite des Bildes in der Szene, wenn sie mit dem Maßstab multipliziert wird.
scaledHeightDie Höhe des Bildes in der Szene, wenn sie mit dem Maßstab multipliziert wird.

Wenn type= CYLINDRICAL oder CONICAL:

EigentumBeschreibung
heightHöhe des gebogenen Ziels.
radiusTopRadius des gebogenen Ziels oben.
radiusBottomRadius des gekrümmten Ziels am unteren Rand.
arcStartRadiansStartwinkel in Radiant.
arcLengthRadiansZentraler Winkel in Radiant.

Beispiel

AFRAME.registerComponent('mein-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)
}
})