Need Help with Retrieving Coordinates for Repositioning Elements on 2D Texture in three.js, Open to Consultations


I have a series of questions before starting a project.

First of all, I wanted to understand if there’s a consultancy service for questions and in-depth discussions related to three.js and its usage. If yes, I would like to know about the contact method and pricing (we can exchange direct contact).

Regarding the project, we need to create a configurator for jerseys and uniforms that exports the modified texture which will then be input into the machine that will manufacture the garment.

For this post, I will use resources from a different project we made (, but only as an example.

The uniforms will be composed of various meshes that make up the jersey and trousers. SVG textures are applied to these meshes.

The 3D model and textures are exported from a software and are designed in a way that the machine producing the garments can correctly interpret them.

For example:.

When I start the configurator, I load the 3D model, apply the textures

and give the user the ability to change colors and insert logos (I think I will use fabric.js).

Once this is done, I want to export the customized texture so that the company can insert it into the machine that will manufacture the garment.

I’m not sure if it’s possible to do the unwrap from three.js and I find it quite complex anyway. The idea, therefore, is to take the IDs of the colored parts of the texture from the configured 3D model and apply them to the initial SVG, thereby reflecting the changes from the 3D to the 2D SVG file.

The result should be something like:

I don’t see a problem for the colors, but for the logos, I wanted to understand if there’s a way to have the coordinates of the logos inserted via three.js to then correctly report them in the 2D SVG file.

The question is long and detailed but we are also open to a consultation with an expert. I work for the agency called Quamm

Thanks and kind regards,



Since UVs are from 0.0 to 1.0, sounds like all you really need is just:

svgX = texture.u * svg.width
svgY = texture.v * svg.height

And you can get these UV coords straight from Raycaster (example.)

The entire configurator you’ve described is just a mix of CanvasTexture, Decals, and all the configuration info about decal positions stored in a separate data structure - so when the user is finished with designing, you export everything to SVG instead of rendering to WebGL :eyes: