Streaming live at 10am (PST)

Using 3D models in Webflow

Hello. I set out in the wrong direction with this site built. The client asked me to create a 3D animation like this one of the beverage can. I created the mockup of the product in Adobe Dimension. Now Dimension outputs the 3D objects as GLTF, GLB and OBJ. But it turns out WF doesn’t support these formats. From what I know this could be done using three.js. But I need some guidance in this regard. What’s the best direction to follow?

I don’t know if this will help you, but here’s a guide on how to add a 3d model using the three.js - https://redstapler.co/add-3d-model-to-website-threejs . I faced the problem that the model I need is in a format other than OBJ or FBX. For example, this 3d model has a STL and WRL extensions. In this case you can use the Sketchfab or any of the online converters.
Best regards
Peter.

1 Like

We have a decent tutorial here for embedding a 3D model in Webflow, but without three.js How to Add 3D Models in Webflow - YouTube

Rumor has it that @mistercreate is working on a set of tutorials in the not-too-distant future that use some third-party integrations that let you do exactly what you’re looking to achieve!

In the meantime, check out https://spline.design/ — they let you import OBJ files and the like, and their embed code can be added right into a Webflow embed element.

2 Likes

Hi! Please could you check my problem with Spline 3D in Webflow? Sometimes it’s not appearing :sob: Thank you in advance for your help :slight_smile: