Creating a 3D object in Three.js by mapping texture coordinates (x, y) to object coordinates (x, y

Question

Creating a 3D object in Three.js by mapping texture coordinates (x, y) to object coordinates (x, y

I have a collection of OBJ files along with their respective mipmap texture files. Currently, I am loading the mipmap textures and applying them to the 3D objects generated from these OBJ files. These individual 3D objects come together to create a larger 3D object.

However, I am now interested in utilizing a 2D image as a texture instead of a mipmap. My goal is to overlay this 2D image on top of each 3D object so that the color at each (x,y) coordinate of the object matches the color at the corresponding position in the texture (z-axis can be disregarded). It's acceptable if the texture appears stretched or warped in the process.

In essence, rather than mapping the texture to specific (x,y,z) vertices of the object, my requirement is for it to be mapped to any vertices that share the same (x,y) values. Is there a method within Three.js that allows me to achieve this without the need to extract image data via canvas?

javascript three.js webgl textures

Answer 1

Answer №1

Yes, all you have to do is adjust the UV coordinates for each vertex of your mesh like this:

uv.x = S * (vertex.x + T)
uv.y = S * (vertex.y + T)

Afterwards, apply the texture to your mesh and you should achieve the desired result.

Remember to properly scale and translate the UVs so they fall within the range [0, 1].

Answer 2

Yes, all you have to do is adjust the UV coordinates for each vertex of your mesh like this:

uv.x = S * (vertex.x + T)
uv.y = S * (vertex.y + T)

Afterwards, apply the texture to your mesh and you should achieve the desired result.

Remember to properly scale and translate the UVs so they fall within the range [0, 1].

Creating a 3D object in Three.js by mapping texture coordinates (x, y) to object coordinates (x, y

Answer №1

Similar questions

Manipulating HTML content with jQuery

What methods work best for retrieving non-API data in Next.js when deploying on Vercel?

Is there a way for me to create a wireframe using only squares?

Combining the powers of Nextjs and Vue

There was an error due to a TypeError: The 'page' property cannot be read because it is undefined

Issue with npm package mail-listener2: Attachments not being saved for emails received from Outlook 2016

Angular Universal Resolve

Selenium: The ultimate guide to inserting text within a div element located inside an iframe

Implement event listeners for multiple buttons using Handlebar.js templates, but only the final one will be active

Error: The integer provided in the Stripe payment form is invalid in the

Store the data from the form into the database according to the radio button choice

Struggling to delete a table row using jquery

I am interested in learning how to retrieve the page URL in order to trigger the opening of a menu in my sidenav bar

Is there a method to verify the presence of a message event listener already?

Easily move elements using a jQuery click animation

Retrieve active route information from another component

Leveraging webpack for CSS bundling

Is it possible to create personalized BBCode?

Turn on/off the button click functionality on a jQuery smart wizard control

Is it possible to utilize an API response within a conditional statement in NextJS?