Preview Lab

Что это

Не универсальный просмотрщик, куда перетаскивают свои файлы, а витрина конкретных вещей. Вход — гостиная с четырьмя местами под экспонаты; занято пока одно.

• RevolverЖивой экспонат: 28 полигональных частей, формат glTF 2.0. Отдельная страница со своим набором ручек — это и есть сам просмотрщик.
• Rock, Treant, MonsterМеста под следующие экспонаты. Помечены как «скоро» и не открываются: моделей за ними пока нет.

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

Как устроено

• Два режима«Осмотр» — предмет висит в пустоте и поворачивается перетаскиванием. «От первого лица» — в кадр входит кисть руки, и вещь видна так, как её держат. Переключение кнопкой или клавишами 1 и 2.
• Четыре покрытияGunmetal, Fade, Wildfire, Gilded — каждое задаёт свой цвет, металличность и шероховатость; у двух есть собственное свечение.
• Износ и металлДва ползунка по краям кадра: первый добавляет шероховатости и к концу хода сводит цвет к потёртому, второй множит металличность. Меняются сразу, на всех частях предмета.
• ВыстрелКнопка Fire или пробел: барабан доворачивается на шестую часть оборота, курок и спусковой крючок отыгрывают ход, у дула на долю секунды загорается свет, кадр отдаёт отдачей.
• Панель AdjustДля режима от первого лица: положение, поворот и масштаб отдельно для руки и для предмета, четырнадцать ползунков. Готовая поза копируется в буфер одной кнопкой — чтобы вписать её в проект как есть.
• Панели по вкусуШесть кнопок в шапке включают и выключают каждую панель, вплоть до пустого кадра с одним предметом. В углу — счётчик кадров в секунду.
• Чем считаетсяthree.js с загрузчиком glTF, физически корректные материалы, пять источников света и киношное тональное отображение. Модель револьвера и кисть руки зашиты в саму страницу двоичным glTF — внешних файлов нет, и страница открывается прямо с диска.

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

Как открыть

• Где открытьПо адресу konstrukt.tech/apps/3d-viewer. Ставить нечего, аккаунт не заводится; сборок под настольную систему и телефон нет.
• Что нужноБраузер с WebGL. Библиотека three.js и шрифт заголовков тянутся из сети — при первом открытии интернет нужен, дальше их держит кэш браузера.
• УправлениеПеретаскивание — поворот, пробел — выстрел, 1 и 2 — режимы. Мышь и палец работают одинаково.