LineMaterial Dashed

Questions
1

Hi, I’ m trying to show a dashed line.
const geometr = new THREE.LineGeometry();

            const pointsPR = [];
            pointsPR.push(-100,0,0);
            pointsPR.push(100, 0, 0);
            geometr.setPositions(pointsPR);
            
            matLine = new THREE.LineMaterial({

                color: 0xffff00,
                linewidth: 0.004, // in pixels
                //resolution:  // to be set by renderer, eventually
                dashed: true,

            });
            lineEX = new THREE.Line2(geometr, matLine);

But shows the line continious. Thanks

2

Hi!
Try to add lineEX.computeLineDistances();

3

I added this but the problem persist.

4

Ah, are you using fat lines?

5

No, I am not

6

Then could you provide an editable working live code example, that demonstrates the issue?

8

Sorry, I didn´t understand what do you want it. Here is the code example:
https://jsfiddle.net/ismacadenas/p0h4gb5v/1/

Thanks

9

So, yes, you’re using that technique of fat lines.
Set your material like this:

matLine = new LineMaterial({
  linewidth: 2, // in pixels
  defines: {"USE_DASH":""}
});

and set resolution for lines in animation loop:

function animate() {

    requestAnimationFrame( animate );
    
    matLine.resolution.set(innerWidth, innerHeight);

    renderer.render( scene, camera );

}
1 Like
10

Understood. Thank you very much!!

11

You’re welcome :beers: