A-frame Хотите кликнуть на объекте, показывает другой объект?

Question

У меня есть сущность, и я хочу, чтобы при нажатии или наведении курсора в виде рамки, который изменяет атрибут видимой другой сущности на true.

<a-entity id="pug" gltf-model="#pug" position="-1.75 0.0035 3" 
 scale="0.01 0.01 0.01" rotation="0 -11 0" >shadow
    event-set__down="_event: mousedown; scale: 1.2 1.2 1.2"
    event-set__up="_event: mouseup; scale: 1 1 1"
    event-set__leave="_event: mouseleave; scale: 1 1 1">
</a-entity>

Если у меня есть, что взаимодействие с курсором работает, но я не знаю, как (или даже если), я могу заставить его влиять на атрибут другого объекта.

Я хочу чтобы:

<script>
    $(document).ready(function(){
        $("#pug").mouseenter(function(){
          $('#bubble').attr('visible', 'true');
        });
    });
</script>

У меня есть курсор в моей камере, но я не знаю... Я новичок в A-Frame, и я должен что-то упустить:/ Спасибо!

Answer 1

Имейте в виду, что изменение свойств CSS не повлияет на визуализируемые объекты. Лучший способ изменить свойства - использовать entity.setAttribute("attribute", "value")

---

Я не уверен, что вы можете сделать переключение (видимое / невидимое) с помощью компонента набора событий, но вы можете сделать объект видимым или невидимым, установив атрибут visible:

<a-entity event-set__click="_target: a-cylinder; visible: false;"></a-entity>

проверьте это здесь.

---

Но я бы порекомендовал создать рамочный компонент. Вы можете проверить их в документации, в этом случае это выглядит так:

AFRAME.registerComponent("foo", {
  init: function() {
   this.el.addEventListener("click", (e) => {
    let cylinder = document.querySelector("a-cylinder")
    cylinder.setAttribute("visible", !cylinder.getAttribute("visible"))
   })
  }
})

HTML:

<a-entity foo>

достаточно просто:
1) AFRAME.registerComponent("foo" бит "объявляет" компонент.
2) init: function() функция выполняется при инициализации компонента
3) Внутри слушателя щелчков я сделал простой переключатель, который устанавливает видимость, противоположную фактическому значению. Если он видим, переключите его на! Visible = false.

Проверьте это здесь.