Question

我有一个实体，我想要在单击或指向a框架光标时将另一个实体的可见属性更改为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>

签出here。

但是我建议创建一个a框架组件。您可以在docs中检出它们，在这种情况下，它看起来像这样：

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。

签出here。

A框架，请单击实体以显示其他实体

1 个答案: