What is the function of the faceVertexUV array in the three.js Geometry class?

Question

I'm using three.js for generating curved shapes using parametric functions. In the three.js javascript file, the THREE.ParametricGeometry function repeatedly pushes 2D vectors into the faceVertexUvs variable. What is the point of this and what does the faceVertexUvs array do?

var a, b, c, d;
var uva, uvb, uvc, uvd;
var uvs = this.faceVertexUvs[ 0 ];

    for ( i = 0; i < stacks; i ++ ) {

        for ( j = 0; j < slices; j ++ ) {

            a = i * sliceCount + j;
            b = i * sliceCount + j + 1;
            c = ( i + 1 ) * sliceCount + j + 1;
            d = ( i + 1 ) * sliceCount + j;

            uva = new THREE.Vector2( j / slices, i / stacks );
            uvb = new THREE.Vector2( ( j + 1 ) / slices, i / stacks );
            uvc = new THREE.Vector2( ( j + 1 ) / slices, ( i + 1 ) / stacks );
            uvd = new THREE.Vector2( j / slices, ( i + 1 ) / stacks );

            faces.push( new THREE.Face3( a, b, d ) );
            uvs.push( [ uva, uvb, uvd ] );

            faces.push( new THREE.Face3( b, c, d ) );
            uvs.push( [ uvb.clone(), uvc, uvd.clone() ] );

        }

    }

score 0 · Accepted Answer · answered Jun 23 '16 at 21:55

The ParametricGeometry describes bodies by points placed at two angles, like lattitude and longitude on a sphere. It also set UV coordinates, the 2d vectors you see here, to allow spherical texture mapping on those bodies. So for any 3d point pushed to the faces collection, a 2d point holding texture mapping UV coordinates is pushed to the this.faceVertexUvs[0] collection.

With these UV coordinate sets, textures would be mapped as if the body is a deformed sphere, which is acceptable for most use cases.

Even if not always used, THREE defines UV coordinates for any body to allow for using textures if needed.

What is the function of the faceVertexUV array in the three.js Geometry class?

1 Answers1