Create 3D Art For The Web With Spline

This week, I felt an urge to revisit a concept that I learned a while ago. Around this time last year, I was introduced to three.js, a JavaScript framework for creating interactive 3D objects or environments in the web browser. One thing that was pretty tedious about learning three.js was that there was a lot of manual work that needed to be done to construct geometries via mapping vertices manually. I disliked this and got turned away from the technology due to that. A year later, I've become curious to see if there is an easier way of creating 3D environments for the web. Sure enough, there is! This week, I've tried out Spline. The cool thing about Spline is that it's a three.js project itself. It's still in development, so there are some bugs with the software; however, it enables us to do so much more in a lot less time, which is something I particularly enjoy. If you wish to download Spline yourself and try it out yourself, you can visit their website and download it there. The best part in my opinion is that you can also use Spline in the browser, and the developers have been thoughtful enough to develop a desktop application for M1 Macs, not just Intel Macs (something that MongoDB still hasn't done). I have a background in working with Adobe Illustrator, Adobe Photoshop, and Figma. If you have experience with any of those tools, then Spline should be a pretty easy tool to get used to. If not, think of Spline as a tool where you can place shapes on a canvas, resize them, re-color them, rotate them, etc., and combine them to create composite structures that (possibly) resemble some form of 3D art. I am personally no 3D artist, but I jumped in anyway. I suggest you do the same as well, it's a fun creative experience!

My Scene

One of my favorite experiences is being in a city, on the road, at night. The city hits a point where the streets are very empty, but there are still buildings that light up the area. It almost creates an interesting contradiction that messes with your brain a bit, where the lighting indicates the area should be populated (maybe the brain also thinks it should be daytime) yet it isn't. This is somewhat like a liminal space, a concept that I enjoy exploring from time to time. So I decided to create an environment like this. I wanted to create an intersection populated with street lights and various buildings. Lighting would be important.

Spline shapes

The great thing about Spline is that you do not have to build your geometries using vertices. You can create almost anything that you want from the provided 2D and 3D shapes. I mostly used cubes, squares, and spheres for my design. You are able to re-color the shapes in the right sidebar when selecting a shape. You can also move a shape around using the arrows that appear when selecting a shape (or shift-clicking to select several shapes). The arrows allow you to drag, scale, and rotate on the x, y, and z axes. You can also duplicate shapes in place to ensure alignment. The dedicated alignment tool for Spline is pretty unreliable from what I've noticed, and often results in unexpected behavior. I suggest just duplicating and moving along a single plane for the alignment of common objects.

One thing that was extremely useful for creating my skyscrapers was the Cloner tool. This allows you to repeat a given shape across a linear or grid pattern. If linear, you can specify if it will go in the x, y, or z direction. In a grid, you specify how much space each direction will provide. This determines the spacing between each repeated shape in the grid.

Light Sources

Light sources are very basic in Spline, and I could only really get two of the three lighting sources working properly. There are three lighting sources: point light, directional light, and spotlight. The point light is like a light bulb, shining in all directions. The directional light shines in a particular direction, but I could not get this to work. My issue was that I could not find out where to configure the direction of the light. It seemed to be static. The third lighting effect was the spotlight. I made use of the spot and point lights. You can adjust the depth, intensity, and color of the lighting to create the desired effect. Additionally, you can adjust the angle of spotlights, something I did for the traffic lights I created.

Materials and Lighting

Spline has a fairly limited set of lighting options that you can use, and I stuck to phong lighting on color shapes with no special textures for this basic project. I found that phong lighting effectively reflected the lighting in a way that fit the aesthetic I was going for. The other options for lighting on materials were no lighting, Lambert (probably the worst of them all in terms of how it looks), physical, and toon. Feel free to experiment with these, I just chose a phong for my design.

Fog

There is also the ability to add fog to the environment, which can help when you want to hide where your plane cuts off in the distance. Think about fog in some of our favorite games such as Minecraft. Minecraft uses fog to hide the rendering of chunks ahead of the player, and the de-rendering of chunks behind the player (well, it tries to at least). This is the same concept. Hide the things you don't want the camera to see!

Cameras

You can also create and set cameras up around the scene to set a starting perspective. This is great for setting up perspective angles that you wish to develop. Maybe your site will use a certain perspective of the art, and you want to always be able to get back to that perspective. Set up a camera there, and you're set! The default camera can move freely and you can continue to develop your scene, moving around with that camera, and returning to your custom camera view to check your work.

Exporting

This is where the real magic of Spline happens. You can export your creation as web content! It will zip the content and provide the .js, .html, and .json files necessary for rendering your scene! Not only that, but you can even export your project to a link, where you can preview the project in the browser.

This is where the real magic of Spline happens. You can export your creation as web content! It will zip the content and provide the .js, .html, and .json files necessary for rendering your scene! Not only that, but you can even export your project to a link, where you can preview the project in the browser. If you want to see my creation, check it out here!

Conclusion

Spline is a great way to dive into 3D modeling for the web. It allows you to quickly create composites and beautiful scenes, complete with lighting, exporting, and many more great features. While the project is still young, it has some great potential. If you're looking for a way to make creating 3D models for your website easier, definitely give Spline a try!