Clean ways to create lots of cubes in AFrame.io

Question

I have a system, which reads SVG image, and then generates voxel world based on that data. Basically, the SVG image tells the program, where to put which block.

Up to now it worked for Minecraft, but I want to change it so that it create voxel-worlds in a browser-friendly way (ie so that people can look at the model without installing Minecraft and required infrastructure).

There will be lots of cubes there. One obvious method is to generate the HTML page with lots of <a-box position="-1 0.5 -3" rotation="0 0 0" color="#4CC3D9"></a-box> statements, but I assume it's not elegant and can lead to problems with large models.

What are my options in creating AFrame.io-based voxel worlds in an external (non-JavaScript) application? I seek a solution, which will work in a headless mode (ie I send the SVG file to a server and there it converts it to a AFrame.io voxel world).

Answer 1

Have a look at examples like https://ngokevin.github.io/aframe-magicavoxel-projects/ using https://github.com/ngokevin/aframe-magicavoxel-projects it might be enough for your needs.

As far as I understand either your merge to an object and get performance but no flexibility or you don't merge but expect a performance hit. Without measuring and having a rough estimation of both the size of your scene and your target platform I would say... try without merging or exporting first.

Answer 2

You can use the template component: https://github.com/ngokevin/aframe-template-component/ . This way you can use for loops in HTML.

Or entity generator component: https://github.com/ngokevin/aframe-entity-generator-component . Pass it a mixin and it will create X number of entities using that mixin. Then you can combine with other components like layout or randomizer to customize