![]() ![]() One way to fix this would be to bake a texture image for each individual cube face. It needed to keep them separated so it could apply a different color to each individual voxel face. Voxels are no longer merged! Due to each voxel having a different color, MagicaVoxel was not able to simplify the mesh. To see it, we need to enter wireframe mode: obj and loading it in Three.js, this is what we get: To apply it to the object in the scene, the code change is simple: we just need to load the material before the object is loaded. For this next test, I am going to modify the original 2x2x2 cube and add different colors to the voxels. Our plan now is to use those two extra files to properly load the materials of our model. png one to obtain the colors used by each material. It's a 256x1 image where each pixel maps to a color in the palette. png is nothing more than the very palette used by you when making your model in MagicaVoxel. mtl file contains instructions about the materials used in the model and to which faces they should be applied and the. obj file in MagicaVoxel also generates a. Once it is (asynchronously) loaded, we add the loaded mesh into the scene and we're done. 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. 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).
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |