three.js dashed line material on linesegments not working

Question

in Three.js i'm trying to draw a cube with dashed line edges but the lines are still showing as solid. Here's my code:

    var mat_line = new THREE.LineDashedMaterial( { color: "black", dashSize: 1, gapSize: 1 } );

    var geometry = new THREE.BoxGeometry( 10, 10, 10 );
    geometry.computeLineDistances();

    var cube = new THREE.Mesh( geometry, mat_cube );
    scene.add( cube )    

    var edges = new THREE.EdgesGeometry( geometry )
    var line = new THREE.LineSegments( edges, mat_line )
    scene.add( line )

can anyone see where I'm going wrong here? or is it just not possible with this workflow?

Answer 1

You want use LineDashedMaterial with EdgesGeometry.

To use LineDashedMaterial the line must have line distances specified.

Use a pattern like so:

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

var geometry = new THREE.BoxGeometry( 10, 10, 10 );

geometry = new THREE.EdgesGeometry( geometry );

var line = new THREE.LineSegments( geometry, material );

line.computeLineDistances();

scene.add( line );

three.js r.92