How to achieve 3D objects rotate to mouse?

Design help Animations & Interactions
1

Hi All,

I’d like to add some 3D elements like on this site which respond to the mouse movement.

Can anyone give pointers as to how to achieve something like this in webflow?

I already have my models in gltf format.

Many thanks

  • Andy
2

Hi, @dataDRVN :wave:

This is not a 3D models, it’s just flat PNG layered images. You can see the principle of how it works at the Webflow University: Transforms | Webflow University

3

Thx for the response Dimitry…

Appreciate your comments, but I think you’ll find it isn’t using the png technique.

I’m aware of the png technique with bodymovin, but that would only allow for one axis rotation From the rendered images.

Anyone else have any thoughts?

4

Need more details about what you want to do. Specifically, in the example you showed above, a static illustration consisting of several parts (not a sequence) is used:

Снимок экрана 2020-09-19 в 15.26.35
Снимок экрана 2020-09-19 в 15.26.351666×1274 483 KB

5

Hi Dimitry,

I am trying to add 3D functionality to my page mainly for decoration and to add some webgl interactivity.

Thx again for taking the time to look and my apologies if I confused things saying it was indeed 3D. It really looked like it. I did attempt to look at the code but I thought the svg was just something for the mobile version with my limited knowledge.

Upon further inspection I can see that all they have done is cleverly placed some child svgs in different z depths. I wouldn’t have seen that without your pointer so thank you.

I did find a 3D webGL plugin which shows some great potential : https://www.soft8soft.com

sharing here incase yourself or others are interested. If I have success I’ll share on this thread too.

Best,
Andy

1 Like
6

Looks cool, suitable for some highly specialized websites. For ordinary websites, in real conditions, when most of the users use smartphones, the use of soft8soft is unacceptable.

For experiment, I tried to open this page: Real Time 3D Demo | 3D Visualization on a smartphone (page load is very long and the page is slow with little glitches).

So svg+Webflow is the power😊

7

For sure… LOVING webflow.

I tried that quadcopter demo, even on my desktop was slow… but you’re right, for specialize maybe it’s useful. I also watched tutorials on adding interaction. The result was great, but so, so involved to make that happen.

I believe A frame works on mobile. will look in to that and share back.

Until then, for sure svg’s is where it’s at.