Сегодня мы хотим рассказать , как создать весьма интересные анимированные линии с эффектом параллакса. У нас будет набор из пяти демонстраций с анимированными ленточками которые будут использовать WebGL,  а также при помощи библиотеки THREE.MeshLine. Узнайте, как анимировать и строить эти линии, чтобы создавать свои собственные анимации, ведь это не так сложно как кажется на первый взгляд. Каждая демонстрация будет по своему уникальная и интересная и реагировать на движение курсора мыши.

 

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

Два года назад я начал экспериментировать со кодом WebGL, используя THREE.MeshLine библиотеку, созданную Jaume Sanchez Elias для Three.js.

Эта библиотека решает проблему, заключающуюся в том, что вы не можете обрабатывать ширину линий с помощью классических линий в Three.js. MeshLine строит полосу треугольников с билбордом для создания собственной геометрии вместо использования собственного метода WebGL GL_LINE, который не поддерживает параметр ширины.

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

Анимация MeshLine

Единственное, чего не хватает, так это возможности анимировать линии без необходимости перестраивать геометрию для каждого кадра.
Исходя из того, что уже было запущено и как работает анимация SVG Line , я добавил три новых параметра в MeshLineMaterial для визуализации анимированной пунктирной линии непосредственно через шейдер.

  • DashRatio: соотношение между тем, что видно или нет ( ~0: более видимый ,:~1 менее видимый);
  • DashArray: длина тире и его пробел (0 == нет тире);
  • DashOffset: место, где начинается первая черта.

Как и в случае SVG, эти параметры позволяют анимировать всю трассируемую линию,если они обрабатываются правильно.

Вот полный пример того, как создать и анимировать MeshLine:

Анимация лент с эффектом параллакса для сайта

 

Создайте свой стиль линии

Теперь, когда вы знаете, как анимировать линии, я покажу вам несколько советов о том, как создать дизайн ваших линий.

Используйте SplineCurve или CatmullRomCurve3. Эти классы сглаживают массив точек, которые приблизительно расположены. Они идеально подходят для построения изогнутых и плавных линий и контроля над ними (длина, ориентация, турбулентность …).

Например, давайте добавим турбулентности к нашему предыдущему массиву точек:

Затем используйте один из этих классов, чтобы сгладить массив линий перед созданием геометрии:

И вот так вы создаете свою плавную изогнутую линию!

Cоздаем анимированные линии

Обратите внимание, что SplineCurve сглаживает только в 2D (оси x и y) по сравнению с CatmullRomCurve3, который учитывает три оси.

Анимация в виде линий при помощи Three MeshLine WebGL

В любом случае, я рекомендую использовать SplineCurve . Это более производительно для расчета линий и часто достаточно для создания желаемого изогнутого эффекта.

Используйте Raycasting

Другой метод, взятый из примера THREE.MeshLine, — это использование Raycaster для сканирования сетки, уже присутствующей в сцене. Таким образом, вы можете создавать свои линии, которые соответствуют форме объекта:

Этот метод используется в демоверсии под номером 5. Здесь я использовал сферу в качестве геометрии для создания сетки objectToRaycast:

Raycasting анимация объектов

Выводы

Теперь у вас достаточно инструментов для создания анимации MeshLines . Многие из этих методов вдохновлены примерами из библиотеки. Не стесняйтесь исследовать их и делиться своими собственными экспериментами и методами создания собственных линий! Урок взят из зарубежного источника и переведен нашей командой исключительно в ознакомительных целях.