# LineDashedMaterial does not work

**URL:** <https://discourse.threejs.org/t/linedashedmaterial-does-not-work/1640>\
**Category:** Questions\
**Tags:** materials\
**Created:** [January 19, 2018, 12:50am UTC](https://discourse.threejs.org/t/linedashedmaterial-does-not-work/1640 "2018-01-19T00:50:34Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![chenxiaoleizi](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/chenxiaoleizi/32/5519_2.png) [@chenxiaoleizi](https://discourse.threejs.org/u/chenxiaoleizi)\
**Post date:** [January 19, 2018, 12:50am UTC](https://discourse.threejs.org/t/linedashedmaterial-does-not-work/1640/1 "2018-01-19T00:50:34Z")

</div>

I want to use LineDashedMaterial to create dashed point. But it does not work.

```javascript
var geometry = new THREE.Geometry();

geometry.vertices.push(
   new THREE.Vector3( - 10, 5, 0 ),
   new THREE.Vector3( 0, 5, 0 ),
   new THREE.Vector3( 10, 5, 0 )
);

var material = new THREE.LineDashedMaterial( { color: 0xffffff, dashSize: 1, gapSize: 0.5 } );

var object = new THREE.Line( geometry, material );

scene.add( object );

```

---

<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:** [January 19, 2018, 9:42am UTC](https://discourse.threejs.org/t/linedashedmaterial-does-not-work/1640/2 "2018-01-19T09:42:45Z")

</div>

When you work with `THREE.Geometry()` and `THREE.LineDashedMaterial()`, to have dashes on a line, you have to call [`.computeLineDistances()`](https://threejs.org/docs/index.html#api/core/Geometry.computeLineDistances) on your geometry.  
Take a look at the source code of that official example [https://threejs.org/examples/#webgl\_lines\_dashed](https://threejs.org/examples/#webgl_lines_dashed)

[https://jsfiddle.net/prisoner849/cdzc13kv/](https://jsfiddle.net/prisoner849/cdzc13kv/)

```
var geometrySpline = new THREE.Geometry();
geometrySpline.vertices.push(
new THREE.Vector3( -10, 5, 0 ),
new THREE.Vector3(0, -5, 0),
new THREE.Vector3( 10, 5, 0 )
);
geometrySpline.computeLineDistances(); // call this method, when you work with dashed lines
var object = new THREE.Line( geometrySpline, new THREE.LineDashedMaterial( { color: 0xff0000, dashSize: 1, gapSize: .5} ) );
scene.add(object)

```

![DashedLine](https://cdck-file-uploads-canada1.s3.dualstack.ca-central-1.amazonaws.com/flex035/uploads/threejs/original/1X/b967b4110729a87ec92421cdfb623912a2d8394b.png)

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [January 21, 2018, 11:47am UTC](https://discourse.threejs.org/t/linedashedmaterial-does-not-work/1640/3 "2018-01-21T11:47:16Z")

</div>

For reference: [.computeLineDistances() with BufferGeometry](https://discourse.threejs.org/t/computelinedistances-with-buffergeometry/644)

---

<div class="post-metadata">

**Author:** ![chenxiaoleizi](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/chenxiaoleizi/32/5519_2.png) [@chenxiaoleizi](https://discourse.threejs.org/u/chenxiaoleizi)\
**Post date:** [January 25, 2018, 3:45am UTC](https://discourse.threejs.org/t/linedashedmaterial-does-not-work/1640/4 "2018-01-25T03:45:37Z")

</div>

thanks 😀 got it.