Image texture looks white

Hello folks, I’m new to the forum. I added a picture to the T-shirt and it’s faded. But when I change the page within my site and go back, the picture becomes bright like an original. Can you tell me how to make sure that when I add a picture, the original picture is added?



My code:

import React from "react";
import * as THREE from "three";
import { useSnapshot } from "valtio";
import { Decal, useGLTF, useTexture } from "@react-three/drei";
import state from "../store";
import { useFrame } from "@react-three/fiber";
import { easing } from "maath";

const Shirt = () => {
  const snap = useSnapshot(state);
  const { nodes, materials } = useGLTF("/models/shirt.glb");
  const logoTexture = useTexture(snap.logoDecal);
  const fullTexture = useTexture(snap.fullDecal);
  useFrame((state, delta) => easing.dampC(materials["lambert1"].color, snap.color, 0.25, delta));
  const stateString = JSON.stringify(snap);

  return (
    <group key={stateString}>
      <mesh castShadow geometry={nodes.T_Shirt_male.geometry} material={materials["lambert1"]} material-roughness={1} dispose={null}>
        {snap.isFullTexture && <Decal position={[0, 0, 0]} rotation={[0, 0, 0]} scale={0.7} map={fullTexture} depthTest={true} depthWrite={true} />}
        {snap.isLogoTexture && (
          <Decal position={[0, 0.04, 0.15]} rotation={[0, 0, 0]} scale={0.15} map={logoTexture} depthTest={false} depthWrite={true} />
        )}
      </mesh>
    </group>
  );
};

export default Shirt;

There are multiple factors due to which this can be caused.

First is to change the textures .colorSpace property from THREE.NoColorSpace to THREE.SRGBColorSpace.

Secondly I would suggest to change the intensity of the lights used in the scene. For Example higher intensity of an AmbientLight can also cause the white effect.

Again there can be more reasons why this is happening but these are the main and possible ones.

2 Likes