THREE.Line2 mapping texture

Questions
1

Hello everyone!

Does THREE.LineMaterial support texture mapping? If I can, what should I do? Thank you!

Such as:
MatLine = new THREE. LineMaterial（{
Color: 0xffffff,
Linewidth: 5,
map:new THREE.TextureLoader().load( XX.jpg’ ),
Dashed: false
};

2

I’m afraid it doesn’t support mapping. But you can make your custom shader. Use this ShaderMaterial with a BufferGeometry that contains position and uv attributes:

var uniforms = {
    texture: yourTexture
};

var shaderMaterial = new THREE.ShaderMaterial( {
    uniforms: uniforms,
    vertexShader: document.getElementById( 'vertexshader' ).textContent,
    fragmentShader: document.getElementById( 'fragmentshader' ).textContent,
} );

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

void main() {
    vUv = uv;
    gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
}

</script>

<script id="fragment_shader" type="x-shader/x-fragment">

    uniform sampler2D texture;
    varying vec2 vUv;

    void main()
    {
        gl_FragColor = texture2D( texture, vUv ); 
    }

</script>
1 Like
3

How to extend the original shader, glsl programming for me is still learning, please help me thank you very much!

4

What colour effect do you want to achieve? The shader already will do texture mapping with the uv of the geometry.

5

But how can I draw lines that don’t seem to be affected by any light? I see the same thing in the official website example. It’s cool to have a smooth surface like a cylinder, if you can. I don’t want every pixel to look like a color.

6

Use new THREE.LineBasicMaterial( { color: color } ) for that. The line will not be lit.

Using the shaderMaterial will also not be lit.

7

Hi!
Could you provide an explanatory picture of the desired result?

8

Linewidth is no longer a problem now. Texture mapping and lighting would look even cooler, just like the following pictures:
timg

9

Before that, I used Instanced and Tube graphics to draw, but because of the large amount of data generated by a large number of triangles will lead to FPS reduction and memory overhead. Ultimately, I used the width of the line to render, and it would be perfect if I could achieve the desired effect as shown in the picture.:crazy_face:

10

Hello guys, can you help to debug this js fiddle?

I was trying to make a fiddle showing how to use texture mapping in a ShaderMaterial with a Line. The uv coordinates seems to be all right, but when sampling the texture it reads black.

As it is right now, the fiddle maps the u coordinate to the red channel, going from black to red from the center of the spiral outwards.

If you uncomment the line marked in the fragment shader, the texture should be used and the line should show color patches. But the line shows black.

11

Hi!

  var uniforms = {

    customTexture: {value: texture}

  };

Uniforms have to have value property.

12

Thanks!

So here you have, @xjindf, a fiddle with a textured line:

https://jsfiddle.net/c27o9Lsj/

1 Like
13

@yombo you’re welcome :beers:

14

@yombo @prisoner849
Thank you for your help.

1 Like
15

I don’t like beer :smiley:

16

@yombo let it be tea then :slight_smile: fizzy :slight_smile:

1 Like