Question

I have several OBJ files with associated mipmap texture files. I load the mipmap as a texture and map it to the 3D object that results from loading each OBJ file. The 3D objects, when rendered together, form the parts of a larger 3D object.

Instead of using a mipmap, I want to use a 2D image as a texture and “drop” it on top of the 3D object, so that the color of each (x,y) in the 3D object corresponds to the color at the (x,y) position of the texture (z is not important– stretched/warped texture is OK).

Basically, instead of mapping the texture to (x,y,z) vertices in the object, I just need it mapped to any vertices with the same (x,y). Is there a way to do this with Three.js without having to read the image data in canvas?

Answer 1

Sure, you just need to change the UVs of each vertex of your mesh lik so:

uv.x = C * ( vertex.x + A )
uv.y = C * ( vertex.y + A )

Then assign the texture to your mesh, and you should get what you want.

You have to apply a scale/translation factor appropriately as noted above, so the UVs end up in the range [0, 1].