Adding thickness to lines in threejs

Question

This is my demo, i want to add linewidth to give more thickness to my quad.

I have looked to this question and i have tried to understand how i can use LineMaterial and Line2.

They seem not working in the demo.

This is the relevant code

   function QuadGeometry(w, h) {
      let pts = [
        [0.5, 0.5],
        [-0.5, 0.5],
        [-0.5, -0.5],
        [0.5, -0.5]
      ].map((p) => {
        return new THREE.Vector2(p[0], p[1]);
      });
      let g = new THREE.BufferGeometry().setFromPoints(pts);
      g.setIndex([0, 1, 2, 3, 0]);
      g.scale(w, h, 1);

      return g;
    }

    let g = QuadGeometry(
      THREE.MathUtils.randInt(15, 30),
      THREE.MathUtils.randInt(15, 30)
    );
    let m = new LineMaterial({
      color: "yellow",
      linewidth: 5
    });
    let quad = new Line2(g, m);

As you can see the quad is not visible with these changes

If i replace with LineBasicMaterial and Line the quad is visible

I have also found it can be a bug but i am very beginner with three.js

Any edit in the codesandbox it would be great to show me.

Answer 1

You are using an instance of BufferGeometry to create the instance of Line2 which is not supported. You have to use LineGeometry instead.

Updated codesandbox: https://codesandbox.io/s/static-forked-68lif?file=/index.html