$1 MILLION question / interactive videos 3d model / Formlabs

Design help Animations & Interactions
1

Dear friends from Webflow Community,

Do you have any ideas on how to technically create a mind blowing interactive site like this one by Formlabs?

The goal is to create a 3d navigation experience of an industrial product with interactive pins.

It is a site with interactive pins that act as play / stop of video renders that give the illusion of navigating the 3D model of the printer.

The only solutions we are finding concern on-scroll animations of videos / lottie animations but they are not what we are looking for.

Thanks to everyone :grinning:

2

Those are all pre-rendered videos, using a software like Blender or Houdini. It is possible to find the links to those videos from the browser dev console, like this one https://fuse-tour.formlabs.com/Medias/Videos/F1_Optics_Lazor_IN.mp4

The interactive pins seem to be html elements that are displayed on/off depending on which video we are. Their position is defined just in css. And clicking on them replaces the current video.

So in short, there is some javascript to write, but I’m guessing that most of the time went into creating those videos, as the render has a good quality so probably took time to fine tune and render.

Another option to make such website is to have the 3D rendered right in the browser, using WebGL. It won’t look as photorealistic yet, but that opens the door for much more interactivity. (Note, that’s what I specialise in, feel free to ask if you’re curious to know more)

1 Like