Closed dtboy1995 closed 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>
just add touchstart eventListener to the examplePlane it works, for all the mobiles you need touch events to work (not only ios).
examplePlane.addEventListener never called? thanks