Создание интерактивного 3D-эффекта выпуклого текста с помощью React Three Fiber
В этом уроке мы рассмотрим, как создать привлекательный эффект выпуклости на тексте с помощью React Three Fiber.
Последние несколько недель я экспериментировал со смешиванием 3D и 2D для создания захватывающих эффектов. Сегодня я расскажу вам, как воспроизвести этот эффект выпуклости в тексте.
Чтобы упростить процесс и сохранить структурированный подход к объединению HTML с 3D, мы будем использовать React Three Fiber.
Давайте погрузимся!
Начнем
Сначала давайте настроим нашу 3D-сцену, создав:
плоскость (где будет отображаться наш эффект выпуклости текста).
наш текстовый элемент HTML.
С помощью drei вы можете напрямую вставлять элементы HTML внутрь компонентов сцены, используя компонент HTML. В нашем случае это полезно, поскольку нам понадобится доступ к нашему HTML внутри нашей 3D-сцены.
Также важно поместить заголовок в один элемент div, который охватывает всю ширину и высоту области просмотра. Аналогично, для плоскости с помощью useThree()хука R3F мы можем легко получить размеры области просмотра.
А пока давайте установим непрозрачность плоскости на 0, чтобы увидеть наш HTML-элемент:
Преобразование HTML в текстуру
Теперь основная задача этого эффекта — преобразовать наш элемент div в текстуру, которую мы применим к нашей плоскости. Для этого мы воспользуемся библиотекой html2canvas для создания изображения из нашего элемента DOM, а затем преобразуем его в текстуру.
Чтобы упростить этот процесс для будущих проектов, давайте создадим собственный хук с именем useDomToCanvas.
Мы также можем улучшить хук для управления изменением размера, поскольку элемент div может оставаться за холстом. Нам просто нужно вызвать функцию при изменении размера окна. Чтобы предотвратить чрезмерные вызовы отрисовки, давайте включим устранение дребезга.
Реализация эффекта выпуклости
Теперь, чтобы добиться эффекта выпуклости, мы будем использовать шейдерные программы для доступа к вершинам плоскости. Хотя программирование шейдеров может показаться сложным, не волнуйтесь — в нашем случае это будет простой эффект. Мы разобьем его на три небольших шага, чтобы вы могли легко следить за происходящим.
Для ознакомления с шейдерами вы также можете обратиться к серии YouTube Льюиса Лептона .
Во-первых, давайте используем в shaderMaterialкачестве материала для плоскости и создадим наши фрагментные и вершинные шейдеры.
Шаг 1: Во-первых, идея состоит в том, чтобы нарисовать круг на нашей плоскости. Для этого мы будем использовать UV-координаты и функцию расстояния GLSL. Давайте инкапсулируем код в функцию для большей ясности.
Шаг 2. Теперь мы будем динамически корректировать исходное положение круга в зависимости от движения мыши. В R3F доступ к нормализованным позициям мыши осуществляется с помощью useFrame(). Передавая позиции мыши в качестве униформы во фрагментный шейдер, мы будем наблюдать за движением круга.
Шаг 3: Теперь нам просто нужно вызвать функцию круга в вершинном шейдере и отрегулировать положение Z на основе круга. И… вуаля! У нас есть эффект выпуклости!
(Также не забудьте заменить текстуру во фрагментном шейдере.)
Добавление освещения
Чтобы улучшить трехмерный вид, давайте добавим световые эффекты. Хотя кодирование пользовательских эффектов освещения во фрагментном шейдере может быть сложным, мы можем использовать существующие библиотеки, такие как customShaderMaterial . С помощью customShaderMaterial мы легко интегрируем стандартный материал и pointLight для достижения потрясающих эффектов затенения.
Поздравляем! Вы успешно реализовали эффект.
Я включил в репозиторий графический интерфейс, чтобы вы могли поиграть с позициями и цветом света. Мне бы очень хотелось увидеть ваши творения и то, как вы развиваете эти демо. Не стесняйтесь поделиться со мной своими экспериментами в Твиттере !
