Hey you guys, I will try to be direct.
I am creating a react three fiber application which will need multiple View (though I have only one for now), I saw it is better for performance than multiple canvases.
The problem is that I cant make postprocessing working correctly along with View, while without Views it works perfectly…
Here is the Canvas component
import { Canvas } from '@react-three/fiber';
import React from 'react';
import { BaseballTest } from './BaseballTest';
import { Environment, Sky, View, Preload } from '@react-three/drei';
import { BaseballField } from './BaseballAnimations/BaseballField';
import EffectsComponent from './components/EffectsComponent/EffectsComponent';
function App() {
return (
<div className='relative h-full w-full'>
<div className='w-full h-screen bg-red-700'></div>
<View className='absolute w-full h-screen z-[999]'>
<mesh position={[500, 100, 2000]}>
<sphereGeometry args={[200, 200, 200]} />
<meshStandardMaterial
color={'#f0dc2b'}
emissive={'#e4d125'}
emissiveIntensity={4}
/>
</mesh>
<Sky />
<Environment
files='./sky.jpg'
background
backgroundIntensity={1}
environmentIntensity={2}
/>
<BaseballTest />
<BaseballField />
<EffectsComponent />
</View>
<Canvas
eventSource={document.getElementById('root')}
style={{
width: '100%',
height: '100vh',
position: 'fixed',
top: 0,
left: 0,
}}
camera={{
fov: 40,
position: [-1.385, 13.642, -107.34],
rotation: [3.006, -0.013, -3.123],
}}
dpr={window.devicePixelRatio}
shadows={true}
>
<View.Port />
<Preload all />
</Canvas>
</div>
);
}
export default App;
and here is the EffectComposer component with bloom and effects:
import React from 'react';
import {
ToneMapping,
Bloom,
EffectComposer,
Vignette,
} from '@react-three/postprocessing';
import { ToneMappingMode, VignetteEffect } from 'postprocessing';
import { useFrame } from '@react-three/fiber';
import { damp } from 'maath/easing';
const EffectsComponent = () => {
const vignetteRef = React.useRef<null | typeof VignetteEffect>(null);
useFrame((state, delta) => {
if (vignetteRef.current) {
damp(vignetteRef.current, 'darkness', 0, 6, delta);
}
});
return (
<EffectComposer>
<Bloom
mipmapBlur
luminanceSmoothing={0.1}
luminanceThreshold={1.1}
intensity={3}
/>
<Vignette eskil={false} offset={0.1} darkness={1.1} ref={vignetteRef} />
<ToneMapping mode={ToneMappingMode.NEUTRAL} />
</EffectComposer>
);
};
export default EffectsComponent;
