3D 경험에서는 복잡한 모델과 큰 텍스처가 흔히 사용됩니다. 이는 긴 로딩 시간을 유발할 수 있습니다. 빈 화면과 나쁜 첫인상을 피하기 위해 로딩 화면을 추가할 수 있습니다.

개인적으로 가능하다면 로딩 화면은 피해야 한다고 생각합니다 (디자인적인 선택이 아닌 이상). 모델과 텍스처 최적화가 우선적으로 고려되어야 합니다.

하지만 때로는 선택의 여지가 없으며, 심지어 최적화된 모델도 여전히 크거나 여러 개일 수 있습니다. 이런 경우에는 로딩 화면이 좋은 해결책이 될 수 있습니다.

Suspense

Suspense는 데이터가 로드되는 동안 대체 컴포넌트를 렌더링할 수 있게 해주는 React 래퍼 컴포넌트입니다.

전통적인 앱에서 그 데이터는 보통 데이터 가져오기나 코드 분할을 지칭하지만, React Three Fiber에서는 모델과 텍스처가 로드될 때까지 기다리는 데 사용할 수 있습니다.

useLoader hook은 모델과 텍스처를 로드하기 위해 promise를 사용합니다. 그래서 우리는 Suspense를 사용해 그것들이 해결될 때까지 기다릴 수 있습니다.

시작 패키지에는 public/models/에 각각 +3MB의 4개의 모델을 추가했습니다. (모든 애니메이션이 동일하며 최적화될 수 있었던 점에서 웹 앱에는 많은 양입니다) 이는 Suspense가 어떻게 작동하는지를 알 수 있게 해줍니다.

새로 고칠 때 모델이 로드되기 전에 긴 빈 화면이 나타납니다. 이는 좋은 사용자 경험이 아닙니다, 사용자들은 앱이 고장났다고 생각하고 떠날 수 있습니다.

로컬에서 작업 중이거나 모델이 브라우저에 캐시되어 있는 경우 빈 화면을 보지 못할 수도 있습니다.

리소스를 강제로 다시 로드하려면 브라우저 개발 도구의 네트워크 탭에서 캐시를 비활성화할 수 있습니다.

Throttling 옵션을 사용하여 네트워크 속도를 느리게 할 수도 있습니다.

이제 모두 빈 화면을 볼 수 있을 것입니다. fallback prop과 함께 Suspense 컴포넌트를 추가해 봅시다:

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;

저희 fallback 컴포넌트는 간단한 큐브로, 최고의 로딩 화면은 아니지만 Suspense가 어떻게 작동하는지 이해하기에는 충분합니다.

새로 고침하면, 모델이 로드되는 동안 큐브가 표시되는 것을 볼 수 있습니다. 모델이 로드되면 큐브가 Experience 컴포넌트로 대체됩니다.

Preload

일반적으로 직면할 수 있는 문제 중 하나는 리소스가 즉시 필요하지 않다는 것입니다. 예를 들어, 사용자가 버튼을 클릭할 때만 로드되는 모델이 있을 수 있습니다. 따라서 이는 Suspense에 의해 고려되지 않을 것입니다.

이로 인해 리소스가 필요할 때 fallback 컴포넌트가 다시 표시될 수 있습니다. 이를 방지하기 위해, 우리는 다양한 Drei loaders의 preload 함수를 사용할 수 있습니다.