使用 A 型框架将注视按钮添加到场景

Question

有没有办法在 aframe 中添加凝视按钮？另请注意，为了获得更好的体验，必须有一个小进度条来了解用户必须查看多长时间。

我查看了 inspector 工具，但没有找到有效的方法。

在 this YouTube tutorial 中，我找到了如何添加点击控件。这与我制作注视事件的方式相同吗？

Answer 1

您可以 select 通过使用光标组件的保险丝属性凝视某个项目。在此处查看 A-Frame 文档： https://aframe.io/docs/0.5.0/components/cursor.html#fuse-based-cursor

这将触发项目的点击事件，因此您还需要为点击事件的项目设置监听器。

Answer 2

通过搜索，我找到了一个可行的解决方案。这是我的代码：

document.getElementsByTagName('a-sphere')[0].addEventListener('click', function(){
    alert('click');
});

<script src="https://aframe.io/releases/0.5.0/aframe.min.js"></script>
<a-scene>
    <!-- this is my object that must execute a click event when looked -->
    <a-sphere position="0 0 -7" color="red">
    </a-sphere>

    <!-- camera -->
    <a-camera look-controls wasd-controls cursor="maxDistance: 30; fuse: true">
        <!-- progress bar -->
        <a-entity position="0 0 -3" geometry="primitive: ring; radiusOuter: 0.07;radiusInner: 0.05;" material="color: cyan; shader: flat"
            cursor="maxDistance: 30; fuse: true">
            <!--<a-cursor color="red"></a-cursor>-->
            <a-animation begin="click" easing="ease-in" attribute="scale" fill="backwards" from="0.1 0.1 0.1" to="1 1 1" dur="150"></a-animation>
            <a-animation begin="fusing" easing="ease-in" attribute="scale" fill="forwards" from="1 1 1" to="0.1 0.1 0.1" dur="1500"></a-animation>
        </a-entity>
    </a-camera>
</a-scene>

感谢@thoragio his/her 的回答。

使用 A 型框架将注视按钮添加到场景

Add gaze buttons to scene using A-frame

events

controls

aframe

gaze-buttons