While researching how to map a square texture onto n-sided polyhedrons using a convex hull generator in THREE.js, I found that existing solutions did not fully address my issue. The challenge was to ensure that the texture was not distorted and appeared correctly with perspective on each face of the polyhedrons.
After trying common approaches, I realized that altering the aspect ratio of the texture on non-XY aligned right triangles did not produce the desired result. Therefore, I decided to rotate each face to align with the XY plane before computing the UV coordinates. This method would allow me to map a 1x1 square over the faces, providing a more accurate representation of the texture.
My current solution involves computing the UV coordinates based on the normal vectors of the faces. While this approach works well in most cases, faces aligned with the YZ plane (normal vector of 0,-1,0) present a challenge. I have attached a screenshot highlighting this issue on the bottom faces of the polyhedrons.
Moving forward, my questions are: a) Is there a more efficient or simpler method to achieve this goal? b) How can I address the distortion on bottom faces? c) Can I streamline the code by utilizing additional features of THREE.js?
Thank you for your assistance!