Question

当鼠标移动到Aframe中的图像上时，我想显示图像和标题。

Answer 1

要将鼠标用作光标，请使用<a-scene cursor="rayOrigin:mouse">
然后让组件监听mouseenter和mouseleave事件，显示您的实体，并分别隐藏它们。

<强> HTML

<a-entity id="parent" listener>
     <a-entity id="images_and_captions"></a-entity>
</a-entity>

<强> JS

AFRAME.registerComponent('listener', {
  init: function() {
    this.el.addEventListener('mouseenter', (e) => {
      this.el.children[0].setAttribute('visible', 'true');
    })
    this.el.addEventListener('mouseleave', (e) => {
      this.el.children[0].setAttribute('visible', 'false');
    })
  }
})

在这里工作小提琴：https://jsfiddle.net/ou7r9hou/2/

Answer 2

您需要将mouseenter eventlistener添加到对象。

HTML

<img alt="img" id="img" src="myimg"/>

的Javascript

window.onload = function(){
  var img = document.getElementById("img");
  img.addEventListener("mouseenter", function(){
      //your code to show image and text here
  });
}

你可以在aframe中基本上交换HTML，只要你保留id就行。

使用Aframe中的图像和标题进行鼠标悬停

2 个答案: