Search code examples
javascript3dthree.js

THREE.LineDashedMaterial - dashes don't work


I can't get THREE.LineDashedMaterial to work correctly in three js (I'm using r73 but have just tried r74 as well). Changing colours are fine but the dashes don't seem to work. This is my example:

var segmentCount = 200;
var radius = 100;
var geometry = new THREE.Geometry();
var material = new THREE.LineDashedMaterial( { color: 0xff0000, linewidth: 5, dashSize: 1.0, gapSize: 0.5 } ); //new THREE.LineBasicMaterial({ color: 0xFFFFFF, linewidth: 10 });

for (var i = 0; i <= segmentCount; i++) {
var theta = (i / segmentCount) * Math.PI * 2;
geometry.vertices.push(
    new THREE.Vector3(
        Math.cos(theta) * radius,
        Math.sin(theta) * radius,
        0));            
}


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

Am I doing something wrong in my example or is this bug (https://github.com/mrdoob/three.js/issues/6699) still an issue?


Solution

  • If you are creating a line using THREE.Geometry and THREE.LineDashedMaterial, you need to call

    line.computeLineDistances(); // or lineSegments.computeLineDistances()
    

    to get the dashed line to render properly.

    three.js r.91