360 rotation glass vial with water inside

Developer needed

I am looking for some ninja how can build the final file for my web developer. Its first project with Three.js for us. So I am looking for master how will show us the way in the dark.

We need a perfomance on website page:

It should be 4 types of product.

First one is glass ( I am talking about some nice reflections) vial with rubber top, label, and water inside.

Second one and others: paper box, different glass ampule, and plastic doypack.

The main thing is. Rotation 360 for each product by touch. Plus realistic water inside vial and ampule.

It was a main page.

Next type of page is Product page.
Just with one big 3d model of product on screen with functions: 1) 360 rotation as on the main page, 2) Swap to next product of this line.

That’s all) I need it in any form for I can give it to my web master and he build it on our site in few clicks.

I believe its possible anyhow.

Best regards,

This sounds like a nice project, but you will need to manage your expectations here. Liquid inside a transparent bottle is one of the hardest things to do well in real-time 3D, even if the liquid does not move.

See this discussion for more info, and note that the problem is not just related to three.js but probably all WebGL engines.

Not to say you can’t make something that looks great, but it will take a lot of work and experimentation. It’s not one of the things that can currently be done out of the box.

Perhaps depth peel would give good results - there’s links to examples by @pailhead in the link above. I’m not sure if it’s performant enough for mobile devices though.

1 Like

Hi @Luckykonstantin,

I can help you into this.

Please do connect so that we can discuss it further.

Call/Text : +12122030645
Skype me: live:brianna_1049

Warm Regards,

I agree that physically-realistic realtime liquid simulation is not a good expectation in WebGL, but there are some tricks to get the transparency and simple movement working efficiently… This example is in Unity but the same approach should be possible with threejs: https://twitter.com/minionsart/status/986374665399685121.


Hi! Let’s start with mail!) Luckykonstantin@ya.ru

Thanks @Luckykonstantin for sharing your emial id.

I just send you an email.


1 Like

Thank you @looeee!
Looks like challenge I know) But we need any solution.
If liquid will moves without splashes and drops - its okay!
Like in glass of wine - perfect.
Example: https://www.shutterstock.com/ru/video/clip-1040535497-waving-gold-white-wine-glass-on-defocused

If it will look like a cartoon not realistic - it is also a solution. Better then nothing!)
We will make it stylish anyway)

Hi @donmccurdy! Perfect example. I think it can works) Can you do it for some reward? Or may be you know some one who will…

Thanks @briannaJ, answer already)

Hi there i can help you

1 Like

Hope so! My mail is luckykonstantin@ya.ru

This topic was automatically closed after 30 days. New replies are no longer allowed.