wireframe thickness issue

[Bilb]

Hey,

Thanks for this awesome library!

I am trying to make an old website to the nextjs way. This is the original website: https://lokinet.org/
Beside the fact that the render is taking a huge amount of cpu (not sure why yet), I am currently working on the first globe with the wireframe.

It's already made with Three js so I thought that would be easy, but I cannot find a way to have the same line thickness as in the original one:

Here is my code currently:

import { Canvas, useFrame } from "@react-three/fiber";
import React, { useRef } from "react";
import styled from "styled-components";
import theme from "../theme/theme";

function AnimatedSphere(props: JSX.IntrinsicElements["mesh"]) {
  const mesh = useRef<any>(null!);
  useFrame((_state, _delta) => {
    mesh.current.rotation.x += 0.002;
    mesh.current.rotation.y += 0.002;
  });
  return (
    <perspectiveCamera fov={45} position={[0, 0, -500]}>
      <mesh {...props} ref={mesh}>
        <sphereGeometry args={[300, 20, 20]} />
        <meshStandardMaterial
          color={theme.colors.secondary}
          wireframe={true}
          wireframeLinewidth={1}
        />
      </mesh>
    </perspectiveCamera>
  );
}

const CanvasContainer = styled.div`
  width: 2000px;
  height: 2000px;
`;

const WireframeContainer = styled.div`
  width: 2000px;
  height: 2000px;
`;

export const WireframeSphere = () => {
  return (
    <WireframeContainer>
      <CanvasContainer>
        <Canvas>
          <AnimatedSphere />
          <perspectiveCamera aspect={1} fov={40} position={[0, 0, 1000]} />
        </Canvas>
      </CanvasContainer>
    </WireframeContainer>
  );
};

With those I do get kind of the correct thickness as seen here:

but the sphere is just too big to fit.

So I tried to lower the width, height of the containers and the size of the sphere or the thickness of the wireframe but nothing seems to work. I always get this bold line width:

I found here that the thickness of less than one is probably not supported by the webgl renderer. If that's the case how it the older website making it?

Also, I found some stuff about an option related to sizeAttenuation in here which looks like what I needed, but I cannot find any way of using that with fiber.

Can you give me some clue about where to look for a way of getting the thickness I want?

Thanks a lot

[Bilb]

Not sure if related to #630

[drcmda]

i dont think three lines support thickness. that prop does nothing even if it exists. this is purely three related though, there is nothing in r3f that would take a lines thickness away, what you're writing in jsx are essentially plain three js objects, there is no wrap in between them. three has line2 and line2segments which support thickness, they're part of the three/examples/jsm.

here's linesegments https://codesandbox.io/s/edgesgeometry-iup24 and that has to be done with line2segments https://github.com/mrdoob/three.js/blob/dev/examples/jsm/lines/LineSegments2.js had a demo for this but cant find it no more

ps heres an explanation for why lineWidth does nothing mrdoob/three.js#10357

[Bilb]

But it does increase the wireframe thickness if I put a number > 1