时间戳

首页 > 解决方案 > 在纵向模式/ AR.js 上单击对象外的区域

augmented-reality - 在纵向模式/ AR.js 上单击对象外的区域

问题描述

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

解决方案

嗨，您应该在描述之前注册组件。

放 

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

加载 ar.js 后

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

推荐阅读