当显式调用AFrame组件的remove（）时，无法读取未定义错误的属性'object3D'

Question

我正在为AFrame编写自定义计时器组件。通过将多个three.js object3D分组，使用基本Three.js制作计时器，最后使用

设置为实体（el）

seconds = new THREE.Object3D();
parent1 = new THREE.Object3D();
seconds.add(parent1);
parent2 = new THREE.Object3D();
seconds.add(parent2);    
this.el.setObject3D('Mesh', seconds);

计时器工作正常。但是当我调用remove（）时，其中包含以下代码。

this.el.removeObject3D('Mesh');

我收到错误Uncaught TypeError：无法读取未定义的属性'object3D'。 我登录了el.object3D，类型为“组”，但秒为“ Object3D”。

我需要从场景中删除该组件。我该怎么做才能解决此问题？ 请在故障link上找到组件的代码  谢谢。

Answer 1

两个选项：

使用DOM API删除实体：

var clock=document.getElementById("timer");
document.querySelector("a-scene").removeChild(clock);

修改后的glitch

您还可以从实体中删除组件：

var clock=document.getElementById("timer");
clock.removeAttribute('timer-component');

glitch

并不是直接调用remove方法，而是从实体中的component is detached或从DOM中删除实体时自动调用的生命周期方法。