If you are not a 3D game developer, but still would like to bring some 3D content to your website without too much hassle, you could give Spline a try. Lately I played with it a bit by following an online tutorial.
Here’s my finished version you can give it a spin with. And I also put into a testing website to see how it works.
Model scenes
Modeling a 3D scene can be daunting, especially if you have never done any 3D work before. But Spline has made this job quite pleasant, as long as you know how to use Figma like app, you shouldn’t have any problem using it. Of course, you still need to learn how to model the scene, light the scene, as well as applying the material to each model. But in some sense, it’s more like using 2D Photoshop with nice to use interface.
Export scene
Once you’ve finished your scene, in order to view it on our web page, Spline allow you to export it, as you can see in the following export screen, it’s one of its selling point.
The easiest option is the Public URL. This exports the scene and settings into an online file, such as the one I shared, hosted by Spline. This takes seconds after you click Update Public URL. And then you can view it on a browser.
The published version carries the scene data as well as the library Javascript. This means, the published version is also an interactive one. If you don’t disable any settings before exporting, you can get literally most of the navigation functionalities built-in, such as zoom, pan, and orbit etc. This means the viewers of the page can examine the whole design as close you do.
In the production site, you most likely want to disable some of the above Play Settings to suit your site’s need. The good news is that everything is more or less like flipping some flags.
Web Events
More than displaying the scene, Spline supports quite a bit of web events out of box. For instance, an object can change from a state to another one when a web event fires, such as clicking, hovering, or resizing the web pages.
This makes the site quite interacting. Say we want to make a responsive site, on mobile screen we’d like to see less items or more items depending on your design idea, then you can move items around to create two different states for certain objects responding to the resizing events. This also applies to the camera angles, so you can attach two states for the camera to switch in between responding to a mouse scroll event. You can play with the link I shared and see for yourself.
Conclusion
Spline is a very handy tool for quickly bringing 3D interactive content for websites. It’s definitely not a classical 3D engine that I have ever seen, but it can do a lot of tasks real fast. There’s almost no programming involved.
