我有一个 A-Frame 组件，它在某些时候创建了一个“基础”实体，上面挂着一堆子元素（基本上是带有彩色面孔的框）。在完成所有这些子元素（包括网格）之后，我想使用几何合并组件合并它们的几何。问题是当我添加这个组件时，所有子组件都需要完全初始化：否则，子几何将无法正确合并（如果它们在每个子中都不可用）。我认为等待loaded在“基础”实体中被解雇就足够了，代码如下：base.addEventListener('loaded', (e) => { base.setAttribute('geometry-merger', {preserveOriginal: true}); base.setAttribute('material', {vertexColors: 'face'});});（在init我正在编写的组件的功能中）。事实上，它在 Firefox 中就像一个魅力，但在 Chrome 中却不是。我已经对其进行了调试，似乎在 Chrome 中“已加载”是在“基础”实体上触发的，即使几何体（属性3Dobject）仍未在子级中设置（因此，据我了解，它们并没有完全“加载” ”）。所以，问题是：在初始化所有子项时运行的实体的生命周期中是否存在任何事件或某些钩子？我找到了一个最小的例子：cubes-loaded.html和cubes-loaded.js，下面：<!DOCTYPE html><html> <head> <script src="https://aframe.io/releases/0.9.2/aframe.min.js"></script> <script src="cubes-loaded.js"></script> </head> <body> <a-scene> <a-entity cubes position="0 0 -4"></a-entity> </a-scene> </body></html>AFRAME.registerComponent('cubes', { init: function () { this.base = document.createElement('a-entity'); this.base.addEventListener('loaded', (e) => { console.log("Base loaded, child object3DMap:", this.base.children[0].object3DMap); }); this.el.appendChild(this.base); let box = document.createElement('a-entity'); box.setAttribute('geometry', {primitive: 'box'}); this.base.appendChild(box); }, play: function () { console.log("Play run, child object3DMap:", this.base.children[0].object3DMap); }});在 Firefox 中，此示例写道：Base loaded, child object3DMap: Object { mesh: {…} }Play run, child object3DMap: Object { mesh: {…} }在 Chrome 中，这个例子写道：Base loaded, child object3DMap: {}Play run, child object3DMap: {mesh: J}顺便说一句，在其中运行代码play似乎是确保网格在孩子中的好方法。
1 回答
料青山看我应如是
TA贡献1772条经验 获得超8个赞
在玩这个最小的例子时，我想我找到了我的问题的答案。该示例的问题在于，在将子对象附加到DOM之前，已将 base 插入到 DOM 中。这样，“加载”事件就有可能在子项初始化完成之前被触发，显然 Chrome 就是这样做的。在 Firefox 中，似乎在子项初始化之前不会触发事件，至少在这种情况下是这样。
因此，该示例可以通过在将子对象附加到DOM后将其附加到DOM 来修复：
AFRAME.registerComponent('cubes', {
init: function () {
this.base = document.createElement('a-entity');
this.base.addEventListener('loaded', (e) => {
console.log("Base loaded, child object3DMap:", this.base.children[0].object3DMap);
});
let box = document.createElement('a-entity');
box.setAttribute('geometry', {primitive: 'box'});
this.base.appendChild(box);
this.el.appendChild(this.base);
}
});
抱歉打扰了，一旦您了解了附件的顺序，答案就很简单了。
添加回答
举报
0/150
提交
取消