How can I increase the width of a LineBasicMaterial?

Question

I want to add more thickness to the edges of my geometry, but I can't achieve it. This is my example code:

const SquareEdges = ({ geometry }) => {
  const mesh = useRef();


  useFrame(() => {
    if (mesh.current) {

      mesh.current.rotation.y += 0.01;
    }
  });

  // Create EdgesGeometry
  const edgesGeo = new EdgesGeometry(geometry);

  // Create LineBasicMaterial
  const lineMat = new LineBasicMaterial({ color: 0xffffff, linewidth:2});

  return (
    <primitive object={new THREE.LineSegments(edgesGeo, lineMat)} ref={mesh} position={[0, 0, 0]}/>
  );
};

Is there a way to do it in react three fiber?

Answer 1

Keep in mind is some limitation in linewidth: "Due to limitations of the OpenGL Core Profile with the WebGL renderer on most platforms linewidth will always be 1 regardless of the set value."

https://threejs.org/docs/?q=linebasic#api/en/materials/LineBasicMaterial.linewidth

If you want fat lines you need different approach:

https://threejs.org/examples/?q=line#webgl_lines_fat

https://discourse.threejs.org/t/linebasicmaterail-changes-linewidth-on-chrome-but-not-on-firefox/43356

In R3F if you want use only line you can use line(Drei)

<Line
  points={[[0, 0, 0], ...]}       // Array of points, Array<Vector3 | Vector2 | [number, number, number] | [number, number] | number>
  color="black"                   // Default
  lineWidth={x}                   // In pixels (default)
/>

https://github.com/pmndrs/drei?tab=readme-ov-file#line

But I assume you want play with your geometry, right?

I want to add more thickness to the edges of my geometry...

So try approach with meshline

npm install meshline

And you have to create geometry, can be probably challenging in some scenarios...

const geometry = new MeshLineGeometry()
geometry.setPoints([...])

https://github.com/pmndrs/meshline?tab=readme-ov-file#meshline

...you can probably somehow convert the mesh from external software, but sorry, I've never done it so you'll have to experiment. In general, the case of line thickness in 3.js is quite... complicated, if you look at it closely.