Nelle esperienze 3D, è comune avere modelli complessi e texture di grandi dimensioni. Questo può portare a tempi di caricamento lunghi. Per evitare di avere una schermata bianca e una cattiva prima impressione, possiamo aggiungere una schermata di caricamento.

Personalmente penso che, quando possibile, una schermata di caricamento dovrebbe essere evitata (a meno che non sia una scelta di design). Ottimizzare i modelli e le texture dovrebbe essere considerato in primo luogo.

Ma a volte non hai scelta, e anche modelli ottimizzati possono rimanere grandi o ne hai molti. In questo caso, una schermata di caricamento può essere una buona soluzione.

Suspense

Suspense è un componente wrapper di React che ti permette di renderizzare un componente di riserva mentre aspetti che i dati si carichino.

Questi dati nelle app tradizionali si riferiscono solitamente al recupero di dati o al code splitting. Ma in React Three Fiber, possiamo usarlo per aspettare che i modelli e le texture siano caricati.

L'hook useLoader utilizza delle promesse per caricare i modelli e le texture. Quindi possiamo usare Suspense per aspettare che si risolvano.

Nel starter pack ho aggiunto 4 modelli in public/models/ di +3MB ciascuno. (Che è molto per un'app web dato che contengono tutte le stesse animazioni e potrebbero/dovrebbero essere ottimizzati) Questo ci permetterà di vedere come funziona Suspense.

Quando ricarico, vediamo una schermata bianca lunga prima che i modelli siano caricati. Questa non è una buona esperienza utente, gli utenti potrebbero pensare che l'app sia rotta e uscire.

Se lavori localmente o hai i modelli memorizzati nella cache del tuo browser, potresti non vedere la schermata bianca.

Per forzare il ricaricamento delle risorse, puoi disabilitare la cache nella scheda Network degli strumenti di sviluppo del tuo browser.

Puoi anche rallentare la rete con l'opzione Throttling.

Ora dovremmo tutti vedere la schermata bianca, aggiungiamo un componente Suspense con una prop fallback:

Copy
import { Canvas } from "@react-three/fiber";
import { Experience } from "./components/Experience";
import { Suspense } from "react";

const CubeLoader = () => {
  return (
    <mesh>
      <boxGeometry />
      <meshNormalMaterial />
    </mesh>
  );
};

function App() {
  return (
    <>
      <Canvas camera={{ position: [-4, 4, 12], fov: 30 }}>
        <Suspense fallback={<CubeLoader />}>
          <group position-y={-1}>
            <Experience />
          </group>
        </Suspense>
      </Canvas>
    </>
  );
}

export default App;

Il nostro componente di fallback è un semplice cubo, non è la schermata di caricamento più bella, ma è sufficiente per capire come funziona Suspense.

Quando ricarichiamo, possiamo vedere che il cubo viene mostrato mentre i modelli si stanno caricando. Quando sono caricati, il cubo viene sostituito dal componente Experience.

Preload

Un problema comune che potresti affrontare è che le tue risorse non sono richieste immediatamente. Ad esempio, potresti avere un modello che viene caricato solo quando l'utente clicca su un pulsante. Quindi non verrà preso in considerazione da Suspense.

Questo può portare il componente fallback ad essere visualizzato di nuovo quando la risorsa è richiesta. Per evitare ciò, possiamo usare la funzione preload dai diversi Drei loaders.