Struggling with the R3F -postprocessing library, I decided to turn to raw threejs classes:
After delving into tutorials on extending third party libraries for R3F, I was able to configure the renderPass and outlinePass using TypeScript. Check out this helpful link:
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, while successfully setting up the effect composer and passes, a new issue arose as seen in the picture: https://i.sstatic.net/Jf99dVN2.png Do you think it's better to stick with the R3F -postprocessing library despite these issues with integrating raw threejs add-ons? Or is there a way to resolve this problem?