three.js textured outline font renders poorly

Question

I am working my way through the NeHe demos using Three.js (see http://www.johannes-raida.de/tutorials.htm). I got to #15. I cloned #14, outline fonts, which works fine. I built a simple shader to texture the font. The same shader approach works fine with planar objects. However, while it SORT OF works, the rendering is very inconsistent. Sometimes the texture is more or less correctly rendered, sometimes not. The stem of the h is correct but the bowl is obviously not.

See

The shaders are:

<script id="vertexShader" type="x-shader/x-vertex">
        varying vec3        vNormal;
        varying vec2        vUv;

        /**
         * Multiply each vertex by the model-view matrix and the projection 
         * matrix (both provided by Three.js) to get a final vertex position
         */
        void main() {

            // set the variables passed (behind the scenes) by three.js to our
            // "varying" variables, which makes them available to the other shader
            vNormal = normal;
            vUv = uv;

            gl_Position = projectionMatrix * modelViewMatrix * vec4(position,1.0);
        }

    </script>

    <script id="fragmentShader" type="x-shader/x-fragment">
        // create the shared variables. which are set in the vertex shader
        varying vec3        vNormal;
        varying vec2        vUv;
        uniform sampler2D   texImage;

        void main(void) {

            gl_FragColor = texture2D(texImage, vUv);
        }
    </script>

And the text geometry/mesh setup is

uniforms = {
                    texImage:   { type: 't', value: texture }
            };

            // find the shaders
            var vs = document.getElementById("vertexShader").textContent;
            var fs = document.getElementById("fragmentShader").textContent;

            // and create our shader material...
            var shaderMaterial = new THREE.ShaderMaterial({
                    uniforms:       uniforms,           // pass the "uniforms" vars
                    shading:        THREE.FlatShading,
                    side:           THREE.DoubleSide,   // want the texture on both sides?
                    vertexShader:   vs,                 // pointers to the shaders
                    fragmentShader: fs
                });

            var materialFront = shaderMaterial;
            var materialSide  = shaderMaterial;
            var materialArray = [ materialFront, materialSide ];

            textGeom = new THREE.TextGeometry( text , {
                size: size,                     // actually the height of the font, in user-space
                height: height,                 // THICKNESS of the extruded font, in user-space
                curveSegments: curveSegments,
                font: font,                     // name of the font
                weight: weight,                 // bold or normal
                style: style,                   // regular, italic or bold
                bevelThickness: bevelThickness,
                bevelSize: bevelSize,
                bevelEnabled: bevelEnabled,
                material: 0,                    // index in the array of the face
                extrudeMaterial: 1              // index in the array of the extruded sides
            });

            var textMaterial = new THREE.MeshFaceMaterial(materialArray);
            var textMesh = new THREE.Mesh(textGeom, textMaterial );

The code is on github at https://github.com/rkwright/nehe-three-js. Am I doing something wrong or is this just three.js incompleteness/bugs?

Answer 1

When you are applying a texture to THREE.TextGeometry, it is important that you allow for texture wrapping like so:

texture.wrapS = texture.wrapT = THREE.RepeatWrapping;

You can also scale and/or offset the texture if you want:

texture.repeat.set( 0.5, 0.5 );
texture.offset.set( 0, 0 );

three.js r.69