在纵向模式/ AR.js上单击对象区域

问题描述 投票:0回答:1

我正在尝试处理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>

如何解决?

augmented-reality aframe ar.js
1个回答
0
投票

嗨,您应该在描述之前注册Component。

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

加载ar.js后

然后标记一个标记,一个实体,......

© www.soinside.com 2019 - 2024. All rights reserved.