Функция полноэкранного клика на мобильном телефоне с aframe & ar.js - PullRequest
Новая
       15

Функция полноэкранного клика на мобильном телефоне с aframe & ar.js

0 голосов
/ 17 апреля 2019

Я использую aframe в сочетании с ar.js для отслеживания маркера hiro.

Теперь все, что я хочу сделать, это перехватывать события нажатия / касания на объекте canvas, который я создаю нав этом.Событие работает в Chrome (последняя сборка), но не в iOS 11.4.1 Safari.

Я пробовал разные библиотеки (aframe-mouse-cursor-component) и альтернативные настройки div / button, но ни однойпохоже, работает на мобильных устройствах, поэтому я обращаюсь к сообществу за помощью, так как не могу придумать, как еще решить эту проблему.

Ниже приведен фрагмент моего кода: 

<style type="text/css">
    .a-scene {
        display: block;
        position: relative;
        height: 100%; 
        width: 100%;
    }

    .a-canvas {
        height: 100%;
        left: 0;
        position: absolute;
        top: 0;
        width: 100%;
        /*background-color: red;*/
    }
</style>

<body style='margin : 0px; overflow: hidden;'>
    <a-scene embedded arjs='debugUIEnabled: false;' physics="debug: true" antialias="true">
        <a-marker preset='hiro' markerhandler emitevents="true" cursor="fuse: false; rayOrigin: mouse" id="animated-marker" >
            <!-- <a-entity geometry="primitive: box" material="color: red; opacity: 0.5" id="box-scale-please" scale="1"></a-entity> -->
            <!-- <a-entity geometry="primitive: plane" material="color: #DDDDDD; opacity: 0.75" rotation="-90 0 0" scale="1"></a-entity> -->
            <a-plane static-body material="color: #DDDDDD; opacity: 0.75" rotation="-90 0 0" scale="1" id="plane"></a-plane>
        </a-marker>
        <a-sky color="#DDDDDD"></a-sky>
        <!-- use this <a-entity camera> to support multiple-markers, otherwise use <a-marker-camera> instead of </a-marker> -->
        <a-entity camera id="camera" mouse-cursor></a-entity>        
    </a-scene>
</body>

AFRAME.registerComponent('markerhandler', {

    init: function() {
        const animatedMarker = document.querySelector("#animated-marker");
        const aEntity = document.querySelector("#box-scale-please");
        // const screen = document.querySelector("#myscene");

        document.createElement("a-canvas");

        var canvas = document.querySelector(".a-canvas");



        // every click, we make our model grow in size :)
        canvas.addEventListener('mousedown', function(ev, target){
            alert("TAPPED555");
        });
    }
});
...