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 - Add 3D Model to WebSite in 5 Minutes - Three.js Tutorial - Red Stapler . 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.

2 Likes

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

3 Likes

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.

4 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:

I think you could use Linky3d.com (https://Linky3d.com) for that.
It is a site that helps you to simply embed 3D models into your webpage.

1 Like