Статьи

Учимся проектировать и анимировать в 3D с помощью Zdog

Октябрь 14, 2018

Есть классная библиотека JavaScript, которую бредят такие имена, как Крис Гэннон , Val Head и CodePen . Вы также можете найти его в Product Hunt , где дела идут неплохо. Библиотека — это не что иное, как Zdog Дейва ДеСандро .

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

Давайте погрузимся в!

Что такое Здог

ДеСандро объясняет, что такое Zdog на специальном веб-сайте библиотеки:

Zdog — это 3D-движок JavaScript для <canvas> и SVG. С Zdog вы можете создавать и отображать простые 3D-модели в Интернете. Zdog — псевдо- трехмерный двигатель. Его геометрия существует в трехмерном пространстве, но отображается как плоские формы. Это делает Здог особенным.

Другими словами, вы можете создавать, отображать и анимировать 3D-модели на основе SVG или <canvas> .

Zdog невелик (2100 строк кода для всей библиотеки, сокращен до 28 КБ) и удобен для разработчиков (вы можете быстро реализовать его с помощью простого декларативного API).

Начало работы с Zdog

Как и в случае с большинством библиотек JavaScript, вы можете включить Zdog в свой проект с помощью…

  • просто загрузите копию библиотеки в вашу локальную среду по этой ссылке: https://unpkg.com/zdog@1/dist/zdog.dist.min.js ( https://unpkg.com/zdog@1/dist/zdog.dist.js для неунифицированной версии);
  • извлечение библиотеки из CDN: https://unpkg.com/zdog@1/dist/zdog.dist.min.js
  • или набрав npm install zdog если вы используете npm

Вот официальная демонстрация Hello World на CodePen, чтобы вы могли сразу приступить к работе с библиотекой:

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

Как работает Здог

Давайте начнем с создания статического SVG-круга.

HTML — это просто элемент SVG, который вы можете использовать в качестве оболочки. Если вы предпочитаете создавать рисунок Zdog с использованием элемента canvas, просто замените тег svg тег canvas : 

  <svg id="circle" width="100" height="100"></svg>

Теперь немного CSS на элемент SVG: 

  #circle { background-color: #081d3f; width: 100vw; height: 100vh; }

Наконец, JavaScript: 

  /* create an instance of the Zdog Illustration class */ let circle = new Zdog.Illustration({ element: '#circle' }) /* create an instance of the Zdog shape class Ellipse */ new Zdog.Ellipse({ // add the shape to the circle addTo: circle, // set more properties diameter: 20, stroke: 20, color: '#ccc' }) // display the scene circle.updateRenderGraph()

Чтобы рисовать графику, вам нужно создавать экземпляры классов Zdog. Illustration — это класс верхнего уровня, который имеет дело с элементом <canvas> или <svg> . Формы, которые вы создаете для своей сцены, будут Illustration экземпляра класса Illustration .

Ellipse — это класс формы. Вы создаете новый экземпляр класса формы Ellipse и добавляете его в свой контейнер, в этом случае circle , используя метод addTo() . Zdog предлагает множество предопределенных форм, таких как rect , polygon и многое другое. Чтобы создать свою собственную форму , используйте класс Shape и определите его точки пути. Вы можете добавить другие свойства к вашей форме, такие как diameter , stroke и color . Для получения дополнительных свойств, проверьте API Zdog для класса Shape .

Чтобы отобразить изображение на экране, вызовите метод updateRenderGraph() в вашем экземпляре circle .

Вот как должен выглядеть ваш круг:

Анимация и перетаскивание с помощью Zdog

Анимация требует, чтобы ваш экземпляр circle перерисовывался в каждом кадре. Для этого вы используете .requestAnimationFrame() следующим образом: 

  function animate() { /* incrementally increase the rotation on the y axis */ circle.rotate.y += 0.03 // re-render the graphic circle.updateRenderGraph() // animate the next frame requestAnimationFrame(animate) } animate()

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

Сначала установите для флага isSpinning значение true : 

  let isSpinning = true

Затем вернитесь к своему экземпляру circle класса Illustration и установите для свойства dragRotate значение true . Кроме того, переключите флаг внутри onDragStart() и onDragEnd() , чтобы при начале перетаскивания флаг устанавливался в значение false , а по окончании перетаскивания он возвращался в значение true : 

  let circle = new Zdog.Illustration({ element: '#circle', dragRotate: true, onDragStart() { isSpinning = false }, onDragEnd() { isSpinning = true } })

Наконец, настройте функцию animate() , добавив этот условный оператор вверху, чтобы вращение происходило только в том случае, если для флага isSpinning установлено значение true : 

  if(isSpinning) { circle.rotate.y += 0.03 }

Вот рабочая демоверсия, проверьте это:

Ресурсы и демоверсии

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

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

  • Веб-сайт Zdog , где вы найдете все подробности об API, больше демонстраций, пошаговые руководства и многое другое
  • Holy Zdog , запись в блоге CodePen, заполненная демонстрациями на основе Zdog
  • Сделано с Zdog , коллекцией CodePen демонстраций на основе Zdog
  • Сделано с Zdog , коллекцией потрясающих демо в Твиттере, все очевидно сделаны с… Zdog

Где твои творения Zdog? Множество мест, где можно их показать, не так ли?

55
Share: