Щелкните область вне объекта в портретном режиме / AR.js - PullRequest
Новая
       59

Щелкните область вне объекта в портретном режиме / AR.js

0 голосов
/ 20 ноября 2018

Я пытаюсь обработать события щелчка на AR.js, см. Страницу ниже.
https://medium.com/chialab-open-source/how-to-handle-click-events-on-ar-js-58fcacb77c4

Но если телефон в портретном режиме, возникает проблема, подобная изображению ниже.
https://i.stack.imgur.com/3PuXY.jpg

<html>
<head>
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
</head>
<script src="https://aframe.io/releases/0.8.0/aframe.min.js"></script>
<script src="https://rawgit.com/jeromeetienne/AR.js/master/aframe/build/aframe-ar.min.js"></script>
<script src="https://rawgit.com/donmccurdy/aframe-extras/master/dist/aframe-extras.loaders.min.js"></script>


<body style="margin : 0px; overflow: hidden;">
    <a-scene embedded vr-mode-ui="enabled: false" arjs="sourceType: webcam; trackingMethod: best; debugUIEnabled: false;">

    <a-assets>
        <a-asset-item id="animated-asset" src="https://raw.githubusercontent.com/nicolocarpignoli/nicolocarpignoli.github.io/master/ar-playground/models/CesiumMan.gltf"></a-asset-item>
    </a-assets>

    <a-marker markerhandler preset="hiro" emitevents="true" cursor="fuse: false; rayOrigin: mouse" id="animated-marker">
        <a-entity position="0 0 1">
            <a-entity
            id="animated-model"
            gltf-model="#animated-asset"
            scale="3"
            position="-3 0 0"
            rotation="-90 0 0">
            </a-entity>
        </a-entity>
    </a-marker>

    <a-entity camera></a-entity>
    </a-scene>

    <script>
        AFRAME.registerComponent('markerhandler', {
            init: function() {
                const animatedMarker = document.querySelector("#animated-marker");
                const aEntity = document.querySelector("#animated-model");
                animatedMarker.addEventListener('click', function(ev, target){
                    const intersectedElement = ev && ev.detail && ev.detail.intersectedEl;
                    if (aEntity && intersectedElement === aEntity) {
                        alert("test");
                    }
                });
            }
        });
    </script>

</body>

Как это исправить?

1 Ответ

0 голосов
/ 01 мая 2019

Привет, вам нужно зарегистрировать Компонент перед тем, как описать его.

Поставить 

    AFRAME.registerComponent('markerhandler', { ...

после загрузки ar.js

, затем разметить a-marker, a-entity,...

...