Как организовать свой код с помощью классов (Webflow + Three.js)

Мы рассмотрим, как организовать наш код three.js, используя классы внутри Webflow.

Codepen: https://codesandbox.io/s/three-js-in-webflow-part-3-1pvc9e

Присоединяйтесь к Discord: https://discord.gg/WWfVjMhSjx

Плейлист: https://www.youtube.com/playlist?list=PLlufJ1b4uSqWrBr6ShGhEcb5TcAAnmnVw

Несколько недель назад мы рассмотрели, как использовать three.js в проектах Webflow. Мы начали с создания простого проекта и изложили базовую структуру сцены three.js в том, как мы реализуем это объединение с HTML. Я подумал, что сейчас самое время взглянуть на организацию нашего кода с помощью классов JavaScript. Так что, если вы ничего не знаете о классах, это будет хорошим способом освоить основы.

Мы работали внутри Code Sandbox через этот проект, а затем копировали его во встроенный элемент внутри Webflow. Если вы не знаете, как это сделать, опять же, я предлагаю вам вернуться к предыдущим эпизодам.

Создание класса

Мы можем начать писать наш класс, просто написав class, и давайте просто дадим ему имя класса, которое... Давайте просто дадим ему имя класса Experience. Это не важно.

Второй по важности функцией внутри класса является конструктор. Это функция, которая автоматически вызывается, когда вы создаете (загружаете) новый класс.

Если мы введем hello world в этот конструктор, вы заметите, что в консоли появилось. Нам нужно создать экземпляр этого класса, и мы можем сделать это, используя ключевое слово new. Вы увидите, что наша конструктивная функция вызывается автоматически при загрузке и hello world в консоли.

Передача значений класса

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

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

Мы не будем использовать классы таким образом, так что это просто полезное знание.

Для чего мы используем конструктор?

Мы собираемся вызывать все важные методы из конструктора, и именно так мы начнем разбивать этот код three.js, чтобы сделать его более читабельным.

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

Разделяем наши ключевые элементы

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

Важность `this`

Важно знать, что в классе у нас есть концепция this, и становится трудно преподавать, когда вы все время говорите об этом и об этом, но this относится к самому классу. Все, что мы устанавливаем в классе через this, затем доступно в любом другом месте класса. Например, теперь, что я собираюсь сделать, я наберу this.canvas = this.setCanvas(). И вернитесь в методе setCanvas return document.getElementById("webgl") и console.log(this.canvas), тогда вы увидите, что мы записываем наш холст здесь.

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

Наша сцена

Больше того же, на самом деле. this.scene = this.setScene(). Итак, вы видите, что вместо const мы фактически заменяем его на this. как угодно. А затем вызовите это в конструкторе.

Камеры

Чтобы установить камеры, нам нужно сказать this.camera и this.scene, так как мы можем получить доступ к сцене из этой функции, так как она установлена в классе через this, наша камера больше не является камерой. Это this.camera.

Геометрия и когда не использовать `this`

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

Продолжите этот процесс также с визуализатором и функцией анимации.

Глобальные переменные

Мы можем установить глобальные переменные для объекта класса внутри конструктора. Итак, this.mouse и this.isHovering, и this.scrollPosition.

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

События

Теперь давайте скопируем наши события в функцию setEvents. Мы можем оставить функции, которые вызывают эти события, но я думаю, что лучше разбить эти функции дальше.

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

Затем нам нужно обновить эту камеру и средство визуализации. Промойте и повторите для всех событий.

Изменение контекста `this`

Поскольку мы по существу используем традиционные вызовы function внутри этих событий, мы фактически меняем то, что this представляет собой внутри этих функций. Теперь он становится window (или куда бы мы ни добавили прослушиватель событий), но нам нужно переопределить this как класс, и мы можем сделать это с bind.

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

Чистый способ сделать это - установить bind для функций выше всех вызовов методов в конструкторе, например...

Таким образом, всякий раз, когда эти функции вызываются, this всегда связывается как class.

Стоит сделать небольшую очистку, но если все работает, вы готовы скопировать это в свой встроенный элемент внутри Webflow!