Dynamically adding UVs to a self-created geometry

[jaycrossler]

Hi all!

I'm trying to dynamically build a set of rolling dice, and have the models working great. I don't seem to be able to dynamically build a texture using the CanvasRenderer (tried also on WebGLRenderer, but no dice there ether. )

I don't fully understand how the UV system works (and I've looked through +alteredQ's code until my mind went a little gibbery). I've gone through the source, and it seems that I'm not setting the UVs properly in my model, though I can't seem to figure out how to get the CanvasRendered code to pull the UVs and see that they are there.

I realize my next step will be to properly build the UVs, but for now, I'm just trying with 0,1, 1,0... etc to see if they work.

After creating the die geometry, I'm running:

var geometry = new die10(material,0xff0000);
geometry = build_uvs(geometry,numFaces);
object = new THREE.Mesh( geometry, new THREE.MeshFaceMaterial()  );

        function build_uvs(geometry,numFaces) {
            geometry.faceUvs = [];
            geometry.faceVertexUvs = [];

            for (var f=0;f<numFaces;f++) {
                var faceuv = [
                    new THREE.UV(0,1),
                    new THREE.UV(1,1),
                    new THREE.UV(1,0),
                    new THREE.UV(0,0)
                ];
                geometry.faceUvs.push(new THREE.UV(0,1));
                geometry.faceVertexUvs.push(faceuv);
            }
            return geometry;
        }

And I have all the sample code I'm using at:
http://wecreategames.com/games/Three45/examples/jayMeshTestDice2.html

The working D10 without textures is at:
http://wecreategames.com/games/Three45/examples/jayMeshTestDice.html

My goal is to make a Dice object to add to the codebase that you can texturize with the numbers as a font, and specify the number of sides, and potentially roll and see which face is up (likely by taking the dot product of the normals with the camera? but that's a latter issue). Thanks for any help!

[alteredq]

UV are stored in arrays of arrays (to allow for multiple UV sets). Try this:

geometry.faceUvs = [[]];
geometry.faceVertexUvs = [[]];

geometry.faceUvs[0].push(new THREE.UV(0,1));
geometry.faceVertexUvs[0].push(faceuv);

[jaycrossler]

OMG. I can't believe I spent all that effort on stupid little array error. Thanks, I owe you a beer. For this and all you and Mr. Doob's other awesomeness.

[jaycrossler]

Got textures fixed and working with the CanvasRenderer: http://wecreategames.com/games/Three45/examples/jayMeshTestDice2.html (though it doesn't draw on iOS, Android, or iOS Simulator), but looks awesome in other browsers.