React Three Fiber — популярная библиотека, которая позволяет разработчикам создавать 3D-сцены и анимацию в приложениях React, используя мощную библиотеку Three.js. Одной из распространенных задач при 3D-разработке является загрузка моделей GLTF, популярного формата файлов для 3D-моделей. В этой статье мы рассмотрим семь простых способов загрузки моделей GLTF в React Three Fiber, попутно предоставляя разговорные объяснения и примеры кода.

Метод 1: использование хука useLoader

Хук useLoader, предоставляемый React Three Fiber, упрощает процесс загрузки моделей GLTF. Вот пример того, как его использовать:

import { useLoader } from 'react-three-fiber';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
const MyModel = () => {
  const gltf = useLoader(GLTFLoader, '/path/to/model.gltf');
  return <primitive object={gltf.scene} />;
};

Метод 2. Импорт GLTLoader

Другой подход — напрямую импортировать GLTLoader и использовать его для загрузки модели:

import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
const MyModel = () => {
  const loader = new GLTFLoader();
  loader.load('/path/to/model.gltf', (gltf) => {
    // Use the loaded GLTF object here
  });
  return null;
};

Метод 3: использование пользовательского компонента загрузчика

Вы можете создать собственный компонент-загрузчик для обработки загрузки и рендеринга моделей GLTF:

import { useLoader } from 'react-three-fiber';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
const MyModelLoader = ({ url }) => {
  const gltf = useLoader(GLTFLoader, url);
  return <primitive object={gltf.scene} />;
};
const App = () => {
  return <MyModelLoader url="/path/to/model.gltf" />;
};

Метод 4. Предварительная загрузка моделей

Чтобы обеспечить плавную загрузку и избежать задержек, вы можете предварительно загрузить модель GLTF с помощью GLTLoader:

import { useEffect } from 'react';
import { useLoader } from 'react-three-fiber';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
const MyModel = () => {
  const gltf = useLoader(GLTFLoader, '/path/to/model.gltf');
  return <primitive object={gltf.scene} />;
};
const PreloadModel = () => {
  const loader = new GLTFLoader();
  useEffect(() => {
    loader.load('/path/to/model.gltf', () => {
      // Model is preloaded
    });
  }, []);
  return null;
};
const App = () => {
  return (
    <>
      <PreloadModel />
      <MyModel />
    </>
  );
};

Метод 5. Отложенная загрузка с приостановкой

React Suspense можно использовать для ленивой загрузки моделей GLTF, гарантируя, что модель загружается только при необходимости:

import { Suspense } from 'react';
import { useLoader } from 'react-three-fiber';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
const MyModel = () => {
  const gltf = useLoader(GLTFLoader, '/path/to/model.gltf');
  return <primitive object={gltf.scene} />;
};
const App = () => {
  return (
    <Suspense fallback={null}>
      <MyModel />
    </Suspense>
  );
};

Метод 6: загрузка нескольких моделей

Если вам нужно загрузить несколько моделей GLTF, вы можете использовать Promise.all, чтобы дождаться загрузки всех моделей перед рендерингом:

import { Suspense } from 'react';
import { useLoader } from 'react-three-fiber';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
const MyModel = ({ url }) => {
  const gltf = useLoader(GLTFLoader, url);
  return <primitive object={gltf.scene} />;
};
const App = () => {
  const modelUrls = ['/path/to/model1.gltf', '/path/to/model2.gltf'];
  const models = modelUrls.map((url) => (
    <MyModel key={url} url={url} />
  ));
  return (
    <Suspense fallback={null}>
      {models}
    </Suspense>
  );
};

Метод 7: использование расширений React Three Fiber