How to use uv unwarp to map to 3D model in threejs


this is my chair uv unwrap(png) exported from blender, how could I map to 3D object in threejs
like if I draw line on uv unwrap(2D), it will appear on 3D object on correct position

my chair:

SheenChair.gltf (20.2 KB)

Usually we just do this kind of thing in Blender and then export again as .glb

But if you have to do it in threejs:

let tex = new THREE.TextureLoader().load( “YOUR TEXTURE.jpg/png/whatever” );
gltf.scene.traverse(e=>e.isMesh && (e.material.map = tex));

It looks like you have two UV mappings in this file, with different textures in the model already configured to use different UVs - .aoMap uses the 2nd UV, everything else uses the 1st. You can print mesh.geometry.attributes to see which attributes it has, and texture.channel to see which UV it uses.

I’m not sure what you mean about drawing lines on UVs, though.. If you modify the texture (in code? in Photoshop?) it will appear on the mesh at the position corresponding to those UVs, yes. If you’re not sure where to draw on the texture, you might want to dive a bit deeper into software like Blender to learn about texture painting — that is almost always done outside of three.js.