#EXPORT FROM MAGICAVOXEL HOW TO#
#EXPORT FROM MAGICAVOXEL CODE#

That makes things way cleaner because you can know for sure there is nothing leaking to the global scope.Īs for the code itself, it's really simple: we just import the loader library, instantiate it and pass it the name of the. Fortunately, Three.js also provides module versions of everything. Anyway, everybody on the internet ended up relying on these helper libraries, so I guess it's safe to use them.Īlso notice I'm using the ES6 module version of these libraries. It gives me the impression that I can't rely on them, since they are just examples, not guaranteed to be maintained. I just find it a bit weird how important pieces of the Three.js library are found in the 'examples' folder (notice the path in the import statement above). Three.js comes with a helper library called OBJLoader2 that does just what it says.

#EXPORT FROM MAGICAVOXEL HOW TO#

You can check the source code of this page for the complete example of how to do it, but the core code needed is this: One and modified it to make it cleaner and easier to read. obj files is not the focus of this article as there are countless examples on the internet on how to do it. Rotate it and try to come up with a better solution (i.e., with less triangles) for the L-shaped faces if you do, please don't forget to write a paper about it 🙂. Notice, however, that the triangle count is as low as possible for this object. Notice that the object still is a single mesh, although now there are more triangles. Now let's make the model a bit more complex by removing one of the voxels of the cube: But how will it look if the model gets more complex? Cube with an eroded corner Every face of the 2x2x2 cube turned into a pair of triangles, proving MagicaVoxel did a good job exporting voxels into a single, efficient mesh. Rotate it a bit to understand how voxels were merged. obj and rendered in Three.js in wireframe mode: This is how it looks in MagicaVoxel:Īnd this is how it looks after being exported to. Let's start with a 2x2x2 cube (.vox model here). to check if exported materials work as well.to confirm that exported meshes are efficient with respect to the number of triangles created.My second fear was that I was going to have a hard time trying to load all the materials correctly also wrong! MagicaVoxel merges voxels of a same object into a single mesh. Thankfully, you will see that's not the case. One of the things I was afraid was that MagicaVoxel was going to export several individual cubes that would be really bad for performance (lots of unnecessary triangles would need to be rendered). obj file? It's a ludicrously well-known file format that's been around for ages. It then occurred to me: why not just export a. The library just threw an exception when I tried the sample code in the readme. Nevertheless, I decided to try it, but it didn't work. This library, but it's been about an year and a half since it was last updated. I googled for an existing library to do that because I didn't want to spend time figuring out how to parse models into meshes right now. I want it to be efficient (i.e., I don't want lots of cubes with hidden faces) and I'd like to be able to see all the materials correctly displayed as well.įor some strange reason (at least for my present self), I first decided I should try directly loading. My goal here is to learn (and share the knowledge of) how to load MagicaVoxel models into a Three.js scene. Also, don't worry about your voxel palette and materials, as both are also exported by MagicaVoxel. vox files (the default format used by the program), but exporting. There is currently no reliable library for loading. TL DR: The best way to have MagicaVoxel models loaded into a Three.js scene is to export. This is an example of what we'll have by the end of this article

Export from magicavoxel