记录场景中的每次点击

Question

我想在框架中开发一个应用程序，每次点击都会被记录下来并引导我到下一张照片 (a-sky)。目前我有一张绑定 link 的图片。我使用 this 作为基础示例并以此为基础进行开发。

<a-scene>
  <a-assets>
    <img id="home" crossorigin="anonymous" src="media/home1600.png">
    <img id="back" crossorigin="anonymous" src="media/back1600.png">
    <img id="forward" crossorigin="anonymous" src="media/forward1600.png">
    <!-- other pictures ... -->

    <!-- Image link template to be reused. -->
    <script id="link" type="text/html">
      <a-entity class="link"
        geometry="primitive: plane; width: 0.25; height: 0.25;"
        material="shader: flat; src: ${thumb};"
        event-set__1="_event: mousedown; scale: 1 1 1"
        event-set__2="_event: mouseup; scale: 1.2 1.2 1"            
        set-image="on: click; target: #image-360; src: ${src}; action: ${action}"
        sound="on: click; src: #click-sound"></a-entity>
    </script>
  </a-assets>

  <!-- 360-degree image. -->
  <!-- Dynamically create a-sky in javascript -->
  <a-sky id="image-360" radius="10" src="#pic0" phi-start="275"></a-sky>

  <input type="hidden" id="pic_num" value="0">

  <!-- Image links. -->
  <a-entity id="links" layout="type: line; margin: 0.4" position="0 -1 -2.5">
    <!-- prepare new links for each action -->
    <a-entity id="back" template="src: #link" data-src="" data-thumb="#back" data-action="back"></a-entity>
    <a-entity id="home" template="src: #link" data-src="" data-thumb="#home" data-action="home"></a-entity>
    <a-entity id="forward" template="src: #link" data-src="" data-thumb="#forward" data-action="forward"></a-entity>
  </a-entity>
</a-scene>

我真的不喜欢那些导航图标，因为我不知道如何让它们更有吸引力，所以我想删除它们。我想在你点击任何地方时注册向前动作（不仅仅是在向前的拇指上）。

请问是否可以在a-scene组件上注册事件点击？我正在尝试这个，但没有任何运气。

Answer 1

如果您想点击球体并获得点击前进的动作，只需将事件添加到您的天空实体即可：

set-image="on: click; target: #image-360; action: forward"

它应该是这样的：

<a-sky id="image-360" radius="10" src="#pic0" phi-start="275" 
set-image="on: click; target: #image-360; action: forward"
></a-sky>

但不确定您对设置图像组件进行了多少更改。希望它能以某种方式处理 src。
更新
我忘了你把你的 raycaster 列入了白名单，实体应该是这样的：

<a-sky id="image-360" class="link" radius="10" src="#pic0" phi-start="275" 
set-image="on: click; target: #image-360; action: forward"
></a-sky>

请记住，此处的设置图像与缩略图上的不同。他们不共享数据。如果您想管理缩略图和 sphere/sky 上的图像更改，您需要在一个缩略图上的 set-image 组件内监听球体上的点击（因此一个实体管理整个交换系统），或者一个实体包裹着缩略图和天空，或者只是制作一个组件附加到场景。

顺便说一句，我已经破坏了您的代码，请查看 fiddle，点击在球体上工作。 https://jsfiddle.net/af9qgdw0/ it works on a sphere, i think the raycaster might have a lenght limit, ( though it says its infinite on the docs ), check this out: A-Frame cursor listener on sky element not firing

更新 2
OP 希望仅当您不拖动图片时才执行点击操作。
我认为最简单的方法是设置几个事件侦听器：
1.通过
监听相机变化 addEventListener('componentchanged', function(evt) { if (evt.detail.name === 'rotation') { } }); 而 evt.detail.newData 是新的轮换，evt.detail.oldData 是旧的轮换。
2.在你的set-image中监听mousedown和mouseup事件。按下鼠标时存储 oldData.y，然后检查 newData 是否等于存储的数据。请记住检查 newData 是否未定义。如果旧数据等于新数据，则向前交换图像

记录场景中的每次点击

Register every click in a-scene

aframe