MathUtils: вспомогательные функции

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


Преобразование углов

Одной из наиболее часто используемых функций является преобразование углов:

  • MathUtils.degToRad(degrees) Преобразует угол из градусов в радианы. Это необходимо, так как в Three.js большинство функций, связанных с вращением объектов, принимает значения в радианах. Пример использования:

    const angleRad = THREE.MathUtils.degToRad(90); // 1.5708 радиан
  • MathUtils.radToDeg(radians) Обратная функция, переводящая радианы в градусы. Полезна при выводе данных или при интеграции с системами, где градусы являются стандартом.

    const angleDeg = THREE.MathUtils.radToDeg(Math.PI / 2); // 90 градусов

Ограничение и нормализация значений

MathUtils содержит функции для контроля значений и их приведения к определённым диапазонам:

  • MathUtils.clamp(value, min, max) Ограничивает число в заданном диапазоне [min, max].

    const limited = THREE.MathUtils.clamp(15, 0, 10); // 10
  • MathUtils.euclideanModulo(n, m) Вычисляет корректный модуль с учётом отрицательных чисел. В отличие от стандартного %, результат всегда положительный.

    const result = THREE.MathUtils.euclideanModulo(-1, 5); // 4
  • MathUtils.mapLinear(x, a1, a2, b1, b2) Линейно переводит число x из диапазона [a1, a2] в диапазон [b1, b2].

    const mapped = THREE.MathUtils.mapLinear(0.5, 0, 1, 0, 100); // 50
  • MathUtils.smoothstep(x, min, max) Создаёт плавное линейное сглаживание для значения x в диапазоне [min, max]. Используется для плавной анимации параметров.

    const smooth = THREE.MathUtils.smoothstep(0.5, 0, 1); // 0.5

Интерполяции

MathUtils предоставляет функции для интерполяции значений:

  • MathUtils.lerp(x, y, t) Линейная интерполяция между числами x и y с коэффициентом t от 0 до 1.

    const value = THREE.MathUtils.lerp(0, 10, 0.25); // 2.5
  • MathUtils.lerpColors(color1, color2, t) (дополнительно в ColorUtils) Позволяет плавно переходить между двумя цветами.

  • MathUtils.randFloat(low, high) и MathUtils.randInt(low, high) Генерация случайных чисел с плавающей точкой или целых чисел в указанном диапазоне.

    const randomFloat = THREE.MathUtils.randFloat(0, 1);
    const randomInt = THREE.MathUtils.randInt(0, 10);
  • MathUtils.randFloatSpread(range) Генерирует случайное число в диапазоне [-range/2, range/2]. Особенно удобно при случайном размещении объектов.

    const positionX = THREE.MathUtils.randFloatSpread(10); // случайное число от -5 до 5

Проверка степеней двойки

Для оптимизации текстур и геометрии в WebGL часто важно, чтобы размеры были степенями двойки. MathUtils содержит утилиты для этого:

  • MathUtils.isPowerOfTwo(value) Проверяет, является ли число степенью двойки.

    const check = THREE.MathUtils.isPowerOfTwo(256); // true
  • MathUtils.ceilPowerOfTwo(value) и MathUtils.floorPowerOfTwo(value) Возвращают ближайшую степень двойки выше или ниже указанного числа.

    const ceilPow = THREE.MathUtils.ceilPowerOfTwo(300); // 512
    const floorPow = THREE.MathUtils.floorPowerOfTwo(300); // 256

Угловые интерполяции

Работа с углами в 3D требует аккуратного обращения с поворотами:

  • MathUtils.angleBetweenVectors(v1, v2) (через Vector3) Позволяет вычислить угол между двумя векторами. Используется для направления камер, света или движения объектов.

  • MathUtils.lerpAngle(a, b, t) Линейная интерполяция между углами с учётом обхода через 360°.

    const interpolatedAngle = THREE.MathUtils.lerpAngle(350, 10, 0.5); // 0
  • MathUtils.damp(current, target, lambda, deltaTime) Плавное затухание значения current к target с коэффициентом затухания lambda. Отлично подходит для сглаживания движения камеры или объектов.

    const smoothValue = THREE.MathUtils.damp(0, 10, 0.1, 0.016);

Особенности использования

  • Числовая стабильность: функции типа clamp, euclideanModulo и smoothstep обеспечивают корректные результаты при крайних значениях, что критично для физически корректных симуляций.
  • Производительность: большинство функций реализованы оптимально и могут вызываться в каждом кадре анимации.
  • Совместимость: MathUtils работает во всех современных версиях Three.js и является стандартным инструментом при работе с числами, интерполяциями и углами.

Использование MathUtils позволяет значительно сократить количество кода, повышает читаемость и надёжность приложений на Three.js, делая работу с 3D-пространством более удобной и предсказуемой.