How to implement a universal online constructor?

Question

JavaScript

There are two examples of online constructors. I am very interested in the frontend part, what means it is best to implement. Don't think of it as advertising.
constructor on canvas
drag&drop constructor
Is it possible to choose some technology as a base for collecting anything - from a car to a pen - with customization to your "taste"?
For example, I want a visitor in one section to play around with the customization of a car - here the door is yellow, there is red, here is a sticker, complete trash. And in another section, another user assembled a pen for himself - a cap with an eraser in the form of a tank, the ink is green, the outer side is painted under the military, and so on.
Which implementation on the frontend is suitable for both constructors?
Thanks in advance comrades

Answer 1

Universal constructor, this is 3Dmax. Good luck!

Answer 2

You would immediately think: how long will it take to calculate the intersections of the surfaces of several polygonal colliders and their interaction with each other according to their materials with given physical properties.
This is exactly the minimum: native 3D on nvidia CUDA PhysX.
Try to create a few simple objects in Unity3D first - look at the CPU and GPU load.

Answer 3

that is, a clumsy solution - to color parts of the picture in canvas, substituting backgrounds - will not work?
I just have one idea so far: take 3 photos of a car of different colors (red, yellow, blue, for example), cut the pictures into parts (4 doors red, 4 blue, 4 yellow) and simply substitute these pieces in the constructor when the visitor selects front door and presses a certain color on the menu.
I was also offered the option to make a white picture, cut through the part where the background will be substituted on it. for example, cut out the silhouette of a T-shirt, and substitute backgrounds into the void, as if the color of the fabric and texture are changing. the form is preserved, the functionality is performed. won't that work?

Answer 4

Would suggest using SVG.
- We draw in the vector editor a model of a car, a handle, an imperial fighter.
- Give its elements names: id="door", for example.
- Cooking colors and backgrounds.
- We substitute the desired colors, backgrounds, CSS classes using JavaScript.
Of course, the possibilities are limited, but you can think of a lot of things. For example, you can make animation, you can make parts of the picture move. You can also hide and show different parts of the picture depending on the settings, or change their shape on the fly.
I don’t know any ready-made solutions of this kind, but in principle, it seems to me that the thing can turn out to be simple and interesting, convenient enough for many applications.