hiukim / mind-ar-js

Web Augmented Reality. Image Tracking, Face Tracking. Tensorflow.js
MIT License
2.16k stars 399 forks source link

Events Handling click never call? #288

Closed dtboy1995 closed 1 year ago

dtboy1995 commented 1 year ago
<html>

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <script src="https://cdn.jsdelivr.net/gh/hiukim/mind-ar-js@1.1.5/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/mind-ar-js@1.1.5/dist/mindar-image-aframe.prod.js"></script>
    <script>
        document.addEventListener("DOMContentLoaded", function () {
            const sceneEl = document.querySelector('a-scene');
            const arSystem = sceneEl.systems["mindar-image-system"];
            const exampleTarget = document.querySelector('#example-target');
            const examplePlane = document.querySelector('#example-plane');
            const startButton = document.querySelector("#example-start-button");
            const stopButton = document.querySelector("#example-stop-button");
            const pauseButton = document.querySelector("#example-pause-button");
            const pauseKeepVideoButton = document.querySelector("#example-pause-keep-video-button");
            const unpauseButton = document.querySelector("#example-unpause-button");
            startButton.addEventListener('click', () => {
                console.log("start");
                arSystem.start(); // start AR 
            });
            stopButton.addEventListener('click', () => {
                arSystem.stop(); // stop AR 
            });
            pauseButton.addEventListener('click', () => {
                arSystem.pause(); // pause AR, keep video feed
            });
            pauseKeepVideoButton.addEventListener('click', () => {
                arSystem.pause(true); // pause AR and video
            });
            unpauseButton.addEventListener('click', () => {
                arSystem.unpause(); // unpause AR and video
            });
            // arReady event triggered when ready
            sceneEl.addEventListener("arReady", (event) => {
                // console.log("MindAR is ready")
            });
            // arError event triggered when something went wrong. Mostly browser compatbility issue
            sceneEl.addEventListener("arError", (event) => {
                // console.log("MindAR failed to start")
            });
            // detect target found
            exampleTarget.addEventListener("targetFound", event => {
                console.log("target found");
            });
            // detect target lost
            exampleTarget.addEventListener("targetLost", event => {
                console.log("target lost");
            });
            // detect click event
            examplePlane.addEventListener("click", event => {
                console.log("plane click");
// never call ##############################################
                startButton.innerHTML += 'plane click' + '\n'
            });
        });
    </script>
</head>

<body>
    <div style="position: absolute; z-index: 1000">
        <button id="example-start-button">Start</button>
        <button id="example-pause-button">Pause</button>
        <button id="example-pause-keep-video-button">Pause (keep video)</button>
        <button id="example-unpause-button">UnPause</button>
        <button id="example-stop-button">Stop</button>
    </div>
    <a-scene
        mindar-image="imageTargetSrc: https://cdn.jsdelivr.net/gh/hiukim/mind-ar-js@1.1.5/examples/image-tracking/assets/card-example/card.mind; autoStart: true;"
        embedded color-space="sRGB" renderer="colorManagement: true, physicallyCorrectLights"
        vr-mode-ui="enabled: false" device-orientation-permission-ui="enabled: false">
        <a-camera position="0 0 0" look-controls="enabled: false" cursor="fuse: false; rayOrigin: mouse;"
            raycaster="far: 1.1.5; objects: .clickable"></a-camera>

        <a-entity id="example-target" mindar-image-target="targetIndex: 0">
            <a-plane id="example-plane" class="clickable" color="blue" opaciy="0.5" position="0 0 0" height="0.552"
                width="1" rotation="0 0 0"></a-plane>
        </a-entity>
    </a-scene>
</body>

</html>

examplePlane.addEventListener never called? thanks

vishnusaivivek commented 1 year ago

just add touchstart eventListener to the examplePlane it works, for all the mobiles you need touch events to work (not only ios).