Trong các trải nghiệm 3D, thông thường có các mô hình phức tạp và kết cấu lớn. Điều này có thể dẫn đến thời gian tải lâu. Để tránh có màn hình trống và ấn tượng xấu ban đầu, chúng ta có thể thêm một màn hình tải.

Cá nhân tôi nghĩ rằng khi có thể, nên tránh sử dụng màn hình tải (Trừ khi đó là lựa chọn thiết kế). Tối ưu hóa mô hình và kết cấu nên được xem xét trước tiên.

Nhưng đôi khi bạn không có lựa chọn nào khác, và ngay cả những mô hình đã tối ưu hóa có thể vẫn lớn hoặc có nhiều mô hình. Trong trường hợp này, màn hình tải có thể là một giải pháp tốt.

Suspense

Suspense là một component bọc của React cho phép bạn render một component dự phòng trong khi chờ dữ liệu tải.

Dữ liệu đó trong các ứng dụng truyền thống thường đề cập đến lấy dữ liệu hoặc tách mã. Nhưng trong React Three Fiber, chúng ta có thể sử dụng nó để chờ mô hình và kết cấu tải xong.

Hook useLoader sử dụng promises để tải mô hình và kết cấu. Vì vậy, chúng ta có thể sử dụng Suspense để chờ chúng giải quyết.

Trong starter pack tôi đã thêm 4 mô hình trong public/models/ mỗi cái +3MB. (Điều này khá nhiều cho một ứng dụng web vì tất cả đều chứa cùng một hoạt ảnh và có thể/nên được tối ưu hóa) Điều này sẽ cho phép chúng ta thấy cách Suspense hoạt động.

Khi tôi tải lại, chúng ta có một màn hình trống kéo dài trước khi các mô hình được tải. Đây là một trải nghiệm người dùng không tốt, người dùng có thể nghĩ rằng ứng dụng đang bị lỗi và rời đi.

Nếu bạn đang làm việc cục bộ hoặc có các mô hình đã lưu trong bộ nhớ cache của trình duyệt, bạn có thể không thấy màn hình trống.

Để buộc tải lại các tài nguyên, bạn có thể vô hiệu hóa bộ nhớ cache trong tab Network của công cụ phát triển trình duyệt của bạn.

Bạn cũng có thể làm chậm mạng với tùy chọn Throttling.

Bây giờ tất cả chúng ta nên thấy màn hình trống, hãy thêm một component Suspense với một 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;

Component fallback của chúng ta là một hình lập phương đơn giản, không phải là màn hình tải đẹp nhất, nhưng đủ để hiểu cách Suspense hoạt động.

Khi chúng ta tải lại, chúng ta có thể thấy rằng hình lập phương được hiển thị trong khi các mô hình đang tải. Khi chúng được tải xong, hình lập phương được thay thế bằng component Experience.

Tải trước

Một vấn đề phổ biến mà bạn có thể gặp phải là tài nguyên của bạn không được yêu cầu ngay lập tức. Ví dụ, bạn có thể có một mô hình chỉ được tải khi người dùng nhấp vào một nút. Vì vậy, nó sẽ không được Suspense tính đến.

Điều đó có thể dẫn đến việc thành phần fallback được hiển thị lại khi tài nguyên được yêu cầu. Để tránh điều đó, chúng ta có thể sử dụng hàm preload từ các Drei loaders khác nhau.