Question

单击事件不会在设置了光标侦听器的实体上触发。这是我的源代码。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Panorama</title>
    <meta name="description" content="Panorama — A-Frame">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/aframe/0.4.0/aframe.min.js"></script>
    <script type="javascript" >

    AFRAME.registerComponent('cursor-listener', {
      init: function () {
        var COLORS = ['red', 'green', 'blue'];
        this.el.addEventListener('click', function (evt) {
          var randomIndex = Math.floor(Math.random() * COLORS.length);
          this.setAttribute('material', 'color', COLORS[randomIndex]);
          console.log('I was clicked at: ', evt.detail.intersection.point);
        });
      }
    });

    </script>
</head>
<body>
<a-scene>
    <a-sky src="image.jpg" rotation="0 0 0"></a-sky>
    <a-camera fov=60 >
        <a-entity cursor="fuse: false; fuseTimeout: 500;"
                  position="0 0 -1"
                  geometry="primitive: ring; radiusOuter: 0.05; radiusInner: 0.02"
                  material="color: white; shader: flat" >
        </a-entity>
    </a-camera>
    <a-box color="#aa77dd" cursor-listener width="50" height="10" depth="20" position="-7.45 40.00 -141.77" id="Play">
    </a-box>
</a-scene>
</body>
</html>

我尝试在手机和桌面浏览器上执行此操作，但都无法正常工作。

Answer 1

光标组件在桌面上工作，鼠标拖动相机以查看实体。在移动设备上，它使用保险丝或Cardboard按钮。在VR上，它也是以凝视为基础的。

只需单击鼠标或点按手机即可。看https://github.com/mayognaise/aframe-mouse-cursor-component

Aframe：光标点击事件未在桌面上触发

1 个答案: