Three.js 101: Инструменты и советы (часть 2)

Пользуясь случаем, я хотел бы поделиться с вами некоторыми полезными инструментами, которые я использую во время работы с Three.js. Необязательно использовать все, но иногда они могут быть очень полезны.

Это вторая часть серии, которая начинается здесь.

Stats.js

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

Чтобы использовать его, нам нужно импортировать stats.min.js:

<script src=”stats.min.js”></script>

А затем добавьте следующий код:

Теперь осталось только добавить эти две функции в начало и конец нашего кода.

dat.gui

Бывают случаи, когда нам нужен пользовательский интерфейс для наших проектов, самый простой способ сделать это - использовать dat.gui.

Как и в случае со статистикой, пора импортировать dat.gui.js:

<script src="dat.gui.min.js"></script>

Давайте создадим объект для управления параметрами нашего пользовательского интерфейса:

А затем мы создаем сетку, используя эти значения:

Пришло время создать пользовательский интерфейс на основе этих значений. Dat.gui дает нам различные способы управления нашими переменными, в этом случае мы будем использовать ползунок для размера и палитру цветов для значения цвета. Эта информация доступна в официальной документации.

Теперь осталось только создать функции, отвечающие за изменение сетки при изменении элементов управления.

Это все! Теперь у нас есть интерфейс для нашего проекта.

OrbitControls

Управление камерой из кода иногда может быть очень неприятным, поэтому очень часто используют OrbitControls. Этот инструмент позволяет нам управлять камерой с помощью мыши так же, как это делает любое программное обеспечение для работы с 3D.

Это действительно просто, нам нужно импортировать OrbitControls:

<script src="OrbitControls.js"></script>

А затем мы добавляем эту строку, чтобы активировать ее:

Отзывчивый рендерер

Может быть, вначале в этом нет необходимости, но наступит момент, когда нам понадобится адаптивный рендерер. Чтобы исправить это, мы можем использовать этот простой фрагмент:

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

Фрагменты TJS

Поскольку я всегда забываю о функциях и их параметрах, я сделал список сниппетов, который использую каждый раз, когда работаю. В настоящее время доступно только для Sublime Text (приветствуется любая помощь по переносу в другую среду IDE).

Экспорт нашей работы

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

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

  • K ap (бесплатно) (OS X)
  • Camtasia (платный) (кроссплатформенный)
  • Screenflow (платный) (OS X)

В моем случае лучший вариант - использовать расширение Chrome под названием Rendercan.

Rendercan дает нам последовательность PNG, которую мы можем объединить с любым видеоредактором. Другой вариант - использовать ffmpeg из терминала:

ffmpeg -r 60 -i canvas-%09d.png out.mp4

Небольшой совет, которым я хотел бы поделиться с вами, заключается в том, что если вы используете функцию Zoom Out браузера в адаптивном рендерере, вы можете экспортировать изображения в очень высоком разрешении, которое можно использовать для HD-видео или печати.

В следующей статье

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

Дайте мне обратную связь

Пожалуйста, не стесняйтесь писать комментарии или отправлять мне сообщения. Я приглашаю вас зайти на мою личную веб-страницу и подписывайтесь на меня в Instagram, чтобы увидеть больше проектов, созданных с помощью Three.js, это мне очень поможет ❤ .

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