本文へスキップ

エクスリメージファウンド

説明

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

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

プロパティ説明
名称画像の名前。
タイプFLAT'、'CYLINDRICAL'、'CONICAL'`のいずれか。
position: {x, y, z}配置された画像の3次元位置。
回転: {w, x, y, z}.配置された画像の3次元の局所的な向き。
スケールこの画像に添付されているオブジェクトに適用されるスケールファクター。

type = FLAT の場合:

プロパティ説明
拡大幅シーン内の画像の幅(scaleを掛けた場合)。
スケールドハイトScaleを掛けたときのシーン内の画像の高さ。

type= CYLINDRICAL または CONICAL の場合:

プロパティ説明
高さカーブしたターゲットの高さ。
半径トップ上部のカーブしたターゲットの半径。
底半径下部のカーブしたターゲットの半径。
アーク開始ラジアンラジアン単位の開始角度。
弧長ラジアンラジアン単位の中心角。

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