Мне нужен был живой 3D-фон для лендинга — знаете, эти вращающиеся облака частиц, как на сайтах дорогих AI-стартапов. Писать такое на Three.js с нуля — вечер минимум, если хочешь честные 60 fps на 20 тысячах частиц. А я не хотел ни вечера, ни Three.js.

Наткнулся на Casberry — бесплатный симулятор частиц, который работает прямо в браузере, без регистрации. Сделал фон за 20 минут. Разбираю по шагам.

Шаг 1. Берём форму или модель

Заходишь на particles.casberry.in — там уже крутится геодезическая сфера из частиц. Можно взять готовую фигуру, загрузить свою 3D-модель (форматы .glb, .obj, .pdb), картинку, видео или даже чертёж. Либо ввести текст через Smart Text Engine — он превратит надпись в россыпь частиц.

Шаг 2. Крутим слайдеры

Слева панель «System Core»: количество частиц (по умолчанию 20 000), скорость симуляции, интенсивность свечения. Есть 8 визуальных стилей: spark, plasma, ink, paint, steel, glass, vector, cyber. Я взял plasma — неоновое гало, то что нужно.

Шаг 3. Экспортируем код

Кнопка Export Formation в правом верхнем углу открывает окно с семью форматами: Vanilla JS (готовый HTML), React-компонент, Three.js-модуль, обои-картинки, PLY, GLB и OBJ. Мне нужен был React — получаю компонент на @react-three/fiber, кидаю в папку components, импортирую. Всё — анимация стартует при загрузке.

Где на самом деле прячется ИИ

Меня подкупило слово AI в названии, а устроено всё не так, как я ждал: нейросеть не рисует фон сама. Внутри есть AI Educational Simulator — ты копируешь готовый промпт, вставляешь в Gemini или Claude, и модель пишет функцию, которая задаёт движение частиц. Сервис валидирует её и запускает в браузере.

И вот тут самое интересное: промпт написан как инженерный контракт. Функция вызывается 20 000 раз на кадр при 60 fps, поэтому правила жёсткие:

  • никаких new внутри цикла — ноль сборки мусора;
  • математика вместо if/else;
  • никаких NaN и undefined;
  • все переменные объявлены через let/const.

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

Итог

20 минут, ноль строк Three.js руками, рабочий компонент в проде. Минус один: чтобы сделать что-то по-настоящему своё, придётся всё же подружиться с промптом — но это уже не вечер, а полчаса.