8thWall Web: Как реализовать целевую функцию с несколькими изображениями?

Question

Я хочу использовать целевую функцию с несколькими изображениями. Я использую рамку. где мне поставить эту строку:

XR.XrController.configure({imageTargets: ['image-target1', 'image-target2', 'image-target3']})

и что мне делать с <a-entity> атрибут, как у меня

<!-- Note: "name:" must be set to the name of the image target uploaded to the 8th Wall Console -->
<a-entity set-component-visible="name">
</a-entity>

Прямо сейчас я использую одну цель изображения, например:

    //IMAGE TARGET
    AFRAME.registerComponent('set-component-visible', {
        schema: {
            name: { 
                type: 'string' 
                XR.XrController.configure({imageTargets: ['HongLeong', 'KPJ']})
            }
        },
        init: function () {
            const object3D = this.el.object3D
            const name = this.data.name
            var scrollingArea = document.getElementById('scrolling-container');
            object3D.visible = false;
            scrollingArea.style.visibility = 'hidden';

            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
                scrollingArea.style.visibility = 'visible';
            }

            const hideImage = ({detail}) => {
                if (name != detail.name) {
                    return
                }
                object3D.visible = false
                scrollingArea.style.visibility = 'hidden';
            }

            this.el.sceneEl.addEventListener('xrimagefound', showImage)
            this.el.sceneEl.addEventListener('xrimageupdated', showImage)
            this.el.sceneEl.addEventListener('xrimagelost', hideImage)
        }
    });

HTML:

<a-entity set-component-visible="my-image-target">
</a-entity>

Answer 1

Найдите решение, вот хорошая реализация (лучше положить конец тела)

  window.addEventListener('load', function () {
      XR8.XrController.configure({imageTargets: ['imagetarget1', 'imagetarget2']})

})

Работает как шарм