Hi guys,
We are developing Interactive Sports Wear design Webapp
https://djerseydesign.firebaseapp.com/ (our project)
We want to implement a feature that user can place logo desired position with dragging
https://airxteamwear.com.au/#/customise/57277342?basketIndex=0 (reference)
after researching we found this
https://threejs.org/examples/webgl_raycast_texture.html
can anyone explain how to achieve logo placement feature
Thank you
Shouldn’t be there a limit on where to place the logo? (like not over seams)
Asides you can do what the example does, perform a raycast against the product and use the uv coordinates object returned to place the logo on.
Here is a simple example how to use multiple layers as texture: https://codepen.io/Fyrestar/pen/xvRpxa
To limit the coordinates such as to prevent placing over stitches you need a 2D contour based on the UV map, defining the placeable areas and check it with a rectangle/polygon vs polygon intersection test.