3D hero image formatting/interactions help

As the title states, I am trying to figure out how I would go about adding/creating a 3D image from either a 2D image, or by uploading a supported 3D image format, that would allow me to isolate a single subject to respond visually in 3D to a mouse or scroll interaction.

Something similar to the lions head on this website: https://www.finsweet.com/, but using a portrait image of something, a portrait of a person for example.

So two questions to sum this up:

  • What type of file would I need to create, that is supported by Webflow, to achieve this?

  • Any suggestions on methods/programs/tools for taking/creating a 3D photo of a person? I have access to an iPhone 11 with dual camera lenses which should theoretically allow for the depth required to create at least some limited rotation of a 3D image (only really looking for about 30° or so of rotation scope, just enough to make a convincing mimic of 3D since idk how I would manage a full 360° image without more advanced gear/stitching multiple images).

  • Thanks in advance!


Here is my public share link (only included for posting requirement, still very much in experimental phase): Webflow - LUX Design

One option could be to use Spline

A similar option is Vectary

To generate a 3d head from photos you could use this (no need for an account) and possibly edit in blender

Others could include custom WebGL, a rendered sequence as a lottie, a lottie.
(Maybe I missed some others… )

1 Like

These look pretty good, I’m not sure if the exact thing I’m looking for is even possible yet honestly.
Specifically I am trying to take an image of myself taking a photograph with a digital camera (similar to the one currently on my site, but centered so I don’t have the straight cropped edges on the left and below), and allow just enough rotation to give it a dynamic 3D feel while still maintaining as much of the images quality as possible, basically a depth map with alpha transparency to remove the background and allow slight rotation of the image subject.

It seems like it should be possible with the iphone 11’s camera since there are multiple depth sensing lenses that allow for portrait modes, just need to figure out if there is an app or a something that can do that and also export it in a format that is accepted by, and open to interaction by, Webflow.
Facebook has the 3D image feature that can turn a portrait image into a 3D image that responds to tilting your phone screen, basically I am looking for something similar to that I think, but that isn’t only usable within Facebook. As far as I know the software they use for it is proprietary and only allows you to create and display said images on their platform.
The science behind it as I understand it is that the newer iPhones capture a depth map, which should allow for this, but they only seem interested in using it for background blurring in portraits as their native function.

I see…

I found this video about using an iPhine as a scanner iPhone 12 Pro LIDAR Sensor - INCREDIBLE FAST 3D Scanner! - YouTube

what I would do, is clean up the model, apply and maybe fix the texture and take it through spline. And there set its interactivity. (I think is the simplest mathod I know)

this is something similar but it’s all code

but that is even more complicated.

Maybe you can use a image sequence from the iphone, through after effects and then a lottie. But it will probably be quite heavy unless you keep the framerate to a minimum.

so yeah, that is my twopence on this but it doesn’t mean that there isn’t a simpler way out there.

Sorry, I couldnt be of more help.

No worries, I appreciate your efforts! It does seem kind of bonkers that something like this doesn’t exist in a more streamlined fashion these days considering we can get all the necessary data from a pic taken on a phone doesn’t it?