Sprite: плоский объект всегда лицом к камере

Sprite — это плоский объект в сцене Three.js, который всегда ориентирован лицом к камере, независимо от положения или вращения камеры. Это делает его идеальным для создания эффектов частиц, иконок, визуализации световых объектов или HUD-элементов. В отличие от обычных Mesh-объектов, спрайты не имеют геометрической глубины и воспринимаются как двумерные изображения в трёхмерном пространстве.

Спрайт определяется с помощью класса THREE.Sprite, который требует материал типа THREE.SpriteMaterial. Ключевым отличием от обычного материала для Mesh является то, что SpriteMaterial поддерживает прозрачность, карту текстуры и управление цветом с учётом камеры.

Создание спрайта

Простейший спрайт создается в несколько шагов:

// Импорт классов
import * as THREE from 'three';

// Создание текстуры
const textureLoader = new THREE.TextureLoader();
const spriteTexture = textureLoader.load('sprite.png');

// Создание материала для спрайта
const spriteMaterial = new THREE.SpriteMaterial({ map: spriteTexture, color: 0xffffff });

// Создание объекта спрайта
const sprite = new THREE.Sprite(spriteMaterial);

// Установка позиции в пространстве
sprite.position.set(0, 2, -5);

// Добавление в сцену
scene.add(sprite);

Ключевые моменты:

  • map — текстура спрайта.
  • color — умножает цвет текстуры, полезно для динамического изменения оттенка.
  • Спрайт автоматически поворачивается к камере при каждом рендере.

Свойства Sprite

  1. position — задаёт положение в пространстве (Vector3).
  2. scale — задаёт размеры спрайта (Vector3). Например, sprite.scale.set(2, 2, 1) увеличит спрайт вдвое.
  3. material — ссылка на SpriteMaterial, через который настраиваются визуальные параметры.
  4. center — точка привязки спрайта, по умолчанию (0.5, 0.5) (центр изображения). Может быть изменена, чтобы спрайт вращался относительно угла или другой точки.
sprite.center.set(0, 0); // привязка к левому нижнему углу

Настройка материала SpriteMaterial

THREE.SpriteMaterial имеет ряд важных параметров:

  • map — текстура спрайта.
  • color — базовый цвет, умножается на текстуру.
  • rotation — вращение спрайта в радианах (не влияет на ориентацию к камере).
  • sizeAttenuation — логическая величина (true по умолчанию), определяющая, будет ли спрайт уменьшаться с увеличением расстояния до камеры. Если false, спрайт всегда будет одного размера на экране.
  • opacity — прозрачность (от 0 до 1).
  • transparent — включает поддержку прозрачности.

Пример использования sizeAttenuation:

const spriteMaterial = new THREE.SpriteMaterial({
    map: spriteTexture,
    color: 0xffffff,
    sizeAttenuation: false
});

При таком параметре спрайт будет фиксированного размера на экране, что удобно для HUD-элементов.

Анимация и эффекты

Спрайты часто применяются в эффектах частиц. Для анимации можно использовать смену текстуры, изменение позиции, масштаба и цвета.

function animate() {
    requestAnimationFrame(animate);

    // Пример вращения и пульсации
    sprite.material.rotation += 0.01;
    sprite.scale.setScalar(Math.sin(Date.now() * 0.005) + 1.5);

    renderer.render(scene, camera);
}

animate();

Примечания по производительности:

  • Для множества спрайтов (сотни и тысячи) рекомендуется использовать THREE.Points, так как индивидуальные Sprite создают отдельные draw call’ы.
  • Использование текстурного атласа уменьшает количество загрузок текстур и повышает производительность.

Комбинация спрайтов с другими объектами

Спрайт может быть привязан к любой позиции или объекту сцены:

const sphere = new THREE.Mesh(
    new THREE.SphereGeometry(1, 32, 32),
    new THREE.MeshBasicMaterial({ color: 0x00ff00 })
);
scene.add(sphere);

// Спрайт над объектом
sprite.position.set(0, 2, 0);
sphere.add(sprite);

При этом спрайт всегда будет смотреть на камеру, сохраняя свою видимость и читаемость, вне зависимости от вращения объекта-родителя.

Работа с прозрачностью и смешиванием

Для реалистичных визуальных эффектов, таких как световые ореолы или огонь, важны параметры blending и transparent:

const spriteMaterial = new THREE.SpriteMaterial({
    map: spriteTexture,
    color: 0xffffff,
    transparent: true,
    blending: THREE.AdditiveBlending
});
  • THREE.AdditiveBlending — добавляет яркость к фоновым объектам, создавая эффект свечения.
  • THREE.NormalBlending — стандартное смешивание.
  • THREE.MultiplyBlending — затемняет фон в зависимости от цвета спрайта.

Оптимизация и советы

  • Использовать один материал для множества спрайтов, если они имеют одинаковую текстуру.
  • Минимизировать количество текстур и их разрешение для частиц.
  • Для большого количества динамических спрайтов использовать PointsMaterial и BufferGeometry, что позволяет рендерить тысячи элементов с минимальными draw call’ами.
  • Для спрайтов с анимацией лучше использовать texture atlas с изменением map.offset и map.repeat.

Спрайты в Three.js — универсальный инструмент для отображения двумерных элементов в трёхмерной сцене, позволяющий создавать визуально богатые эффекты, оставаясь при этом оптимизированным и управляемым на уровне кода.

Оглавление