时间戳

首页 > 解决方案 > 8thWall Web : 如何实现多图目标功能？

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

标签： javascript8thwall-xr8thwall-web

解决方案

找到一个解决方案，这是一个很好的实现（放在正文末尾更好）

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

})

像魅力一样工作

推荐阅读