8thWall Web : How to implement the multiple image target function?

Question

I want to use the multiple image target function. im using aframe. where do i put this line :

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

and what do i do with the <a-entity> attribute as i have

<!-- 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>

Right now im using a single image target like this :

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

the html:

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

is it fixed , if yes please share the code – Aryan Apr 28 '20 at 09:35 — Aryan, Apr 28 '20 at 09:35

score 0 · Answer 1 · answered Nov 11 '19 at 13:14

0

Find a solution, here is the good implementation ( put at end of body is better )

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

})

Working like a charm

answered Nov 11 '19 at 13:14

Lovis Odin

1

8thWall Web : How to implement the multiple image target function?

1 Answers1