Question

我正在使用Three.js完成NeHe演示（参见http://www.johannes-raida.de/tutorials.htm）。我到了＃15。我克隆了＃14，轮廓字体，工作正常。我构建了一个简单的着色器来纹理字体。相同的着色器方法适用于平面对象。但是，虽然它的SORT OF工作，但渲染非常不一致。有时纹理或多或少地正确渲染，有时不会。 h的茎是正确的，但碗显然不是。

请参阅 enter image description here

着色器是：

<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不完整/错误？

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

three.js纹理轮廓字体渲染效果不佳

1 个答案: