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));

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?


1 Answer 1


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.


You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .