Для Конференция Three.js в Париже мы хотели создать что-то, что больше походило бы не на веб-сайт, а на небольшой цифровой механизм.
Идея была проста: Введите свое имя. Превратите его в металл.
Идея началась с самих букв.
Каждая буква представлена в виде замкнутого контура, состоящего ровно из 120 очков. Буквы логотипа используют предварительно определенные данные точек. Для имен, созданных пользователем, мы идем немного другим путем: рисуем каждую букву на скрытом холсте, преобразуем ее в пиксельную маску, обводим контур, сглаживаем его и возвращаем к той же структуре из 120 точек.
Отверстия тоже учитываются: «Б» без отверстий была бы совсем другой «Б». Сохранение фиксированного количества очков делает возможным следующий шаг.
Сделать одну букву другой
Каждой точке на одной букве соответствует точка на следующей. Мы интерполируем между ними, перемещая контуры по изогнутой траектории в пространстве. Вместо того, чтобы использовать простой морф, мы также деформируем структуру при ее движении.
Точки крутятся, сужаются и наклоняются по пути. То, что начинается с двух плоских контуров, превращается в непрерывную конструкцию, как если бы букву протягивали через металлическую трубку.
Это небольшой фрагмент кода, отвечающий за большую часть этого преобразования.
for (let k = 0; k Цикл обрабатывает три вещи одновременно: интерполирует форму между двумя контурами, перемещает точки вдоль кривой и применяет деформацию, которая придает переходу органическое движение.
Построй его как башню
Как только контуры текут в пространстве, мы превращаем полученную геометрию в легкую структурную систему.
Вместо рендеринга сплошной трубы мы сохраняем выбранные продольные линии, поперечные раскосы и диагональные опоры. Конструкция черпает вдохновение из Эйфелевой башни и ее подхода к тому, чтобы сделать большую и сложную форму удивительно легкой.
Все это отображается в Три.js используя геометрию линий и собственный шейдер.
За металлом нет реальной трассировки лучей. Отражающий вид достигается за счет запеченной карты отражений, которая придает структуре меняющуюся металлическую поверхность без добавления ненужных затрат на рендеринг.
Сделайте это своим
Система не ограничивается нашими предопределенными буквами. Тип твое собственное имянаблюдайте, как он превращается в структуру, затем выберите отделку и поделитесь результатом.
Если сделаете, отметьте нас и Конференция Three.js — нам бы хотелось посмотреть, какие имена люди вводят в него.
Одно имя. Один кусочек цифровой архитектуры.
Вот и весь эксперимент: появляется имя, появляется небольшой кусочек цифровой архитектуры.
Создан для Конференция Three.js в Париже БЛ/С®.