How to Integrate your Spline 3D Creations in Vev

Give your web designs some added "oomph" with our Spline 3D tutorial, and never look back!

Web design is a vibrant, ever-evolving space with fast-changing trends. The spotlight today is on vivid, immersive experiences that truly engage. The key? Incorporating 3D elements. This might seem a bit out of reach if you're not a seasoned 3D designer, but what if we told you it’s far from impossible? In this article, we’ll guide you step-by-step through integrating your Spline 3D creations in Vev—even if you’re completely new to 3D web design.

What is Spline?

Spline is a 3D design tool that makes it very accessible to craft stunning 3D creation with ease. The intuitive interface and real-time collaboration features make creating intricate 3D models directly in your browser a seamless experience. Whether you are a seasoned 3D designer or just starting out, Spline opens up the world of 3D design in the most accessible and user-friendly way possible.

Step-by-Step: Vev x Spline 3D Tutorial

Maybe you've crafted an immersive storytelling piece or a microsite in Vev, and you're searching for that additional touch to make it truly engaging. Vev offers a broad range of integrations, and Spline is certainly part of that lineup. In fact, our newly released Spline element makes it even more effortless to use this powercombo.

Now, let us guide you through the process, from the vantage point of a new Spline user who’s just getting started. If you’re an experienced Spline user, then head straight to Step 5.

Step 1: Browse through Spline’s pre-made library and community

You might have a rough idea of the 3D element you envision for your site, but are uncertain about where to begin. Fortunately, Spline offers a robust 3D library categorized by type, such as icons, drag-and-drop elements, and even cartoon characters! Additionally, there's a vibrant community tab where experienced Spline users share their creations for you to repurpose as you wish.

For this guide, we’re using a centerpiece 3D element called “Noise Displace” – found under the Interactive 3D category in the library – to place on the hero banner.

Step 2: Let’s customize — background & interaction

Since we’re going to use Spline as an element, rather than section, we need to make the background transparent so it seamlessly blends into our existing Vev section. To do this, click "BG color" under “Scene” on the right side panel and reduce the opacity to zero.

As for interactions, this element comes with a default state transition event, meaning it will loop infinitely to create dynamism on the page. To customize the interactions, play around with the “States'' and “Events”. You can create varying states that deviate from the base state and generate an event for it to transition, animate, or even produce sounds.

Step 3: Let’s customize — colors & texture  

Now comes the fun part. Let's personalize the sphere! First, select the “Sphere” on the left side panel. Under “Material,” you'll find parameters designed for this element. To infuse some of your own personal color to it, adjust the “Fresnel” or the main “Color,” or even modify the shape materials as you see fit.

Step 4: Adjust settings

Before embedding this into our Vev project, let's adjust the play settings to ensure optimal behavior. In this case, we are disabling settings such as Page Scroll, Orbit, Pin, Zoom, and Soft Orbit to best serve the purpose of this 3D element.

Step 5: Embed your Spline 3D creations in Vev 

Once you've finalized your customization, the next step is to integrate it into Vev. To do this, simply click on "Export," followed by "Copy Link" within the Public URL tab. This will provide you with the public URL you need for embedding.

Check Out Our Spline 3D Creation in Vev

Here is the final project 🥳 In the spirit of experimentation, we incorporated 3D mushrooms from the library and created a transition event that makes them to grow as you scroll down. We also added a mesmerizing, Apple Vision Pro-like interactive element at the end shared by a community user.

Imagine the countless ways you could customize these Spline 3D creations to fit your brand, and elevate your Vev designs. 😍

Start playing with 3D web design

With Vev, weaving 3D web design into landing pages and websites is now easier than ever. Simply use our Spline 3D integration (as explained above), upload your own GLB files, or choose one from popular libraries through our pre-coded 3D object component. Publish your site anywhere on the web when you’re ready—either hosting with us, publishing to an existing hosting, or embedding your design into another tool.