xrimagefound

概要

このイベントは、xrweb によってイメージ・ターゲットが最初に見つかったときに発生します。

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

プロパティ	説明
name	画像の名前です。
type	'FLAT', 'CYLINDRICAL', 'CONICAL' のいずれか。
position: {x, y, z}	配置された画像の3次元位置。
rotation: {w, x, y, z}	配置された画像の3次元の局所的な向き。
scale	この画像に付随するオブジェクトに適用されるスケール係数。

type = FLATの場合:

プロパティ	説明
scaledWidth	シーン内の画像の幅、スケールを掛けたときの幅。
scaledHeight	シーン内の画像の高さ、スケールを掛けた時の画像。

type= CYLINDRICAL または CONICALの場合:

プロパティ	説明
height	曲面ターゲットの高さ。
radiusTop	曲面ターゲットの上部の半径。
radiusBottom	曲面ターゲットの下部の半径。
arcStartRadians	開始角度。 (ラジアン単位)
arcLengthRadians	中心角。 (ラジアン単位)

例

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