LineDashedMaterial does not work

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

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

When you work with THREE.Geometry() and THREE.LineDashedMaterial(), to have dashes on a line, you have to call .computeLineDistances() on your geometry.
Take a look at the source code of that official example https://threejs.org/examples/#webgl_lines_dashed

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

3 Likes

For reference: .computeLineDistances() with BufferGeometry

3 Likes

thanks :grinning: got it.