I'm currently working with react fiber and struggling to make the background of my child scene transparent.
Below is my root component containing the main Canvas element:
export const Splash = () => {
const { intensity, distance, color, ambientIntensity } = useControls('Main lights', {
intensity: { value: 9, min: 0, max: 200, step: 0.5 },
distance: { value: 100, min: -100, max: 100, step: 0.5 },
color: "#7c0505",
ambientIntensity: { value: 0.5, min: -3, max: 3, step: 0.1 },
});
return (
<>
<Canvas
dpr={window.devicePixelRatio}
onCreated={({ gl }) => {
gl.setClearColor(0xFF0000, 0);
gl.autoClear = false;
gl.clearDepth()
}}
gl={{ antialias: true, alpha: true }}
camera={{ fov: 65, position: [0, 0, 30] }}>
<Main>
<ambientLight intensity={ambientIntensity} color={color} />
<RadialGradientPlane />
</Main>
<ApplyEffects>
<RadialGradientPlane />
</ApplyEffects>
</Canvas>
</>
)
}
The Main Component is responsible for rendering the child scene:
function Main({ children }) {
const scene = useRef()
const { gl, camera } = useThree()
useFrame(() => {
gl.autoClear = false
gl.clearDepth()
gl.render(scene.current, camera)
}, 1)
return <scene ref={scene}>{children}</scene>
}
Initially, the scene is transparent without the ApplyEffects component, but once added, it affects the background. Below is the ApplyEffects component causing the issue:
import { Effects } from '@react-three/drei';
import { UnrealBloomPass, RenderPass, WaterPass } from 'three-stdlib';
export default function ApplyEffects({ children }: { children: React.ReactNode }) {
...
}
I've attempted various solutions and still can't seem to resolve the transparency problem. Any assistance on this matter would be highly appreciated!
For a detailed example demonstrating the issue, please refer to this small example.
When the "Effects" component is removed, the background becomes transparent, displaying the white body color.
Thank you,