Possible mind-ar UI Interference #66

AhUhmm · 2021-10-27T17:26:19Z

AhUhmm
Oct 27, 2021

Hi! First of all I'm glad to see that there's some movement around AR and a-frame since AR.js seems to be a bit stuck. I was trying to integrate mindAR in a project I'm working on but I'm experiencing a weird behavior. It seems that if I disable all the UIs (loading, error, and scanning), the AR engine won't autoStart.

I see the autoStart is tied to the the renderStart event but couldn't really figure out where the problem lies.

In addition to that, I placed and entity as a child of the camera, to be displayed always in the middle of the screen, but it won't show up if mindAR UIs are enabled.

Any help would be much appreciated.

<html>
    <head>
        <!-- Required meta tags -->
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <meta name="apple-mobile-web-app-capable" content="yes" />

        <script src="https://cdn.jsdelivr.net/gh/hiukim/[email protected]/dist/mindar-image.prod.js"></script>
        <script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
        <script src="https://cdn.jsdelivr.net/gh/hiukim/[email protected]/dist/mindar-image-aframe.prod.js"></script>
        <script src="https://unpkg.com/[email protected]/dist/aframe-layout-component.min.js"></script>
        <script src="https://unpkg.com/[email protected]/dist/aframe-state-component.min.js"></script>
        <script src="https://cdn.jsdelivr.net/gh/donmccurdy/[email protected]/dist/aframe-extras.min.js"></script>

        <title>Start</title>
       
    </head>

<script>
AFRAME.registerComponent("ar-state", {
                init: function () {
                    const sceneEl = document.querySelector("a-scene");
                    sceneEl.addEventListener("arReady", (event) => {
                        alert("MindAR is ready");
                    });
                },
            });
</script>
    <body>
        <a-scene
            ar-state
            loading-screen="enabled: false"
            mindar-image="imageTargetSrc: ./targets.mind; uiError=no; uiLoading=no; uiScanning=no"
            color-space="sRGB"
            renderer="colorManagement: true, physicallyCorrectLights"
            vr-mode-ui="enabled: false"
            device-orientation-permission-ui="enabled: false"
        >
            <a-assets>
                <a-asset-item
                    id="cat"
                    src="./assets/3D/Cat_Animations.gltf"
                ></a-asset-item
            ></a-assets>

            <a-camera
                position="0 0 0"
                look-controls="enabled: false"
                cursor="fuse: false; rayOrigin: mouse;"
                raycaster="far: 10000;objects: [raycastable]"
                >
<!-- Intro Block -->
                <a-entity
                    id="intro"
                    geometry="primitive: circle; radius: 0.55; segments: 64;"
                    material="color: #fff"
                    text="font: ./fonts/Cera GR Regular Italic-msdf.json; fontImage: ./fonts/CeraGRRegularItalic.png; negate: false; value: Put your headphone on and press to start.; color: #000000; align: center; wrapCount: 25; lineHeight: 35;"
                    position="0 0 -4"
                    scale="0 0 0"
                    animation="property: scale; to: 0 0 0; dur: 800; startEvents: scaleDown; easing: easeInElastic;"
                >
                    <a-entity
                        geometry="primitive: circle; radius: 0.58; segments: 64;"
                        material="color: #ed008d"
                        position="0 0 -0.008"
                        raycastable
                    >
                    </a-entity> </a-entity
            ></a-camera>

            <a-entity id="target" mindar-image-target="targetIndex: 0">
                <a-entity
                    id="cat3D"
                    gltf-model="#cat"
                    position="0 0 0"
                    rotation="90 0 0"
                    scale="1 1 1"
                ></a-entity>
            </a-entity>
        </a-scene>
    </body>
</html>

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Possible mind-ar UI Interference #66

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 0 comments

Select a reply

Possible mind-ar UI Interference #66

AhUhmm Oct 27, 2021

Replies: 0 comments

AhUhmm
Oct 27, 2021