three.js带纹理的轮廓字体呈现效果不佳

Question

我正在使用Three.js完成NeHe演示(请参阅http://www.johannes-raida.de/tutorials.htm)。我读到了#15，我克隆了#14，轮廓字体，它工作得很好。我建立了一个简单的着色器来纹理字体。相同的着色器方法适用于平面对象。然而，虽然它在某种程度上是有效的，但渲染非常不一致。有时纹理或多或少会被正确渲染，有时则不会。H的词干是正确的，但碗显然不正确。

看见

​

着色器包括：

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

文本几何/网格设置为

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

代码在https://github.com/rkwright/nehe-three-js的github上。我是不是做错了什么，或者这只是three.js的不完整/bug？

Answer 1

将纹理应用于THREE.TextGeometry时，考虑纹理包裹非常重要，如下所示：

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

如果需要，还可以缩放和/或偏移纹理：

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

three.js r.69