Библиотека 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); // 10MathUtils.euclideanModulo(n, m)
Вычисляет корректный модуль с учётом отрицательных чисел. В отличие от
стандартного %, результат всегда положительный.
const result = THREE.MathUtils.euclideanModulo(-1, 5); // 4MathUtils.mapLinear(x, a1, a2, b1, b2)
Линейно переводит число x из диапазона
[a1, a2] в диапазон [b1, b2].
const mapped = THREE.MathUtils.mapLinear(0.5, 0, 1, 0, 100); // 50MathUtils.smoothstep(x, min, max)
Создаёт плавное линейное сглаживание для значения x в
диапазоне [min, max]. Используется для плавной анимации
параметров.
const smooth = THREE.MathUtils.smoothstep(0.5, 0, 1); // 0.5MathUtils предоставляет функции для интерполяции значений:
MathUtils.lerp(x, y, t) Линейная
интерполяция между числами x и y с
коэффициентом t от 0 до 1.
const value = THREE.MathUtils.lerp(0, 10, 0.25); // 2.5MathUtils.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); // trueMathUtils.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); // 0MathUtils.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, делая работу с 3D-пространством более удобной и предсказуемой.