Как создавать потрясающие 3D-сцены с помощью React Three Fiber

WebGL — волшебный соус за Solar Storm, аудио-реактивным музыкальным видео который отображается в браузере. После долгих лет возни с Three.js, WebGL наконец-то нашел меня благодаря React Three Fiber. Это потому, что я мог использовать знакомые концепции — компоненты, свойства, хуки и состояние — и перенести свои навыки разработки приложений в трехмерную графику.

В этой статье показано, как создавать захватывающие трехмерные анимации с помощью React Three Fiber (R3F) . Мы рассмотрим настройку сцены, создание геометрии, добавление освещения и включение эффектов постобработки. Более того, вы узнаете, воссоздав приведенную ниже анимацию с нуля.

Декларативный и компонентный WebGL

Прежде чем мы начнем, это Стоит рассказать, почему сборка из компонентов дает больше преимуществ, чем просто знакомство .

Разделение пользовательского интерфейса на компоненты упрощает анализ кода и построение сложных интерфейсов. Структура, стиль и связанная логика инкапсулируются в один модуль многократного использования. Вы можете протестировать все его варианты и проработать крайние случаи. То же самое и для WebGL.

В Three.js код для создания геометрии и материала, объединения их в сетку и анимации разбивается на несколько частей файла. R3F позволяет упаковать все это в один компонент. Таким образом, вы можете начать с построения базовых мешей, затем постепенно комбинировать их для создания сцен и, наконец, наложить эффекты постобработки.

Постройте часть по частям

Storybook — это мой инструмент для изолированного построения мешей. Это позволяет вам улучшать их, не беспокоясь о других элементах сцены. Никакого постоянного изменения положения или переключения глобального освещения и эффектов. Вы можете сосредоточиться на том, чтобы получить нужный внешний вид.

Для начала вам понадобится минимальная сцена, в которой каждая история будет заключена в декоратор.

   импорт   { StoryStage }   из   '../../. Storybook / StoryStage'  ; 
 импорт   { TetrisBlock }   из   './ TetrisBlock'  ; 

 экспорт   по умолчанию   {
  title :   'Meshes / TetrisBlock'  
  компонент :  TetrisBlock 
  декораторы :   [  (  storyFn  )   =>   < StoryStage >   {  storyFn   ( )  }   <  /  StoryStage >  ]  
}  ;   

Ваша первая сцена

Веб-интерфейс построено с использованием HTML и CSS. 3D-сцены похожи, но строительными блоками являются геометрия, материал и источники света. Вы начинаете с Геометрии которая описывает форму объекта (вспомните HTML). Вы можете применить к этой геометрии Материал который управляет внешним видом (например, CSS). Вместе вы получите сетку Mesh . Вы можете разместить эту сетку в трехмерном пространстве. Затем добавьте несколько источников света чтобы иметь возможность видеть ваш объект. Наконец, Renderer визуализирует все так, как если бы вы смотрели на него через Camera .

Loading …

Выше демонстрация вводной 3D-сцены — вращающейся коробки. Обратите внимание, как все является компонентом. Холст, свет, геометрия, материал и сетка. Весь API-интерфейс Three.js автоматически доступен как компоненты в R3F.

Декомпозиция и построение сцены

Теперь, когда у нас есть основы , вернемся к визуализации, которую мы создаем. Элементы верхнего уровня этой сцены:

• Компоненты: они имеют формы блоков тетриса с полупрозрачным материалом.
• Данные и состояние: это плоские самолеты с необычными пользовательскими текстурами.
• Ярлык: это просто наложение текста.

Компоненты (блоки тетриса)

компоненты в этой визуализации представлены блоками тетриса . Эти формы создаются путем рисования двухмерного пути и последующего его выдавливания по оси Z. Мы будем использовать утилиту Extrude от Drei, которая предлагает сокращенный синтаксис для создания таких фигур.

Drei — помощник библиотека, которая предлагает утилиты для общих задач Three.js, например, для добавления аудио или элементов управления Orbit или создания пользовательского материала шейдера.

Загрузка …

Синтаксис для определения формы закрыт e аналогично SVG Paths. Вы можете управлять глубиной выдавливания и скошенными краями с помощью extrudeSettings .

Это то, что касается геометрии, но помните, что сетка состоит из геометрии и материала. Здесь мы будем использовать MeshPhysicalMaterial. Он позволяет воспроизвести такие физические свойства, как прозрачность, шероховатость и прозрачность. В данном случае мы использовали его для эффекта Глассморфизма, который сейчас является суперпопулярной эстетикой.

Data & State

Теперь, когда мы знаем, как создавать сетки, давайте сосредоточимся на создании нестандартных материалов. По своей сути материал — это шейдер, а шейдер — это программа, которая принимает набор входных данных и создает текстуру. Для данных и состояния мы создадим пользовательские материалы шейдера с помощью утилиты shaderMaterial от Drei.

Загрузка …

shaderMaterial включает набор униформ и вершинные и фрагментные шейдеры и возвращает материал. Затем мы используем extend чтобы добавить его в пространство имен R3F и, наконец, применить к Plane.

Не знаете, как начать работу с шейдерами? Посетите рынок Poimandres, чтобы найти кучу готовых к использованию материалов.

Шейдер в этом примере использует шум и анимирован с использованием формы времени . Вы можете использовать хук useFrame для доступа к часам Three.js и обновления значения времени.

Label

Отрисовка текста в WebGL сложна . Эта сложность возрастает только в том случае, если вы хотите использовать собственный шрифт. Вот почему, если возможно, используйте HTML и наложите текст поверх сцены. Это именно то, что мы здесь делаем. Этикетка абсолютно расположена поверх холста.

   импорт  React  из   'реагировать'   ; 
 импорт  стилизованный  из   'стилизованные компоненты'  ; 

 const  Контейнер  =  в стиле .  div   ` 
  указатель-события: нет;
  положение: фиксированное;
  слева: 0;
  справа: 0;
  внизу: 0;
  ширина: 100%;
  высота: 144 пикселя;
  `  ; 

 const  Box  =  style .  div   `  ...  `   ; 
 const  Текст  =  style .  div   `  ...  `   ; 

 экспорт   const   Метка   =   ( )   =>   {
   возврат   (
     < Контейнер > 
       < Коробка > 
         < Текст >  Атомные компоненты  <  /  Текст > 
       <  /  Коробка > 
     <  /  Контейнер > 
  )  ; 
}  ;   

Для более сложных приложений я рекомендую компонент Html, который контролирует размер и расположение вашего HTML-контента в зависимости от его местоположения. в трехмерном пространстве.

Составьте сцену и оживите!

Теперь у нас есть все биты; следующий шаг — анимировать их с помощью React Spring. Он использует модель на основе физики пружины, где анимированные свойства создаются с помощью хука useSpring и применяются к экземпляру анимированного компонента .

   import  React  from   ' реагировать ' ; 

 const   STEP_COUNT   =   4  ; 

 экспорт   функция   useCDDState   ( )   {
   const   [ step  setStep ]   =  React .   useState   (  0  )  ; 

  React .   useEffect   (  ( )   =>   { ]
     const  t  =   setInterval   (
       ( )   =>   setStep   (  (  состояние ) )   =>   ( состояние  +   1  )  %   STEP_COUNT  )  
       3000 
    )  ; 
     return   ( )   =>   clearTimeout   ( t )  ; 
  }    [ ]  )  ; 

   возврат  шаг ; 
} 




 

   импорт   *   как   ТРИ   из   "три"  ; 
 импорт  React   { useMemo }   из   'реагировать'  ; 
 import   { Effects  as  EffectsComposer }   из   '@ react-three / drei'  ; 
 import   { extend  useThree }   из   '@ react-three / fiber'  ; 
 импорт   { UnrealBloomPass }   из   'three-stdlib'  ; 

 расширить   (  { UnrealBloomPass }  )  ; 

 экспорт   const   Эффекты   =   ( )   =>   {
   const   { размер  сцена  камера }   =   useThree   ( )  ; 
   const  аспект  =   useMemo   (
     ( )   =>   новый   ТРИ .  Vector2   ( размер .  ширина  размер .  высота )  
     [ размер ] 
  )  ; 

   возврат   (
     < EffectsComposer
      мультисампинг  =   {  8  } 
      renderIndex  =   {  1  } 
      disableGamma
      disableRenderPass
    > 
       < renderPass attachArray  =   "проходит"  сцена  =   { сцена }  камера  =   { камера }   /  > 
       < unrealBloomPass attachArray  =   «проходит»  args  =   {  [ аспект  ]  0,4    1    0  ]   }   /  > 
     <  /  EffectsComposer > 
  )  ; 
}  ;