Question

在ngokevin在我的上一个问题中提出的有用的方法改变之后，我现在尝试在两个实体之间交换光标组件（每个实体都是一个单独相机的子级）。但是，我看到了两种我没想到的行为：

当我调用entityEl.removeAttribute（＆＃39; cursor＆＃39;）时，它会删除游标组件，但会留下隐式添加的raycaster组件。（演示：http://codepen.io/anon/pen/oZgJOg）
当我调用entityEl.setAttribute（＆＃39; cursor＆＃39;）时，我没有观察到检查器中对实体的任何添加。（演示：http://codepen.io/anon/pen/vxEvbG）

在第一个案例解决了这个问题后，我可以验证只是调用.removeAttribute（＆＃39; raycaster＆＃39;），我不太确定是什么阻止了添加光标。这是第二个演示组件的所有内容：

AFRAME.registerComponent( 'add-cursor-on-click', {
  init: function() {
    this.el.setAttribute('cursor'); 
    this.el.addEventListener( 'click', function() { console.log("Received click ev."); } );
  }
});

<a-entity id="onlyTheCursorAfterClick" add-cursor-on-click></a-entity>

与往常一样，任何见解都会受到高度赞赏。

Answer 1

最近添加了游标组件的删除生命周期处理程序，因此它只在master上正确运行，请参阅此拉取请求：https://github.com/aframevr/aframe/pull/2397

游标组件也不会在其init上附加事件。它等待render-target-loaded（https://github.com/aframevr/aframe/blob/2c0d9ed1efd93df841d207da5e7d2d69c67d8d3a/src/components/cursor.js#L50）

所以在你的组件的init中，如果你想删除游标组件，你需要在组件的初始化中：

if (!canvas) {
      this.el.sceneEl.addEventListener('render-target-loaded', this.init.bind(this));
      return;
}

http://codepen.io/jhsu/pen/XMJQmE

尽管如你所见，你还需要手动删除raycaster

this.el.removeAttribute('raycaster');

要添加cursor组件，您需要传递组件的数据

this.el.setAttribute('cursor', {});

原因是undefined check when instantiating a component。

如何通过实体的setAttribute正确添加和删除游标组件？

1 个答案: