Take the 2-minute tour ×
Game Development Stack Exchange is a question and answer site for professional and independent game developers. It's 100% free, no registration required.

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?

share|improve this question
add comment

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

Browse other questions tagged or ask your own question.