Морф-анимация: morphTargetInfluences

Морф-анимация позволяет плавно трансформировать одну геометрию в другую, создавая эффект «живого» изменения формы объекта. В Three.js для этого используется свойство morphTargetInfluences объекта Mesh, которое управляет степенью влияния каждого морф-таргета на исходную геометрию.

Геометрия и морф-таргеты

Для морф-анимации необходима геометрия с заранее подготовленными морф-таргетами. Морф-таргеты — это альтернативные версии вершин исходного объекта. Каждая вершина морф-таргета соответствует вершине исходной геометрии, но с изменённой позицией, нормалью или цветом.

const geometry = new THREE.BoxGeometry(1, 1, 1);

// Добавление морф-таргета
geometry.morphAttributes.position = [];
const morphTarget = new Float32Array(geometry.attributes.position.count * 3);
for (let i = 0; i < geometry.attributes.position.count; i++) {
    morphTarget[i*3] = geometry.attributes.position.getX(i) + Math.random() * 0.2;
    morphTarget[i*3+1] = geometry.attributes.position.getY(i) + Math.random() * 0.2;
    morphTarget[i*3+2] = geometry.attributes.position.getZ(i) + Math.random() * 0.2;
}
geometry.morphAttributes.position.push(new THREE.BufferAttribute(morphTarget, 3));

Свойство morphTargetInfluences

Каждый Mesh с морф-таргетами имеет массив morphTargetInfluences. Его длина соответствует количеству морф-таргетов, а значения варьируются от 0 до 1:

  • 0 — морф-таргет не влияет на геометрию.
  • 1 — морф-таргет полностью применён.
  • Любое значение между 0 и 1 — частичное влияние, создающее плавную трансформацию.

Пример управления морф-таргетом:

const mesh = new THREE.Mesh(geometry, material);
mesh.morphTargetInfluences[0] = 0.5; // Половинное влияние первого морф-таргета

Создание анимации

Для плавного изменения формы используют цикл рендеринга (requestAnimationFrame) и интерполяцию значений морф-таргета. Часто применяют синусоидальные или линейные функции для циклических эффектов:

let time = 0;

function animate() {
    requestAnimationFrame(animate);
    time += 0.01;

    mesh.morphTargetInfluences[0] = (Math.sin(time) + 1) / 2; // Влияние от 0 до 1

    renderer.render(scene, camera);
}

animate();

Использование нескольких морф-таргетов

В одной геометрии может быть несколько морф-таргетов. Их влияния складываются, что позволяет создавать сложные формы и комбинации движений:

mesh.morphTargetInfluences[0] = 0.3;
mesh.morphTargetInfluences[1] = 0.7;

Важно следить за суммой влияний, так как слишком высокие значения могут привести к искажениям.

Материалы и поддержка морф-анимации

Не все материалы Three.js поддерживают морф-анимацию. Основные, которые работают с морф-таргетами:

  • MeshStandardMaterial
  • MeshPhongMaterial
  • MeshLambertMaterial

Для включения поддержки необходимо установить флаг morphTargets в материал:

const material = new THREE.MeshStandardMaterial({
    color: 0x00ff00,
    morphTargets: true
});

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

  1. Комбинация морф-анимации и скелетной анимации: позволяет объединять трансформации вершин с костной анимацией для более сложных эффектов.
  2. Динамическая генерация морф-таргетов: можно программно создавать морф-таргеты в рантайме, изменяя форму объектов на основе алгоритмов.
  3. Интеграция с AnimationMixer: морф-анимацию можно интегрировать с системой анимаций Three.js, используя THREE.NumberKeyframeTrack и ключевые кадры для автоматического управления morphTargetInfluences.

Практические рекомендации

  • Для сложных объектов количество морф-таргетов лучше ограничивать, так как каждое влияние увеличивает нагрузку на GPU.
  • Для органических форм (лица, ткани, жидкости) морф-анимация создаёт более естественное движение, чем костная.
  • Поддержка нормалей в морф-таргетах важна для корректного освещения, особенно при использовании MeshStandardMaterial.

Морф-анимация через morphTargetInfluences — мощный инструмент Three.js, позволяющий создавать плавные трансформации формы объектов, обеспечивая богатые визуальные эффекты и динамику сцены.

Оглавление