Экспорт анимаций из Blender в glTF

Экспорт анимаций из Blender в формат glTF требует тщательной подготовки сцены и модели. Первым шагом является проверка структуры модели. Все объекты, участвующие в анимации, должны иметь правильные именования и иерархию, так как glTF строго сохраняет структуру сцены. Рекомендуется использовать Armature для скелетной анимации и убедиться, что все веса вершин корректно распределены по костям.

Все ключевые кадры должны быть выставлены на Action внутри Dope Sheet > Action Editor. Для комплексных проектов удобно создавать отдельные Actions для каждой анимации (например, «Idle», «Walk», «Run»), что упрощает управление анимациями после импорта в Three.js. Необходимо удалить все лишние модификаторы, которые не поддерживаются glTF, например, Boolean или Remesh, так как они могут некорректно экспортироваться.

Перед экспортом важно убедиться, что сцена находится в корректных единицах измерения: Blender использует метры по умолчанию, что совпадает с единицами Three.js.

Настройка экспорта в glTF

Blender предоставляет встроенный экспорт glTF 2.0 через меню File → Export → glTF 2.0. Ключевые параметры:

  • Format: glTF Binary (.glb) или glTF Embedded (.gltf); .glb объединяет все ресурсы в один файл, .gltf сохраняет текстуры отдельно.
  • Include: следует выбрать Selected Objects, если требуется экспортировать только выделенные объекты.
  • Transform: важно включить +Y Up, чтобы соответствовать координатной системе Three.js.
  • Animation: флажки Animations и Skinning должны быть включены для корректного экспорта скелетной анимации.
  • Compression: поддержка Draco Mesh Compression может существенно уменьшить размер модели, но требует последующей настройки в Three.js при загрузке.

Особое внимание стоит уделить Bake Animation. Если анимация содержит constraints, драйверы или модификаторы, их нужно “запечь” в ключевые кадры, чтобы glTF мог корректно воспроизвести движения.

Работа с анимациями в Three.js

После экспорта файл загружается через GLTFLoader:

import * as THREE from 'three';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';

const loader = new GLTFLoader();
loader.load('model.glb', (gltf) => {
    const model = gltf.scene;
    scene.add(model);

    const mixer = new THREE.AnimationMixer(model);
    gltf.animations.forEach((clip) => {
        mixer.clipAction(clip).play();
    });

    animate();

    function animate() {
        requestAnimationFrame(animate);
        const delta = clock.getDelta();
        mixer.update(delta);
        renderer.render(scene, camera);
    }
});

AnimationMixer управляет всеми действиями модели. Каждый AnimationClip, экспортированный из Blender, можно запускать, останавливать и смешивать. Для переключения между анимациями используется метод fadeIn и fadeOut, позволяющий создавать плавные переходы.

Оптимизация анимаций

  • Удаление неиспользуемых костей: уменьшает размер файла и ускоряет рендеринг.
  • Сведение Actions: если несколько коротких анимаций можно объединить в один клип с разными сегментами, это упрощает управление.
  • Кадровая частота: Blender по умолчанию экспортирует каждое ключевое значение; при высокой частоте кадров файл может сильно разрастись. Использование функции Sampling позволяет сократить количество кадров без потери качества анимации.

Учет текстур и материалов

glTF поддерживает PBR материалы. При экспорте необходимо убедиться, что текстуры:

  • Преобразованы в sRGB для диффузных карт.
  • Используются корректные форматы (PNG, JPEG) с оптимальным разрешением.
  • Все UV-карты правильно назначены, иначе анимация может показывать артефакты при деформации.

Three.js автоматически интерпретирует PBR-материалы glTF, поэтому большинство настроек Blender корректно переносится.

Проверка и отладка

После экспорта рекомендуется использовать https://gltf-viewer.donmccurdy.com/ для предварительной проверки модели и анимаций. Это позволяет убедиться, что:

  • Все анимации воспроизводятся корректно.
  • Кости и меши деформируются правильно.
  • Материалы и текстуры отображаются ожидаемым образом.

Любые проблемы на этом этапе проще исправить в Blender, чем позже в Three.js.

Продвинутые техники

  • Смешивание анимаций: можно комбинировать несколько AnimationClip одновременно, создавая сложные движения.
  • Root Motion: перенос положения персонажа с анимации в Three.js, сохраняя физическую логику движения.
  • Morph Target анимации: для лиц или деформаций мышц поддерживаются через morphTargetInfluences, экспортируются из Blender как shape keys.

Правильная подготовка и оптимизация экспорта glTF обеспечивает максимальную совместимость с Three.js, минимизирует ошибки и позволяет создавать плавные, реалистичные анимации в веб-среде.

Оглавление