text - 三.js/为什么文字纹理看起来这么惨？

Question

尝试将纹理应用于 3D 文本我想知道为什么它看起来如此......不好。纹理仅应用于字母面，侧面仅显示条纹。显然我做错了什么，或者有更好的方法来做。对于这两种情况，我将不胜感激。

提前致谢。

我试过你看到的代码。然后我尝试了类似的东西：

https://www.script-tutorials.com/webgl-with-three-js-lesson-4/ 在 3D 文本下导致纹理表面和可能与 MeshFaceMaterial 相关的仅彩色侧面已被弃用，如此处所述：

https://threejs.org/docs/#api/en/deprecated/DeprecatedList 在材料下。

    var size    =   0.251;
    var height  =   0.125;
    var loader  =   new THREE.FontLoader();

        loader.load( './Arial_Regular.json'

    ,   function ( font ) {

            letters = new THREE.TextGeometry( 'tHIS is AN Example',  {
                                                                        font            :   font,
                                                                        size            :   size,
                                                                        height          :   height,
                                                                        curveSegments   :   2,
                                                                        bevelEnabled    :   true,
                                                                        bevelThickness  :   0.02,
                                                                        bevelSize       :   0.05,

                                                                        bevelSegments   :   2


                                                                     }
            );

            letters             .   center();

        var texture             =   new THREE.TextureLoader().load('wildtextures-brushed-metal-shets.jpg');
            texture.wrapS       =   texture.wrapT = THREE.RepeatWrapping;
            texture.repeat      .   set                                     (   1
                                                                            ,   1
                                                                            );
            texture.needsUpdate =   true;
            texture.anisotropy  =   16;





        var material = new THREE.MeshBasicMaterial( { map: texture } );

三.TextureLoader().load('wildtextures_rust-signs-on-the-blue-metal-sheet.jpg');

            that.letter_mesh            =   new THREE.Mesh                  (   letters
                                                                            ,   material
                                                                            );
            that.scene                  .   add                             (   that.letter_mesh    )

我希望纹理能够平滑地应用于文本面和侧面。

Meanwhile I tried using a shader doing the job:

THREE.ShaderLib['custom'] = {

    vertexShader: [

        "varying vec2 vUv;",
        "void main() {",
            "vUv            =   uv;",
            "gl_PointSize   =   8.0;",
            "gl_Position    =   projectionMatrix * modelViewMatrix * vec4(position, 1.0);",
        "}",
    ].join("\n"),

    fragmentShader: [

        "varying vec2 vUv;",
        "uniform sampler2D texture;",
        "void main() {",
        "gl_FragColor = texture2D(texture, vUv);",
        "}",
    ].join("\n")
};
var Shader      =   THREE.ShaderLib             [ "custom" ];
var uniforms    =   THREE.UniformsUtils.clone   ( Shader.uniforms );

var _material = new THREE.ShaderMaterial({

    fragmentShader  :   Shader.fragmentShader,
    vertexShader    :   Shader.vertexShader,

    uniforms        : {

        texture: (  {   type    :   "t"
                    ,   value   :   THREE.ImageUtils.loadTexture("wildtextures-brushed-metal-shets.jpg") } ) 
    }

});


And it looks similar to the former result so this did not work out either.

标签： textthree.jstextures

Answer 1

因此，我快速查看了您的代码，您尝试做的一切似乎都是合理的。但是，您的输出仍然很糟糕...

我做了一些挖掘，找到了与您的问题相关的答案。此链接包含一个很好地应用纹理的示例，但也解释了为什么不能总是很好地应用纹理。

相关链接：

纹理 3D 文本

良好的 3D 纹理示例：

良好的纹理 3D 文本

摘抄：

TextGeometry 不提供 UV 坐标，如果您稍微考虑一下，将很难抽象该过程并将其序列化以用于任何文本几何图形。文本是另一种形式的自定义网格，因此，您必须手动提供 textureCoord 属性并使用 ShaderMaterial 对纹理进行采样。希望这可以帮助。

我希望这能让你朝着正确的方向前进。

更新：

我认为您需要创建第二种材料并将其应用于网格，如下所示：

const mesh = new THREE.Mesh( geometry, [ material1, material2 ] );

这应该取代 MeshFaceMaterial 的行为。明天我会尽量给你一个更具体的答案。