Project URL: https://spline-isometric-room.glitch.me/
A demo of Spline in an actual website - I integrate an exported Spline model into a website, among many other elements.
The Spline model seen in this webpage is actually an isometric voxel room made by me using MagicaVoxel, a voxel editor.
-
Spline is a really cool software that allows you to create 3D stuff for websites without actual coding, with basically a drag-and-drop editor. Thanks to @jenn for sharing this cool tool and thanks to @Misly (idk the username) for letting me know that it was finally available for Windows and for letting me know that
.objimports are supported. -
MagicaVoxel is a voxel editor that I’ve been obsessed with lately. Basically, a voxel is the three-dimensional version of a pixel, and hence you can create voxel art, just like pixel art!
Spline has an option to export your models into web content, which gives you a ZIP file with the files for a webpage to view your 3D model. However, the webpage allows you to view only the 3D model, and you usually want such cool stuff integrated into your website along with other normal HTML elements, rather than view the model alone with nothing else in the webpage.
The actual model made in MagicaVoxel:
Once I made the voxel room in MagicaVoxel, I exported it to a .obj file, which I then imported into Spline, along with the textures.
Important files:
- All the stuff in the
jsfolder is extremely important. - There’s also an
assetsfolder which can be seen through the terminal, it’s hidden in the editor because it’s empty - it depends on the contents of the model. For example if you have text in your Spline model, it’ll add the font you used into that folder.
The contents of the exported ZIP file of this model (can vary based on content):
