I'm working on building a train that moves with the user scroll ( in react using Three drei and three fiber), so far everything works fine.
But when i tried to add bokeh effect so the far objects look blurry, the whole scene become very slow and glitch, it's like this effect make my model consume more ram or something like this, here is the code exampel i'm using:
const Train = () => { return ( <div style={{ backgroundColor: "#000", height: "100%" }}> <Canvas> <Suspense fallback={<LoadingOverlay />}> <Stage environment={null} adjustCamera={false}> <ScrollControls pages={30}> <Model /> </ScrollControls> </Stage> </Suspense> // Bokeh effect <EffectComposer multisampling={0} disableNormalPass={true}> <DepthOfField focusDistance={0} // where to focus focalLength={1} // focal length bokehScale={2} // bokeh size /> </EffectComposer> </Canvas> </div> ); };
Is this normal of did i do somethign wrong?