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

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

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>

person Community    schedule 18.09.2019    source источник
comment
исправлено, если да, поделитесь кодом   -  person Aryan    schedule 28.04.2020


Ответы (1)


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

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

})

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

person Lovis Odin    schedule 11.11.2019