Add a border on a 3D model in three js

Question

Hello everyone I would like to set up an outline on my 3D model I would like to know if anyone has already succeeded in setting it up with react three fiber

const ModelStl = () => {
  const geom = useLoader(STLLoader, pathModelStl);

  const ref = useRef();
  const { camera } = useThree();
  useEffect(() => {
    console.log(ref)
    camera.lookAt(ref.current.position);
  });

  return (
    <>
      <mesh ref={ref} rotation={[-Math.PI / 2, 0, 0]} scale={0.1}>
        <primitive
          object={geom}
          attach="geometry"
          position={[0, 0, 0]}
          segments={10}
        />
        <meshStandardMaterial color={"gray"} />
      </mesh>
      <ambientLight />
      <pointLight position={[10, 10, 10]} />
    </>
  );
};

The result I have enter image description here

The result is to haveenter image description here

Answer 1

Take a look at the outline pass: https://threejs.org/examples/webgl_postprocessing_outline.html

Here is an implementation with react-three-fibre (not mine): https://codesandbox.io/s/mq5oy