How to recreate a 3D cake designer on a website?

Question

css

Hey guys. At work, they asked me to make a 3D cake constructor. So that a person, having entered the site, could "assemble" a cake from different ingredients, choose patterns, colors. And ideally, so that the cake can be twisted from different sides.
Here is an example https://biskitty.com/configurator/frontend
At the same time, cakes can be of different sizes and should look quite realistic (not 170,000 polygons, of course, but more or less - so that it looks tasty in general). Particularly impressive in the example is the effect of a piece of cake popping out and flying back.
How best to approach the implementation, which approach to choose? Making a storyboard from photos is not an option, because there can be quite a lot of cakes. Itself I incline in a variant with webgl. The designer makes a model in 3d max, then the whole thing is displayed in the browser and work with what happens. What are the pros, cons?
Has anyone implemented something like this? I would be glad to hear your advice on this, as for me, an interesting topic.
ps It's been about a year since this project was frozen. But gradually there is an interest in 3D. I started to master CINEMA 4D, I also look at blender, they say it's a good editor.

Answer 1

Everything on this site is done by a set of photos and videos.
If you want to do it in full 3d, then you can use three.js or Blend4Web, for example. It will be faster than from scratch on bare WebGL.

Answer 2

Here is a working example of a builder made with Blend4Web. It is loaded robustly, as the guys stuffed too high-quality models. IMHO, they should have been lighter. And so, a good option for testing on different platforms. You can decide on the suitability of Blend4Web and webgl in general for such tasks.

Answer 3

I would not undertake the implementation in the 3D browser, because this is still a raw (RAW)
option that will not work in the customer's browser, for example.
The most reliable thing is to render videos and rotate the timeline, depicting three de. Fuck with it is guaranteed less, the result is guaranteed to be more stable and almost certainly more beautiful

Answer 4

three.js and forward) in general, this is for a long time!

Answer 5

Ty. Everything is simple there.
There is a gif in which the states are different, for example, 10 pictures of one cake, the first picture is a side view, the last is a top view, and there are transitional states between them. When necessary, we sort through the javascript in turn - this is how we got the effect of 3D turning the cake. Same with toppings.
The inside of the cake is also a picture, it is simply superimposed on top of the photo (!) of the cylinder.
That's all, simple and primitive. Although it looks there at all bombezno.

Answer 6

There is an idea to create a sports ground constructor on the site.
There are pipe racks, there are hinged elements on clamps - horizontal bars, bars, handrails, press benches, etc.
There is a vision of a simple constructor - in a 2D top view, all hinged elements are collected, racks are added automatically, and when switching to 3D, the entire site is already visible.
Maybe there is a vision of how to do it simply, even better.
If there are professionals who can implement this, for clarifications and discussion of payment, write to [email protected]