# THREE.Line2 mapping texture

**URL:** <https://discourse.threejs.org/t/three-line2-mapping-texture/6702>\
**Category:** Questions\
**Tags:** lines\
**Created:** [March 23, 2019, 6:22am UTC](https://discourse.threejs.org/t/three-line2-mapping-texture/6702 "2019-03-23T06:22:37Z")\
**Posts on this page:** 16\
**Page:** 1

<div class="post-metadata">

**Author:** ![xjindf](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/xjindf/32/24657_2.png) [@xjindf](https://discourse.threejs.org/u/xjindf)\
**Post date:** [March 23, 2019, 6:22am UTC](https://discourse.threejs.org/t/three-line2-mapping-texture/6702/1 "2019-03-23T06:22:37Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![yombo](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/yombo/32/3325_2.png) [@yombo](https://discourse.threejs.org/u/yombo)\
**Post date:** [March 23, 2019, 9:21am UTC](https://discourse.threejs.org/t/three-line2-mapping-texture/6702/2 "2019-03-23T09:21:47Z")

</div>

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:

```auto
var uniforms = {
    texture: yourTexture
};

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

```

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

```

---

<div class="post-metadata">

**Author:** ![xjindf](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/xjindf/32/24657_2.png) [@xjindf](https://discourse.threejs.org/u/xjindf)\
**Post date:** [March 23, 2019, 9:44am UTC](https://discourse.threejs.org/t/three-line2-mapping-texture/6702/3 "2019-03-23T09:44:50Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![yombo](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/yombo/32/3325_2.png) [@yombo](https://discourse.threejs.org/u/yombo)\
**Post date:** [March 23, 2019, 9:54am UTC](https://discourse.threejs.org/t/three-line2-mapping-texture/6702/4 "2019-03-23T09:54:41Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![xjindf](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/xjindf/32/24657_2.png) [@xjindf](https://discourse.threejs.org/u/xjindf)\
**Post date:** [March 23, 2019, 10:04am UTC](https://discourse.threejs.org/t/three-line2-mapping-texture/6702/5 "2019-03-23T10:04:55Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![yombo](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/yombo/32/3325_2.png) [@yombo](https://discourse.threejs.org/u/yombo)\
**Post date:** [March 23, 2019, 10:31am UTC](https://discourse.threejs.org/t/three-line2-mapping-texture/6702/6 "2019-03-23T10:31:04Z")

</div>

> [@xjindf](#):
>
> But how can I draw lines that don’t seem to be affected by any light?

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

Using the shaderMaterial will also not be lit.

---

<div class="post-metadata">

**Author:** ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)\
**Post date:** [March 23, 2019, 11:30am UTC](https://discourse.threejs.org/t/three-line2-mapping-texture/6702/7 "2019-03-23T11:30:46Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![xjindf](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/xjindf/32/24657_2.png) [@xjindf](https://discourse.threejs.org/u/xjindf)\
**Post date:** [March 23, 2019, 11:57am UTC](https://discourse.threejs.org/t/three-line2-mapping-texture/6702/8 "2019-03-23T11:57:38Z")

</div>

Linewidth is no longer a problem now. Texture mapping and lighting would look even cooler, just like the following pictures:  
 ![timg](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/9/941938c418ff42c490be879a14635796a91fc701.jpeg)

---

<div class="post-metadata">

**Author:** ![xjindf](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/xjindf/32/24657_2.png) [@xjindf](https://discourse.threejs.org/u/xjindf)\
**Post date:** [March 23, 2019, 12:04pm UTC](https://discourse.threejs.org/t/three-line2-mapping-texture/6702/9 "2019-03-23T12:04:01Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![yombo](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/yombo/32/3325_2.png) [@yombo](https://discourse.threejs.org/u/yombo)\
**Post date:** [March 24, 2019, 4:08am UTC](https://discourse.threejs.org/t/three-line2-mapping-texture/6702/10 "2019-03-24T04:08:07Z")

</div>

Hello guys, can you help to debug [this js fiddle](https://jsfiddle.net/xgw25z09/)?

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.

---

<div class="post-metadata">

**Author:** ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)\
**Post date:** [March 24, 2019, 5:18pm UTC](https://discourse.threejs.org/t/three-line2-mapping-texture/6702/11 "2019-03-24T17:18:36Z")

</div>

Hi!

```auto
  var uniforms = {

    customTexture: {value: texture}

  };

```

Uniforms have to have `value` property.

---

<div class="post-metadata">

**Author:** ![yombo](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/yombo/32/3325_2.png) [@yombo](https://discourse.threejs.org/u/yombo)\
**Post date:** [March 24, 2019, 5:41pm UTC](https://discourse.threejs.org/t/three-line2-mapping-texture/6702/12 "2019-03-24T17:41:01Z")

</div>

Thanks!

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

[https://jsfiddle.net/c27o9Lsj/](https://jsfiddle.net/c27o9Lsj/)

---

<div class="post-metadata">

**Author:** ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)\
**Post date:** [March 24, 2019, 8:17pm UTC](https://discourse.threejs.org/t/three-line2-mapping-texture/6702/13 "2019-03-24T20:17:58Z")

</div>

@yombo you’re welcome 🍻

---

<div class="post-metadata">

**Author:** ![xjindf](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/xjindf/32/24657_2.png) [@xjindf](https://discourse.threejs.org/u/xjindf)\
**Post date:** [March 25, 2019, 12:35am UTC](https://discourse.threejs.org/t/three-line2-mapping-texture/6702/14 "2019-03-25T00:35:01Z")

</div>

@yombo @prisoner849  
Thank you for your help.

---

<div class="post-metadata">

**Author:** ![yombo](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/yombo/32/3325_2.png) [@yombo](https://discourse.threejs.org/u/yombo)\
**Post date:** [March 25, 2019, 9:06am UTC](https://discourse.threejs.org/t/three-line2-mapping-texture/6702/15 "2019-03-25T09:06:35Z")

</div>

I don’t like beer 😃

---

<div class="post-metadata">

**Author:** ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)\
**Post date:** [March 25, 2019, 12:25pm UTC](https://discourse.threejs.org/t/three-line2-mapping-texture/6702/16 "2019-03-25T12:25:12Z")

</div>

@yombo let it be tea then 🙂 fizzy 🙂