Загрузка моделей: GLTFLoader

Кубы и сферы хороши для прототипа. Настоящие персонажи и предметы делают в редакторах и загружают как модели.

glTF (и бинарный .glb) — стандартный формат 3D-моделей для веба; GLTFLoader асинхронно загружает их в сцену.

Почему glTF

Сложную геометрию — человека, машину, дерево — руками из примитивов не собрать. Её моделируют в Blender, Maya, или скачивают готовую, и экспортируют в glTF. Этот формат называют «JPEG для 3D»: он компактный, быстро грузится, хранит геометрию, материалы, текстуры и даже анимации. Вариант .glb упаковывает всё в один бинарный файл — удобно для веба.

Загрузка

GLTFLoader — это addon. Загрузка идёт по сети, поэтому она асинхронная: вы передаёте колбэк, который сработает, когда модель будет готова.

import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';

const loader = new GLTFLoader();

loader.load(
  '/models/robot.glb',
  (gltf) => {
    scene.add(gltf.scene);        // модель готова — добавляем
    gltf.scene.position.set(0, 0, 0);
  },
  (progress) => {
    console.log('Загружено:', (progress.loaded / progress.total * 100).toFixed(0) + '%');
  },
  (error) => {
    console.error('Ошибка загрузки модели', error);
  }
);

Главное — gltf.scene: это корневой объект модели со всей иерархией мешей. Его и добавляют в сцену. Внутри колбэка модель можно масштабировать, повернуть, поставить в нужное место.

Частые нюансы

Масштаб. Модель может прийти гигантской или крошечной — подгоните gltf.scene.scale.
Свет. Материалы моделей обычно PBR (Standard) — без света будут чёрными. Добавьте Ambient + Directional.
Анимации. Если в файле есть анимации, они лежат в gltf.animations и проигрываются через AnimationMixer.
Пути и сервер. Локально файл нужно отдавать через dev-сервер (Vite), а не открывать HTML двойным кликом — иначе браузер заблокирует загрузку.

Где брать модели

Готовые бесплатные модели в glTF есть на Sketchfab, Poly Haven, в Khronos glTF Sample Models. Для обучения этого хватит с запасом; для продакшена модели обычно делает 3D-художник под задачу.

Итог

glTF/.glb — стандартный, компактный формат моделей для веба.
GLTFLoader грузит асинхронно; модель добавляют как gltf.scene в колбэке.
Не забудьте про свет и масштаб — частые причины «ничего не видно».