Streaming live at 10am (PST)

Using Blender-made 3D objects in Webflow

Hello! I’m having a hard time finding resources on how to incorporate 3D objects/animations into Webflow websites and interacting with them using interactions/scroll/movement of the mouse. Could anyone help point me in the right direction or perhaps show me how you’ve done it? For example, I’d like to animate a laptop that opens up as it scrolls into view and rotates with mouse movement. I would like to import models/animations from Blender.

-Scott

1 Like

Bump. Surely someone has worked with 3D objects in Webflow by now? @Waldo Maybe you could help?

1 Like

Hi, I haven’t seen so many Webflow website making good use of nice 3D embeds and I have that on my todolist for years now :slight_smile:

As far as I know, there are 2 “industry standards” ways to incorporate 3D scenes in a webpage:

  • https://threejs.org/ is a JS library that’s handling 3D. I think it’s used on the header of https://panic.com/transmit/ let it load and scroll up and watch the camera angle filming the truck… Very nice integration.

  • Sketchfab: it’s an acclaimed service that allows you to publish, share and embed your 3D things. Demo right on their header: https://sketchfab.com/

There are other services like Sketchfab, one is modelo.io.

3 Likes

Hi Scott,

I’ve not done anything with 3D and the internet in years since Flash and thought of VRML, it’s outdated now (getting old) but there’s this resource via w3c.org - http://www.web3d.org/.

Could you render out the laptop animation and then just tween the frames with interactions in Webflow? This was how I used to do similar things to keep file sizes down in Flash.
Best, Sam

It’s possible, these guys have done it webdesire. They just added a script to before closing tag and they’ve figured out how to load remote files using three.js. I’ve came across two potential methods for using three.js with Webflow

  1. as an example you can import a class from github as follows

import { OBJLoader } from 'https://threejs.org/examples/jsm/loaders/OBJLoader.js';

You can then initialise a loader object to pull through the model. I haven’t came across any tutorials that explain how to use this properly which isn’t surprising because three.js isn’t used very often. The best I could find is this:

skillshare three.js tutorial

You’ll learn the basics here - and you can get a 14 day free trial (course is only an hour). This is the method that webdesire have used - they’ve somehow managed to upload a png file, to Webflow assets, as their texture and then animate it with a script. This tells me you just have to be creative to get it to work.

  1. The second method involves uploading your files as .txt files, to Webflow assets (10MB max size), and then referencing them as follows:

<script type="text/javascript" src="https://uploads-ssl.webflow.com/url.min.js.txt"></script>

Before you upload the file you can edit its type by appending .txt at the end of it. So far this has worked for json, js and obj files for me. Theoretically this should give you access to all the code inside the .txt files.

I’m yet to figure this out but this might give you enough of an idea to try a few things on you’re end. I’ve created basic 3D animations, using default shapes, and the next stage is to learn how to import custom models. Once I’ve got it I’ll be straight back here to update you guys. Good luck!

1 Like

Hey @sanindo! Thanks for your comments here. Any update about this from your end? Can you showcase some of your best results using these methods? Looking to implement something similar.

Thanks!

Hey man! So I’ve been trying to get this to work, on a private server developed with node, but I’m having difficulty using the GLTF and OBJ loaders (used for loading in 3D graphics). So far I’ve only been able to render a basic 3D shape in my private server and in Webflow. Here’s my read only link 3D cube

I was able to use Orbit controls (for interacting with the cube) and the three.js.min library by uploading .txt files to my Webflow assets using the method I described earlier. I’ll be back here once I’ve figured out my issues using the 3D object loaders. Hope this helps!

Looks like you’ll have to export to a preview site for me to see this. “This embed will only appear on the published/exported site”. Would love to take a look!

Thanks!

Oh yeah, my bad! Forgot to paste the link… here it is dude 3D cube site