dynamically load aframe entities

Question

I´m building an aframe application, which can dynamically load s from a webservice based on user interaction. These entities are available in text-form. What I need is a way to inject these into the aframe DOM, so that the entities are immediately visible. Is there a way to accomplish this? Neither Google nor the Aframe documentation could help me yet.

Creating entities dinamically works similar to traditional DOM manipulation using document.createElement / setAttribute / appendChild There’s a section in the docs devoted to it aframe.io/docs/0.7.0/introduction/… — Diego Marcos
yes I saw this one. But as far as I can tell, this creates DOM elements one by one. but when I have a nested entity like <a-entity> <a-sphere></a-sphere> <a-light></a-light> </a-entity> is there a way to handle this without parsing it, and creating the DOM elements seperately? — blckwngd
Sure, you can. el.innerHMTL = “<a-entity> <a-sphere></a-sphere> <a-light></a-light> </a-entity>“ That’s how regular DOM works not specific to A-Frame — Diego Marcos
Thank you Diego! I didn´t assume that A-Frame handles innerHTML correctly - but it does exactly what I need. I guess i was blind on this eye. — blckwngd

Diego Marcos Diego Marcos · Accepted Answer · 2018-01-30T22:21:14

You can create and configure the entities individually using document.createElement / setAttribute / appendChild. There's a section in the docs devoted to it.

You can also manipulate the innerHTML value directly:

el.innerHMTL = "<a-entity> <a-sphere></a-sphere> <a-light></a-light> </a-entity>"

None of the above it is A-Frame specific, you just use the regular DOM APIs to compose your scene

dynamically load aframe entities

1 Answers