Search code examples
three.jsline

Three JS dashed line material not showing

I'm trying to create lines with a dashed pattern, but somehow the material isn't reflected on the line I'm creating and I just can't see what I'm doing wrong here...

I'm using code from this example, which should produce this:

enter image description here

When I take the following code:

var geometry = new THREE.Geometry();
geometry.vertices.push(new THREE.Vector3(0,0,0));
geometry.vertices.push(new THREE.Vector3(100,0,0));

var material = new THREE.LineDashedMaterial({ color: 0xffaa00, dashSize: 3, gapSize: 1, linewidth: 2 });

var mesh = new THREE.Line(geometry, material);
scene.add(mesh);

This is what I get:

enter image description here

Any hint would be appreciated!

Solution 
  • geometry.computeLineDistances();

    http://threejs.org/docs/#api/core/Geometry

    .lineDistances

    An array containing distances between vertices for Line geometries. This is required for LinePieces/LineDashedMaterial to render correctly. Line distances can also be generated with computeLineDistances.