Multi-line text in textGeometry

[ysethi92]

Hello, I'm making my first React three fiber project.

I'm loading a GLTF model and making its copies for multiple renders(using this approach).

For using textGeometry I implemented it like this(using typescript)

declare global {
    namespace JSX {
        interface IntrinsicElements {
            textGeometry: Object3DNode<TextGeometry, typeof TextGeometry>
        }
    }
}

export interface ITextMeshProps {
}

So for every copy of the GLTF model, I'm adding a 3D textGeometry with it. For the 3D text, I'm using a shader material to get a gradient color on the text.

Shader Material:

const material = useMemo(
    () => ({
        uniforms: {
            color1: {
              value: new THREE.Color("#eeeeee")
            },
            color2: {
              value: new THREE.Color("#333333")
            }
          },
          vertexShader: `
            varying vec2 vUv;
        
            void main() {
              vUv = uv;
              gl_Position = projectionMatrix * modelViewMatrix * vec4(position,1.0);
            }
          `,
          fragmentShader: `
            uniform vec3 color1;
            uniform vec3 color2;
          
            varying vec2 vUv;
            
            void main() {
              
              gl_FragColor = vec4(mix(color1, color2, vUv.y), 1.0);
            }
          `
        }), 
        []
    )

Issue:
Whenever I add a '\n' character the shader is not applied to any text after the '\n' character.

const content = "Hello World! \nThis is a new project."
return(
   <mesh position={contentPosition} rotation={[0, 0, 0]}>
       <textGeometry args={[content, {font, size: 0.2, height: 0}]} />
       <shaderMaterial attach="material" {...material} />
   </mesh>
)

Preview

1. When a new line is added - link
2. Without new line - link

Is there any way to resolve this issue?

[drcmda]

it looks like THREE.ExtrudeGeometry is to blame, the UVs it generates only reach the first line. i would ask on three discourse/discord, and if nothing helps make a bug report on threejs github.

once this is fixed btw you can later cut a lot of code since all that is part of drei: https://codesandbox.io/s/brave-pine-x7jhw5?file=/src/App.js

[ysethi92]

Thank you for the information. Please let me know if you find any resolution to the issue, otherwise, I would be happy to make the bug report on the threejs GitHub repo.

Also, thanks for the example code, that definitely is a lot less verbose.

[ysethi92]

Hello, did you happen to find any possible solution to the issue?

Thanks