Hello again awesome community!
Can anyone help me understand why or how to fix the scene background texture image coming in lighter
Currently I set scene background like this code:
export function ImageBackground({ imageUrl }: ImageBackgroundProps) {
const texture = useLoader(THREE.TextureLoader, imageUrl);
const { scene } = useThree();
useEffect(() => {
const fetchAspectRatio = async () => {
try {
scene.background = texture;
const imageAspect = await getImageAspectRatio(imageUrl);
const targetAspect = 502 / 300;
texture.colorSpace = THREE.SRGBColorSpace
const factor = (imageAspect as number) / targetAspect;
if (scene.background instanceof THREE.Texture) {
scene.background.offset.x = factor > 1 ? (1 - 1 / factor) / 2 : 0;
scene.background.repeat.x = factor > 1 ? 1 / factor : 1;
scene.background.offset.y = factor > 1 ? 0 : (1 - factor) / 2;
scene.background.repeat.y = factor > 1 ? 1 : factor;
}
} catch (error) {
console.error("Error loading image:", error);
}
};
fetchAspectRatio();
}, [imageUrl, scene, texture]);
return null;
}
The canvas was like this:
<Canvas
style={{
width: "100%",
height: "100%",
}}
ref={canvasRef}
id="avatar-canvas"
>
<ambientLight intensity={0.5} />
<directionalLight position={[2, 2, 2]} intensity={1} />
{/* <Avatar
userFace={faceLandmarks}
userBody={bodyLandmarks}
userLHand={lHandLandmarks}
userRHand={rHandLandmarks}
legsVisible={false}
trackLegs={false}
/> */}
<ImageBackground imageUrl={bgUrl} />
<Controls lookAt={HALFBODY_LOOKAT} />
</Canvas>
And the result was like:
that is a little bit bright, how can I fix that, I just want to keep the original image color:
Thanks for your support