Three.js – это мощная библиотека JavaScript, позволяющая создавать потрясающую 3D-анимацию и интерактивную графику прямо в браузере. В этой статье блога мы погрузимся в мир анимации в Three.js и рассмотрим различные методы воплощения ваших проектов в жизнь. Попутно мы предоставим примеры кода, которые помогут вам понять процесс реализации. Итак, начнём!

Методы анимации в Three.js:

1. Базовая анимация с помощью requestAnimationFrame:
   Метод requestAnimationFrame обеспечивает плавный и эффективный способ создания анимации в браузере. Вот пример кода:

function animate() {
  requestAnimationFrame(animate);
  // Update your scene or object properties here
  renderer.render(scene, camera);
}
animate();

1. Анимация ключевых кадров с помощью Tween.js:
   Tween.js — это популярная библиотека анимации, которую можно интегрировать с Three.js для создания плавных переходов между значениями свойств. Вот пример анимации положения объекта:

// Include Tween.js library in your HTML file
// Create a tween
var tween = new TWEEN.Tween(object.position)
  .to({ x: 10, y: 5, z: 0 }, 2000)
  .easing(TWEEN.Easing.Quadratic.InOut)
  .start();

// Update the tween in your animation loop
function animate() {
  requestAnimationFrame(animate);
  TWEEN.update();
  renderer.render(scene, camera);
}
animate();

1. Анимация морфинга с помощью целевых объектов морфинга.
   Цели морфинга позволяют плавно переходить между различными положениями вершин 3D-модели. Вот пример:

// Define morph targets in your geometry
geometry.morphTargets.push({ name: 'target1', vertices: target1Vertices });
geometry.morphTargets.push({ name: 'target2', vertices: target2Vertices });
// Create a morph target animation
var morphAnimation = new THREE.MorphAnimation(mesh);
morphAnimation.duration = 1000; // Animation duration in milliseconds
morphAnimation.play();
// Update the animation in your render loop
function animate() {
  requestAnimationFrame(animate);
  morphAnimation.update(clock.getDelta());
  renderer.render(scene, camera);
}
animate();

1. Скелетная анимация с помощью SkinnedMesh:
   SkinnedMesh позволяет анимировать сложные модели с костями и смешивать разные позы. Вот упрощенный пример:

// Load your model with bones and animations
var loader = new THREE.GLTFLoader();
loader.load('model.gltf', function (gltf) {
  var model = gltf.scene;
  var mixer = new THREE.AnimationMixer(model);
  // Play a specific animation
  var action = mixer.clipAction(gltf.animations[0]);
  action.play();
  // Update the animation in your render loop
  function animate() {
    requestAnimationFrame(animate);
    mixer.update(clock.getDelta());
    renderer.render(scene, camera);
  }
  animate();
});

1. Анимация системы частиц:
   Three.js предоставляет встроенный класс ParticleSystem для создания динамических эффектов частиц. Вот простой пример:

// Create a particle system
var particleSystem = new THREE.GPUParticleSystem({
  maxParticles: 1000,
  // Set particle properties here
});
// Update the particle system in your render loop
function animate() {
  requestAnimationFrame(animate);
  particleSystem.update(clock.getDelta());
  renderer.render(scene, camera);
}
animate();

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