React three fiber - setting up postprocessing using effectComposer and Passes (OutlinePass) from three.js addons

Question

I'm having a hard time using the R3F -postprocessing library so I decided to use raw threejs classes:

By diving into the R3F extending third party library tutorials I managed to setup the renderPass and the outlinePass with typescript https://docs.pmnd.rs/react-three-fiber/tutorials/typescript

import { EffectComposer } from "three/examples/jsm/postprocessing/EffectComposer";
import { RenderPass } from "three/examples/jsm/postprocessing/RenderPass";
import { OutlinePass } from "three/examples/jsm/postprocessing/OutlinePass";
extend({ RenderPass, EffectComposer, OutlinePass });
declare global {
  namespace JSX {
    interface IntrinsicElements {
      outlinePass: Node<OutlinePass, typeof OutlinePass>;
    }
  }
}

export default function GaussianViewer({
  return (
    /**
     * It creates a scene, a camera & Raycaster.
     * It also sets up the webGlrenderer and the animationLoop.
     */
    <Canvas
      gl={{ localClippingEnabled: true }}
      onClick={onCanvasClickHandler}
    >
      <ViewerContent />
    </Canvas>
  );
})

function ViewerContent(){
  const { camera, gl, scene, raycaster, get, set } =
    useThree();
return (
      <effectComposer args={[gl]}>
        <renderPass
          attach="passes"
          args={[scene, camera]}
        />
        <outlinePass attach="passes" />
        {/* <outlinePass /> */}
      </effectComposer>
)
}

However, after successfully setting up the effect composer and the passes, a new issue came up as shown in picture: is it a reason to believe that it's better use the R3F -postprocessing library since R3F have some issues implementing the third party raw threejs add-ons? or is there any way I can fix this issue?

Answer 1

My bad, I forgot to pass the outlinePass arguments as per following example: https://github.com/mrdoob/three.js/blob/master/examples/webgl_postprocessing_outline.html#L249

  args={[
    new THREE.Vector2(
      window.innerWidth,
      window.innerHeight
    ),
    scene,
    camera,
  ]}