How I integrated interactive 3D models into my website, without writing complex code?

The Problem.

While working on a website, I decided to include 3D models in the hero section. I aimed to make the scene interactive and add some animations to make it more engaging.

Common Approach.

The result could be achieved with the help of Three Js, however, it was a little cumbersome to write all the code, and iterating on ideas would be time-consuming.

The Solution.

Spline is a design tool, that can be used to create 3D web experiences. It provides a graphical solution to create outstanding visuals, animate them and make them interactive. It is supported across multiple platforms, has collaborative features, and has an amazing template and tutorial library.

Steps Involved -

• Importing 3D models

  

  To create my models for the scene, I first used Blender for modeling and imported them into Spline, though you can get them from online stores like Sketchfab.

  Spline supports various formats for 3D models, such as gltf, fbx, and obj. Additionally, images in PNG and JPG formats and logos in SVG format can also be easily imported into the scene.

• Using built-in library

  

  To quickly fill up the scene, I copied some components from Spline's existing library.

  The tool comes with a pre-built library that contains numerous components and scenes, which can save a lot of development time.

  In addition to copying components, scenes can also serve as helpful references for learning and getting new ideas.

• Events and Animations

  

  I incorporated opening events and mouse hover events into the scene.

  Spline operates on a states-based system, where developers can define multiple states and transition between them based on specific events.

  For instance, we can set various positions for a 3D object and then use a mouse hover event to trigger a transition from one state to another.

• Scene Optimisation

  The export feature in Spline includes a performance test that can help determine various scene metrics, such as export size, loading time, object count, polygon count, and material count.

  If the scene is too heavy, the performance test can provide optimization suggestions, such as reducing the number of objects and materials used in the scene.

• Export to web

  

  Integrating the Spline scene into any website is relatively straightforward. Simply select the Code Export, in the Export options and choose the desired javascript library for export.

  You can also export the scene in other formats, like an Image or a Video file

  Export options are available for Vanilla JS, Three.js, React, and React-Three-Fiber. It's important to note that this is a beta feature, and there may be some instances where Three.js and React-Three-Fiber options may not work.

Final Thoughts

The spline tool is user-friendly and comes with a wide range of features. It performs well, even when handling large scenes, and runs smoothly on low-powered devices. While I was working on the above example, I didn't have the chance to explore all the tool's capabilities, but I'm excited to experiment with more of its features in the future.