Modeling textures in shoe surface

Questions
, ,
1

Hi there, I’m building a web tool to model different textures (based on pictures) on the surface of a shoe shape (this can be either in 2D or 3D - the decision is based on the complexity and possibilities). These textures should be visible simultaneously (not on top of each other by overlay, but next to each other and limited by a vector or a straight line, a slide-in handle or something).

Here’s an example of what I’m trying to achieve (don’t mind the “border” panel):

1040×468

Instead of the “area” panel, I’d rather have the picture to be placed on the shoe in a way that could be dragged around (within the shoe area) and its edges redimensioned as a mask would behave. In any case, if this cannot be achieved, then having the predefined areas - as the example shows - to set the limit where the texture would be applied is also ok.

I haven’t found anything similar so I’m still researching the best way to develop it. Disclosure: I’m a web developer but I have zero experience with Three.js.

Thank you! :slight_smile:

2

Not sure if I understand what you mean.

If what you’d like to achieve is placing images on the model, it could be done using decals - but they can get messy and stretch - or you can give CanvasTexture (docs) a try - mixed together with uv raycasting to determine where the image should be placed on the model.
Cast images should then nicely wrap around the edges of the surfaces and, if used with a large canvas, retain HD quality.

Generally what you try to achieve greatly depends on what your model looks like - if you have all these sections of the shoe separated in the model (with separate materials), you could just as well get away with simple raycasting and changing the material :thinking: