Easiest Way of Adding 3D Assets to Your Websites

Easiest Way of Adding 3D Assets to Your Websites

  • Tips & tricks

  • Websites
  • 3D
  • Tips & tricks

  • Websites
  • 3D
  • Tips & tricks

  • Websites
  • 3D

Easiest Way of Adding 3D Assets to Your Websites

In this Framer tutorial, I'm going to show you a new tool that you can use to take your Framer sites to the next level. More specifically, I'm going to show you how you can add crazy 3D objects to your websites without any coding or 3D modeling knowledge.

image of Nandi Muzsik

Posted by

Nandi

3D design interface showcasing customizable glass textures and dynamic material settings with metal and tiling options
3D design interface showcasing customizable glass textures and dynamic material settings with metal and tiling options
3D design interface showcasing customizable glass textures and dynamic material settings with metal and tiling options

Table of contents

Meet Endless tools

Endless tools is a versatile platform that provides an intuitive way to create 3D elements. Whether you’re on the free plan (which is surprisingly capable) or opt for a subscription for added perks, it’s designed for ease and creativity.

For this tutorial, we’ll focus on the object tool and shape tool

Creating with the object tool

Now to get started:

Meet Endless tools

Endless tools is a versatile platform that provides an intuitive way to create 3D elements. Whether you’re on the free plan (which is surprisingly capable) or opt for a subscription for added perks, it’s designed for ease and creativity.

For this tutorial, we’ll focus on the object tool and shape tool

Creating with the object tool

Now to get started:

Meet Endless tools

Endless tools is a versatile platform that provides an intuitive way to create 3D elements. Whether you’re on the free plan (which is surprisingly capable) or opt for a subscription for added perks, it’s designed for ease and creativity.

For this tutorial, we’ll focus on the object tool and shape tool

Creating with the object tool

Now to get started:

Web-based design tool with presets and 'Try for free' CTA

Endless tools website.

Web-based design tool with presets and 'Try for free' CTA

Endless tools website.

Web-based design tool with presets and 'Try for free' CTA

Endless tools website.

After that choose your 3D object:

  • Open the object tool to browse through a library of pre-designed 3D models.

  • Select an object that fits your design—maybe a cube, bowl, or something else entirely.

Awesome! Now you’ll want to customize your object:

  • Use the material selector to choose from a range of textures like metal and glass.

  • Fine-tune properties like color, roughness. Experiment and test out different properties.

Check your lighting and background:

  • Adjust lighting and background options to match your website’s vibe.

  • Trust me, a little tweak here can make your 3D object pop even more.

And finally export your creation:

  • Once satisfied, export your 3D asset as an image, video, or embed code. The embed option is particularly cool for interactive elements.

Pro Tip: Embedding is the best for interactivity, but if you’re aiming for faster load times, consider using an image or video.

After that choose your 3D object:

  • Open the object tool to browse through a library of pre-designed 3D models.

  • Select an object that fits your design—maybe a cube, bowl, or something else entirely.

Awesome! Now you’ll want to customize your object:

  • Use the material selector to choose from a range of textures like metal and glass.

  • Fine-tune properties like color, roughness. Experiment and test out different properties.

Check your lighting and background:

  • Adjust lighting and background options to match your website’s vibe.

  • Trust me, a little tweak here can make your 3D object pop even more.

And finally export your creation:

  • Once satisfied, export your 3D asset as an image, video, or embed code. The embed option is particularly cool for interactive elements.

Pro Tip: Embedding is the best for interactivity, but if you’re aiming for faster load times, consider using an image or video.

After that choose your 3D object:

  • Open the object tool to browse through a library of pre-designed 3D models.

  • Select an object that fits your design—maybe a cube, bowl, or something else entirely.

Awesome! Now you’ll want to customize your object:

  • Use the material selector to choose from a range of textures like metal and glass.

  • Fine-tune properties like color, roughness. Experiment and test out different properties.

Check your lighting and background:

  • Adjust lighting and background options to match your website’s vibe.

  • Trust me, a little tweak here can make your 3D object pop even more.

And finally export your creation:

  • Once satisfied, export your 3D asset as an image, video, or embed code. The embed option is particularly cool for interactive elements.

Pro Tip: Embedding is the best for interactivity, but if you’re aiming for faster load times, consider using an image or video.

3D design tool showcasing a textured dice model with material and artifact options

Cube on object tool.

3D design tool showcasing a textured dice model with material and artifact options

Cube on object tool.

3D design tool showcasing a textured dice model with material and artifact options

Cube on object tool.

Shaping up with the shape tool

Here’s where we turn your own designs into 3D assets. We’re going to use the Shape Tool.

Drag and drop your SVG file—for example, a logo—into the Shape Tool.

Endless Tools instantly transforms your flat SVG into a 3D masterpiece.

Adjust depth, material and more for that perfect look.

Shaping up with the shape tool

Here’s where we turn your own designs into 3D assets. We’re going to use the Shape Tool.

Drag and drop your SVG file—for example, a logo—into the Shape Tool.

Endless Tools instantly transforms your flat SVG into a 3D masterpiece.

Adjust depth, material and more for that perfect look.

Shaping up with the shape tool

Here’s where we turn your own designs into 3D assets. We’re going to use the Shape Tool.

Drag and drop your SVG file—for example, a logo—into the Shape Tool.

Endless Tools instantly transforms your flat SVG into a 3D masterpiece.

Adjust depth, material and more for that perfect look.

3D modeling interface displaying a geometric shape with customizable fabric and metal textures

3D Framer university logo.

3D modeling interface displaying a geometric shape with customizable fabric and metal textures

3D Framer university logo.

3D modeling interface displaying a geometric shape with customizable fabric and metal textures

3D Framer university logo.

Experiment with materials:

  • Play with different textures and colors to add personality to your design. Endless Tools even lets you create custom materials by uploading your own color maps.

Export your design:

  • Save your creation as an image, video, or embed code. Videos work great for dynamic visuals, while images are perfect for quick loading.

Experiment with materials:

  • Play with different textures and colors to add personality to your design. Endless Tools even lets you create custom materials by uploading your own color maps.

Export your design:

  • Save your creation as an image, video, or embed code. Videos work great for dynamic visuals, while images are perfect for quick loading.

Experiment with materials:

  • Play with different textures and colors to add personality to your design. Endless Tools even lets you create custom materials by uploading your own color maps.

Export your design:

  • Save your creation as an image, video, or embed code. Videos work great for dynamic visuals, while images are perfect for quick loading.

Adding 3D assets to your Framer project

Now that you’ve got your shiny new 3D assets, let’s bring them into Framer.

Create a new project or open an existing one on Framer

Drag your exported 3D image or video directly into your project.

For videos, use Framer university’s scroll media component to make your asset play on scroll.

Set up the scroll container

  • Draw a Frame: Use the tool to draw a frame.

  • Name the Frame: Rename it to "Scroll Container".

  • Set height to 2700px (this defines the scrollable area).

  • Remove Fill Color.

  • In the right panel, set the direction to Vertical, distribute to Start, and Gap to 0. To convert to a stack.

Create a sticky frame

Add another frame Inside: Place a frame within the scroll container.

Adjust the settings to:

  • Width: Set to Fill.

  • Height: Set to 100vh (viewport height). If it changes to 30vh, manually correct it.

Remove fill color.

Enable stack layout for this frame as well.

Rename this frame as "sticky".

Adding 3D assets to your Framer project

Now that you’ve got your shiny new 3D assets, let’s bring them into Framer.

Create a new project or open an existing one on Framer

Drag your exported 3D image or video directly into your project.

For videos, use Framer university’s scroll media component to make your asset play on scroll.

Set up the scroll container

  • Draw a Frame: Use the tool to draw a frame.

  • Name the Frame: Rename it to "Scroll Container".

  • Set height to 2700px (this defines the scrollable area).

  • Remove Fill Color.

  • In the right panel, set the direction to Vertical, distribute to Start, and Gap to 0. To convert to a stack.

Create a sticky frame

Add another frame Inside: Place a frame within the scroll container.

Adjust the settings to:

  • Width: Set to Fill.

  • Height: Set to 100vh (viewport height). If it changes to 30vh, manually correct it.

Remove fill color.

Enable stack layout for this frame as well.

Rename this frame as "sticky".

Adding 3D assets to your Framer project

Now that you’ve got your shiny new 3D assets, let’s bring them into Framer.

Create a new project or open an existing one on Framer

Drag your exported 3D image or video directly into your project.

For videos, use Framer university’s scroll media component to make your asset play on scroll.

Set up the scroll container

  • Draw a Frame: Use the tool to draw a frame.

  • Name the Frame: Rename it to "Scroll Container".

  • Set height to 2700px (this defines the scrollable area).

  • Remove Fill Color.

  • In the right panel, set the direction to Vertical, distribute to Start, and Gap to 0. To convert to a stack.

Create a sticky frame

Add another frame Inside: Place a frame within the scroll container.

Adjust the settings to:

  • Width: Set to Fill.

  • Height: Set to 100vh (viewport height). If it changes to 30vh, manually correct it.

Remove fill color.

Enable stack layout for this frame as well.

Rename this frame as "sticky".

Adjusting frame size and setting to sticky.

Adjusting frame size and setting to sticky.

Adjusting frame size and setting to sticky.

Fix sticky positioning

  • Set all parent frames (Scroll Container, Main, and Desktop) to Overflow: Visible.

  • This ensures the sticky frame remains in the viewport as you scroll.

Add additional elements

Place a frame below the "sticky" frame.

Adjust settings:

  • Height: Set to 800px.

  • Remove fill color.

  • Convert to stack: Enable stack layout.

Now you can add a text element within this frame.

  • Width: Set to Fill.

  • Text Size: Set to Fit for responsive scaling.

  • Rename: Label this frame as "text".

  • Add padding: Adjust left and right padding for better alignment.

Layer and style the text

Set the text container’s Z-index to a higher value (e.g., 2) to ensure it appears above the sticky frame.

Add blend modes:

  • Navigate to right panel > styles > blending.

  • Apply the "difference" blend mode for a more dynamic effect.

Final thoughts

And there you have it—the easiest way to add 3D assets to your website using Endless Tools and Framer.

Have fun building!

Fix sticky positioning

  • Set all parent frames (Scroll Container, Main, and Desktop) to Overflow: Visible.

  • This ensures the sticky frame remains in the viewport as you scroll.

Add additional elements

Place a frame below the "sticky" frame.

Adjust settings:

  • Height: Set to 800px.

  • Remove fill color.

  • Convert to stack: Enable stack layout.

Now you can add a text element within this frame.

  • Width: Set to Fill.

  • Text Size: Set to Fit for responsive scaling.

  • Rename: Label this frame as "text".

  • Add padding: Adjust left and right padding for better alignment.

Layer and style the text

Set the text container’s Z-index to a higher value (e.g., 2) to ensure it appears above the sticky frame.

Add blend modes:

  • Navigate to right panel > styles > blending.

  • Apply the "difference" blend mode for a more dynamic effect.

Final thoughts

And there you have it—the easiest way to add 3D assets to your website using Endless Tools and Framer.

Have fun building!

Fix sticky positioning

  • Set all parent frames (Scroll Container, Main, and Desktop) to Overflow: Visible.

  • This ensures the sticky frame remains in the viewport as you scroll.

Add additional elements

Place a frame below the "sticky" frame.

Adjust settings:

  • Height: Set to 800px.

  • Remove fill color.

  • Convert to stack: Enable stack layout.

Now you can add a text element within this frame.

  • Width: Set to Fill.

  • Text Size: Set to Fit for responsive scaling.

  • Rename: Label this frame as "text".

  • Add padding: Adjust left and right padding for better alignment.

Layer and style the text

Set the text container’s Z-index to a higher value (e.g., 2) to ensure it appears above the sticky frame.

Add blend modes:

  • Navigate to right panel > styles > blending.

  • Apply the "difference" blend mode for a more dynamic effect.

Final thoughts

And there you have it—the easiest way to add 3D assets to your website using Endless Tools and Framer.

Have fun building!

Framer Navigator

Learn the fundamentals of Framer for free.

Build your ideas with ease by learning the basics of website building with Framer.

Nandi portrait's background
Nandi's portrait

Framer Navigator

Learn the fundamentals of Framer for free.

Build your ideas with ease by learning the basics of website building with Framer.

Nandi portrait's background
Nandi's portrait

Framer Navigator

Learn the fundamentals of Framer for free.

Build your ideas with ease by learning the basics of website building with Framer.

Nandi portrait's background
Nandi's portrait

More posts

More posts

  • Collage of modern technology items with a horizontal scroll arrow, including a turntable, musical equipment, and a vintage computer

    How to Add Horizontal Scrolling to Framer Sites

    Guide

    Collage of modern technology items with a horizontal scroll arrow, including a turntable, musical equipment, and a vintage computer

    How to Add Horizontal Scrolling to Framer Sites

    Guide

    Collage of modern technology items with a horizontal scroll arrow, including a turntable, musical equipment, and a vintage computer

    How to Add Horizontal Scrolling to Framer Sites

    Guide

  • Interactive chat bubble with emoji reactions and text stating 'Liquid animation? Easy...' with a cursor icon for interaction

    How to Create Fluid Animations in Framer

    Guide

    Interactive chat bubble with emoji reactions and text stating 'Liquid animation? Easy...' with a cursor icon for interaction

    How to Create Fluid Animations in Framer

    Guide

    Interactive chat bubble with emoji reactions and text stating 'Liquid animation? Easy...' with a cursor icon for interaction

    How to Create Fluid Animations in Framer

    Guide

Nandi Muzsik

How can I improve Framer Uni?

Let me know if there’s a missing feature or something that could be improved.

Share feedback

Nandi Muzsik

How can I improve Framer Uni?

Let me know if there’s a missing feature or something that could be improved.

Share feedback