Streaming live at 10am (PST)

Using Blender-made 3D objects in Webflow

#1

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

#2

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

1 Like

#3

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.

0 Likes

#4

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

0 Likes