

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).
Render magicavoxel too pixelated code#
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.
Render magicavoxel too pixelated how to#
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
