Skip to main content

xrimageupdated

Description

This event is emitted by xrweb when an image target changes position, rotation or scale.

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

PropertyDescription
nameThe image's name.
typeOne of 'FLAT', 'CYLINDRICAL', 'CONICAL'.`
position: {x, y, z}The 3d position of the located image.
rotation: {w, x, y, z}The 3d local orientation of the located image.
scaleA scale factor that should be applied to object attached to this image.

If type = FLAT:

PropertyDescription
scaledWidthThe width of the image in the scene, when multiplied by scale.
scaledHeightThe height of the image in the scene, when multiplied by scale.

If type= CYLINDRICAL or CONICAL:

PropertyDescription
heightHeight of the curved target.
radiusTopRadius of the curved target at the top.
radiusBottomRadius of the curved target at the bottom.
arcStartRadiansStarting angle in radians.
arcLengthRadiansCentral angle in radians.

Example

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)
}
})