# Programmatically determine UVs by rotating a plane along X axis

I'm having a math brainfart while trying to solve what might be a simple problem. I've got a plane in 3d space (it's actually the face of a 10-sided die):

Coordinates [x,y,z]:
Point_top  = [0,0,1]
Point_left = [Sin (2pie9/10), Cos(2pie9/10), 0.1] = [-.5878,.809,.1]
Point_right= [Sin (2pie/10) , Cos(2pie/10), 0.1]  = [ .5878,.809,.1]
Point_bot  = [-1,0,-0.1]


If you project that out, it's a plane with the top leaning back away from you, and the bottom closer to you.

I'm trying to automatically build a UV map of that face to put a texture on, so think I should rotate it around the x-asix so that it's only in 2D, then scale that to best fill up a 256x256 texture. I'm doing this in Three.JS for a canvas app.

Is this the right approach? In this example: http://wecreategames.com/games/DiceBoard ( die creation code is in: http://wecreategames.com/games/DiceBoard/die10.js ), I'm estimating the UVs by:

//Build UVs
scope.faceUvs = [[]];
scope.faceVertexUvs = [[]];
for (var f = 0; f < numHalfFaces; f++) {
var faceuv = [
new THREE.UV(.2, .6),
new THREE.UV(.5, .75),
new THREE.UV(.8, .6),
new THREE.UV(.5, .2)
];
scope.faceUvs[0].push(new THREE.UV(0, 1));
scope.faceVertexUvs[0].push(faceuv);
}


But when I view on an iPhone or Android, it shows weird screen artifacts... I'm thinking because the UVs aren't exact.

I think I'd apply some function like this (where andDist is an angle):

rx = x;
ry = (y * Math.cos(angDist)) - (z *Math.sin(angDist));
rz = (y * Math.sin(angDist)) + (z *Math.cos(angDist));


But, I'm not sure how to get the angle that the face is inclined at. Any suggestions? Or, are those white screen artifacts due to something else I've overlooked?

Here's the approach I would use. No rotations at all, just projections:

• For the face you want to solve, take the cross product of two outer edge vectors. This is your normal vector.

• With your normal vector and the distance from the origin, you now have the face plane in Hessian normal form.

ax + by + cz + d = 0

• Calculate the barycentric coordinates of your vertices by projecting them onto them plane. This is their U,V position in tangent space. If you've ever done a point-in-triangle test, it's the same math.

This link is a point in triangle test with source code for everything mentioned thus far: http://www.blackpawn.com/texts/pointinpoly/

Pretty much any ray-tracing site will have some variation of this.

• Find the min max of your barycentric coordinates.

• Using the min max, center your coordinates and scale to fit.

These are your texture coordinates for the face.

Side note: When you select your edge vectors, mind your clockwise/counter-clockwise winding order. If your winding order is wrong, the texture will be inverted or mirrored.