How to load GLB model with fade-in effect?

Question

Is there any way to load GLB with an opacity (0 to 1) fade-in effect??
I use useGLTF for loading.

My code:

const Cell = () => {
  const {nodes, materials} = useGLTF(`${process.env.PUBLIC_URL}/cell.glb`);

  return (
    <group scale={1}>
      <mesh
        name="Sphere001"
        geometry={nodes.Sphere001.geometry}
        material={materials.red}
        morphTargetDictionary={nodes.Sphere001.morphTargetDictionary}
        morphTargetInfluences={nodes.Sphere001.morphTargetInfluences}
      />
      <mesh
        name="Sphere001_1"
        geometry={nodes.Sphere001_1.geometry}
        material={materials['GLB GLASS']}
        morphTargetDictionary={nodes.Sphere001_1.morphTargetDictionary}
        morphTargetInfluences={nodes.Sphere001_1.morphTargetInfluences}
      />
    </group>
  );
};

Answer 1

It looks much better with the useFrame.

import {useGLTF} from '@react-three/drei';
import {useMemo, useRef} from 'react';
import {useFrame} from '@react-three/fiber';

const Cell = () => {
  const {nodes, materials} = useGLTF(`${process.env.PUBLIC_URL}/cell.glb`);

  useMemo(() => {
    materials.red.transparent = true;
    materials.red.opacity = 0;
    materials['GLB GLASS'].opacity = 0;
  }, [materials]);

  useFrame(() => {
    if (materials.red.opacity !== 1) {
      materials.red.opacity += 0.001;
    }

    if (materials['GLB GLASS'].opacity < 0.15) {
      materials['GLB GLASS'].opacity += 0.001;
    }
  });

  return (
    <group scale={1}>
      <mesh
        name="Sphere001"
        geometry={nodes.Sphere001.geometry}
        material={materials.red}
        morphTargetDictionary={nodes.Sphere001.morphTargetDictionary}
        morphTargetInfluences={nodes.Sphere001.morphTargetInfluences}
      />
      <mesh
        name="Sphere001_1"
        geometry={nodes.Sphere001_1.geometry}
        material={materials['GLB GLASS']}
        morphTargetDictionary={nodes.Sphere001_1.morphTargetDictionary}
        morphTargetInfluences={nodes.Sphere001_1.morphTargetInfluences}
      />
    </group>
  );
};