Отладка кода

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

Во-первых, нам нужен отладочный интерфейс.

Хотя вы можете создать свой собственный интерфейс отладки с помощью HTML / CSS / JS, уже существует несколько библиотек:

• dat.GUI
• control-panel
• ControlKit
• Uil
• Tweakpane
• Guify
• Oui

Все они могут делать то, что мы хотим, но мы будем использовать самый популярный из них - dat.GUI. Не стесняйтесь пробовать другие варианты.

Подготовка

В начале у нас есть наш куб, но зависимости не включают Data.GUI. Мы добавим его и внесем некоторые изменения. Код приложения на старте этого урока вы можете посмотреть тут.

Как подключить Dat.GUI

Чтобы добавить Dat.GUI в Webpack проект, мы можем использовать npm:

npm install --save lil-gui

Мы устанавливаем lil-guy вместо dat.gui, но в остальной части курса мы будем называть его dat.gui. (историческая привычка) 😅

Давайте теперь импортируем нужный нам пакет в script.js:

import * as dat from 'lil-gui';

Теперь мы можем создавать экземпляр Data.GUI:

// Отладка
const gui = new dat.GUI();

Теперь у нас появилась пустая панель в правом верхнем углу экрана.

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

• Диапазон — для чисел с минимальным и максимальным значением
• Цвет — для цветов с различными форматами
• Текст — для простых текстов
• Флажок — для логических значений (true или false)
• Селект — для выбора из списка значений
• Кнопка для запуска функций
• Папка — для организации вашей панели, если у вас слишком много элементов

Давайте посмотрим на некоторые из них.

Добавляем элементы отладки

Чтобы добавить элемент на панель, вы должны использовать gui.add(...). Первый параметр - это объект, а второй параметр - свойство того объекта, который вы хотите настроить. Вам нужно установить его после того, как вы создали соответствующий объект:

gui.add(mesh.position, 'x');

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

gui.add(mesh.position, 'x', - 3, 3, 0.01);

На панели должен появиться диапазон. Попробуйте изменить его и наблюдайте, как куб движется соответствующим образом.

Или вы можете использовать методы min(...), max(...) и step(...) путем создания цепочки непосредственно после метода add(...):

gui
    .add(mesh.position, 'x')
    .min(- 3)
    .max(3)
    .step(0.01);

Чтобы изменить подпись к свойству, используйте метод name(...):

gui
    .add(mesh.position, 'y')
    .min(- 3)
    .max(3)
    .step(0.01)
    .name('Box x');

Dat.GUI автоматически определит, какое свойство вы хотите настроить, и использует соответствующий элемент. Хорошим примером является свойство visible Object3D. Это логическое значение, которое, если равно false, скроет объект:

gui.add(mesh, 'visible');

Как вы можете видеть, Dat.GUI установил флажок, потому что видимое свойство является логическим значением.

Мы можем сделать то же самое со свойством материала:

gui.add(material, 'wireframe');

Цвета

Работать с цветами немного сложнее.

Во-первых, нам нужно использовать addColor(...) вместо add(...). Это связано с Dat.GUI не может определить, хотите ли вы настроить текст, число или цвет только по типу свойства.

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

Создайте переменную параметра в начале вашего кода сразу после части с импортами:

const parameters = {
    color: 0xff0000,
};

Затем, после создания экземпляра вашей переменной gui, добавьте следующую настройку:

gui.addColor(parameters, 'color');

Вы должны увидеть средство выбора цвета на своей панели. Проблема в том, что изменение этого цвета не влияет на материал. Это действительно изменяет свойство color переменной parameter, но мы даже не используем эту переменную в нашем материале.

Чтобы исправить это, нам нужно обработать изменение значения. Мы можем сделать это, добавив метод onChange(...) в цепочку и обновив цвет материала с помощью material.color.set(...):

gui
    .addColor(parameters, 'color')
    .onChange(() =>
    {
        material.color.set(parameters.color)
    });

Для того, чтобы куб изначально принял цвет из настроек, изменим еще и изначальный цвет материала:

const material = new THREE.MeshBasicMaterial({ color: parameters.color, wireframe: true });

Дополнительно

Закрытие

Вы можете закрыть панель, нажав на ее нижнюю часть.

Если вы хотите, чтобы панель была закрыта по умолчанию, вы можете отправить объект при создании экземпляра Dat.GUI и передайте closed: true в его свойствах:

const gui = new dat.GUI({ closed: true });

Ширина

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

Если вы хотите изменить ширину панели по умолчанию, добавьте width: ... в свойствах:

const gui = new dat.GUI({ width: 400 });

Как и когда это использовать

Мы будем использовать нашу панель отладки в определенные моменты следующих упражнений. Но не стесняйтесь добавлять столько настроек, сколько захотите. Это отличный способ попрактиковаться и начать создавать что-то творческое.

Я бы порекомендовала вам добавлять настройки по мере продвижения. Если вы подумаете о том, чтобы добавить все настройки в конце проекта, вы, вероятно, в конечном итоге вообще не добавите никаких настроек.

На этом сегодня все, надеюсь вам это было полезно!

Текстуры (часть 1) ->