Создание пользовательских интерфейсов 3Д-веб-приложений на основе ХТМЛ
В этом разделе описано использование стандартных веб-технологий для создания 3Д-приложений оптимизированных для различных устройств и экранов, а также приложений, которые максимально гармонично встраиваются в существующие сайты.
Введение
Стандартные шаблоны «Вердж3Д»-приложений предлагают одностраничный широкоэкранный макет с полноэкранной кнопкой и прелоадером. Интерактивные элементы, такие как кнопки, могут быть реализованы как 3Д-объекты, прикрепленные к камере (то же самое относится и к текстовым блокам).
Однако более гибким и эффективным подходом будет использование установленных веб-стандартов для создания пользовательских интерфейсов. С помощью ХТМЛ и ЦСС вы можете создать любой макет для своего приложения. Пользовательский интерфейс и особенно текст, созданные с помощью ХТМЛ и ЦСС, благодаря специализированным механизмам растеризации современных веб-браузеров обычно выглядят более четкими, чем их 3Д-аналоги. Этот подход также позволит вам легко смешивать 2Д-медиа, такие как изображения, видео и веб-ссылки, с ВебГЛ-контентом и стилизовать ваше приложение в соответствии с дизайном веб-сайта, на котором оно будет установлено.
Существует множество инструментов для веб-дизайна, начиная от простого текстового редактора и заканчивая полноценными конструкторами сайтов. Последние могут создавать полные наборы ХТМЛ/ЦСС/«Ява Скрипт», готовых к использованию веб-страниц, позволяя вам никогда не прикасаться к коду.
Куда добавлять ХТМЛ и ЦСС
Предположим, вы создали свое приложение с помощью диспетчера приложений (с параметрами конфигурации по умолчанию) и назвали его my_awesome_app. Если вы заглянете в папку my_awesome_app находящуюся в папке приложений, то найдете там файлы my_awesome_app.html и my_awesome_app.css, которые, казалось бы, естественно начать редактировать — однако не стоит с этим торопиться!
На практике вы, возможно, никогда не захотите редактировать эти файлы, поскольку они автоматически генерируются диспетчером приложений и могут быть переопределены в результате обновления. Более надежным способом добавления собственного ХТМЛ/ЦСС в приложение «Вердж3Д» является создание нового файла .html, в который встраивается .html приложения «Вердж3Д» в стиле матрешки.
Быстрый обзор: Подогреватель чайников
Посмотрите на следующий пример («Подогреватель чайников»): весь интерфейс построен с помощью стороннего программного обеспечения для веб-дизайна и сохранен как index.html (это имя не является обязательным). Помимо ХТМЛ-элементов интерфейса, файл index.html содержит элемент iframe, в который встроен проект «Вердж3Д» — teapot_heater.html.
![](files/HTML-based-user-interfaces/layered-html.jpg)
В диспетчере приложений «Вердж3Д» такой составной проект имеет два значка запуска, которые можно использовать для независимого запуска чистого проекта «Вердж3Д» или собранного приложения:
![](files/HTML-based-user-interfaces/teapot-heater-app-manager.jpg)
Наконец, 2Д и 3Д части логически связаны между собой с помощью ХТМЛ-пазлов.
Урок
В следующем уроке мы покажем, как создать простое приложение с пользовательским интерфейсом на основе ХТМЛ. В этом приложении будет только 2 кнопки для скрытия и раскрытия стандартного куба.
![](files/HTML-based-user-interfaces/tutorial-final-app.jpg)
Мы начнем с создания нового проекта под названием my_awesome_app в App Manager. Затем продемонстрируем вам два способа создания дополнительного файла .html для пользовательского интерфейса: с использованием стороннего конструктора веб-страниц и на основе кода. После того как пользовательский интерфейс будет готов, мы сделаем ХТМЛ-кнопки работоспособными с помощью редактора пазлов.
Дизайнерский подход
Из нескольких бесплатных и платных конструкторов сайтов, для использования в работе с «Вердж3Д», мы рекомендуем «Вебфлоу» — онлайн-редактор, который позволяет даже абсолютному новичку легко создавать пользовательский интерфейс для приложений «Вердж3Д». Тем не менее, вы можете попробовать и другие инструменты, такие как «Адоби Дримвивер», «Гугл Веб Дизайнер», «Тумулт Хайп» или «Пайнгроу», хотя они могут потребовать от пользователя определенных знаний ХТМЛ/ЦСС.
Создайте учетную запись «Вебфлоу», нажав кнопку "Get started" на их веб-сайте. Необходимый компонент "Embed" и функция "Export Code" доступны только в платных планах "Workspace", поэтому вам необходимо приобрести подписку, прежде чем приступать к данному руководству.
![](files/HTML-based-user-interfaces/webflow-buy-account-plans.jpg)
Для оплаты сервиса гражданам и компаниям из России и Белоруссии потребуется карта зарубежного банка.
Войдите в свою учетную запись «Вебфлоу», перейдите в Dashboard и нажмите New Project.
![](files/HTML-based-user-interfaces/webflow-new-project.jpg)
Выберите Blank Site среди шаблонов. Заполните название проекта и нажмите кнопку Create project:
![](files/HTML-based-user-interfaces/webflow-new-project2.jpg)
Теперь мы встроим наше приложение «Вердж3Д» в эту веб-страницу. На левой панели нажмите самую верхнюю кнопку с иконкой "плюс" ((Добавить элементы). Найдите компонент Embed и щелкните на нем (или перетащите его):
![](files/HTML-based-user-interfaces/webflow-add-iframe.jpg)
Скопируйте следующую строку и вставьте ее в окно редактора:
<iframe width="100%" height="100%" frameborder="0" src="my_awesome_app.html"></iframe>
![](files/HTML-based-user-interfaces/webflow-add-iframe2.jpg)
Эта строка кода предполагает, что мы скопируем веб-страницу, сгенерированную «Вебфлоу», в папку нашего приложения, так что элемент <iframe> подхватит основной ХТМЛ-файл приложения «Вердж3Д» под названием my_awesome_app.html.
Нажмите кнопку Save & Close. Теперь компонент Embed размещен на странице. Не обращайте внимания на надпись об ошибке 404 - она исчезнет после экспорта проекта.
![](files/HTML-based-user-interfaces/webflow-add-iframe3.jpg)
Сделаем так, чтобы компонент Embed занимал всю страницу. Нажмите на кнопку Style в правом верхнем углу. На панели Size укажите 100% для Width и Height (вам придется нажать на маленькие кнопки PX, чтобы переключиться с пикселей на проценты). Также выберите Fixed для Position.
![](files/HTML-based-user-interfaces/webflow-add-iframe4.jpg)
Давайте добавим эти две кнопки. Снова нажмите кнопку Add Elements на самой левой панели, найдите элемент Button и перетащите его на страницу.
![](files/HTML-based-user-interfaces/webflow-add-buttons.jpg)
Обратите внимание, что кнопка не будет видна сразу, так как ее полностью закрывает ранее добавленный компонент Embed. Чтобы исправить ситуацию, выберите только что добавленный элемент в Навигаторе (раскрытый кнопкой на левой панели)...
![](files/HTML-based-user-interfaces/webflow-add-buttons2.jpg)
...и на вкладке Style выберите Fixed для элемента Position, как мы это делали для компонента Embed. Также обеспечьте ему некоторое расстояние, установив верхнее и левое поля по 10 пикселей каждое.
![](files/HTML-based-user-interfaces/webflow-add-buttons3.jpg)
Теперь кнопка должна стать видимой в левом верхнем углу страницы. Дважды щелкните по ней, чтобы отредактировать надпись и изменить ее на "Hide".
![](files/HTML-based-user-interfaces/webflow-add-buttons4.jpg)
Добавьте еще одну кнопку с помощью той же процедуры. Установите ее левое поле на 80 пикселей, чтобы она появилась рядом с кнопкой "Hide", и измените ее надпись на "Show".
![](files/HTML-based-user-interfaces/webflow-add-buttons5.jpg)
Теперь нам нужно задать уникальные ID для обеих кнопок - мы будем использовать их в пазлах. Для этого выделите кнопку, перейдите на вкладку Element Settings и введите "hide_button" в поле ID. Повторите это для второй кнопки, присвоив ей ID "show_button".
![](files/HTML-based-user-interfaces/webflow-add-buttons6.jpg)
На этом этапе мы можем сгенерировать наш файл UI .html и попробовать его в приложении «Вердж3Д». Нажмите кнопку с угловыми скобками (Export Code) в верхней части...
![](files/HTML-based-user-interfaces/webflow-export-code.jpg)
...затем нажмите Prepare ZIP и наконец, Download ZIP:
![](files/HTML-based-user-interfaces/webflow-export-code2.jpg)
Найдите загруженный ZIP-файл и распакуйте его содержимое в папку приложения, my_awesome_app.
![](files/HTML-based-user-interfaces/webflow-export-code3.jpg)
Запустите/перезагрузите диспетчер приложений — новый .html-файл должен отображаться в виде дополнительной синей иконки.
![](files/HTML-based-user-interfaces/my-awesome-app-manager.jpg)
Более наглядно структуру файлов можно увидеть на странице приложения, которую можно открыть, нажав на название своего приложения.
![](files/HTML-based-user-interfaces/my-awesome-app-manager-app-page.jpg)
Теперь запустите собранное приложение, нажав на иконку index.html. Вы должны увидеть что-то вроде этого:
![](files/HTML-based-user-interfaces/tutorial-final-app.jpg)
Давайте сделаем ХТМЛ-кнопки кликабельными, чтобы пользователь мог скрывать и раскрывать куб. Этого легко добиться, используя пазл event ХТМЛ, используемый в связи с идентификаторами элементов, которые мы назначили в «Вебфлоу». Запустите редактор пазлов и добавьте эти блоки:
![](files/HTML-based-user-interfaces/html-puzzles.jpg)
Поскольку кнопки расположены в родительском .html-файле, в который встроено приложение «Вердж3Д», мы должны установить флажок in parent doc, чтобы они работали.
Вот и все! Сохраните пазлы и запустите/загрузите собранное приложение снова, чтобы проверить, работают ли кнопки на кубике!
Подход веб-разработчиков
Обычный текстовый редактор по-прежнему считается многими веб-дизайнерами самым подходящим и гибким инструментом для создания веб-страниц. Даже если вы не собираетесь погружаться в кодирование, это руководство может помочь вам понять внутреннюю структуру веб-страницы, созданной с помощью более удобных для художника инструментов.
Для редактирования ХТМЛ/ЦСС кода можно использовать любой текстовый редактор, но удобнее работать, если ваш редактор поддерживает подсветку синтаксиса и нумерацию строк, как Notepad++ или VS Code.
Базовый ХТМЛ-документ, с которого мы можем начать, выглядит следующим образом. Вы можете просто скопировать это содержимое в новый текстовый документ и сохранить как index.html в папке verge3d/applications/my_awesome_app. Опять же, имя файла не является обязательным, и мы используем его везде только для единообразия.
<!DOCTYPE html>
<html>
<head>
<title>Index of My Awesome App</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<meta name="description" content="Put some description here - remember about SEO!">
</head>
<body>
</body>
</html>
Запустите/перезагрузите диспетчер приложений — новый .html-файл должен отображаться в виде дополнительной синей иконки.
![](files/HTML-based-user-interfaces/my-awesome-app-manager.jpg)
Более наглядно структуру файлов можно увидеть на странице приложения, которую можно открыть, нажав на название своего приложения.
![](files/HTML-based-user-interfaces/my-awesome-app-manager-app-page.jpg)
Теперь мы можем добавить элемент iframe в body документа для встраивания основного запускающего файла нашего приложения «Вердж3Д», my_awesome_app.html:
<body>
<iframe id="my_iframe" src="my_awesome_app.html"></iframe>
</body>
Если вы сейчас запустите собранное приложение из диспетчера приложений, оно отобразит небольшую вставку стандартного приложения cube в левом верхнем углу. Мы можем сделать его широкоэкранным и без границ, используя ЦСС:
<style>
#my_iframe {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
border: 0;
}
</style>
Теперь давайте создадим 2 кнопки, добавив в тело 2 элемента div, снабженные уникальными атрибутами id для ссылок в ЦСС и в пазлах:
<div id="hide_button">Hide</div>
<div id="show_button">Show</div>
Однако вы не заметите их в приложении, пока не настроите их позиционирование и стилизацию с помощью ЦСС:
#hide_button, #show_button {
position: absolute;
width: 100px;
height: 30px;
background-color: DodgerBlue;
color: white;
text-align: center;
line-height: 30px;
cursor: pointer;
}
#hide_button {
left: 10px;
}
#show_button {
left: 120px;
}
Вот и все - теперь у вас есть две ХТМЛ-кнопки в вашем приложении! Таким должен получиться финальный index.html:
<!DOCTYPE html>
<html>
<head>
<title>Index of My Awesome App</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<meta name="description" content="Put some description here - remember about SEO!">
<style>
#my_iframe {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
border: 0;
}
#hide_button, #show_button {
position: absolute;
width: 100px;
height: 30px;
background-color: DodgerBlue;
color: white;
text-align: center;
line-height: 30px;
cursor: pointer;
}
#hide_button {
left: 10px;
}
#show_button {
left: 120px;
}
</style>
</head>
<body>
<iframe id="my_iframe" src="my_awesome_app.html"></iframe>
<div id="hide_button">Hide</div>
<div id="show_button">Show</div>
</body>
</html>
При запуске собранного приложения из диспетчера приложений вы должны увидеть что-то вроде этого:
![](files/HTML-based-user-interfaces/tutorial-final-app.jpg)
Давайте сделаем ХТМЛ-кнопки кликабельными, чтобы пользователь мог скрывать и раскрывать куб. Этого легко добиться, используя пазл event, используемый с идентификаторами элементов, которые мы назначили в «Вебфлоу». Запустите редактор пазлов и добавьте эти блоки:
![](files/HTML-based-user-interfaces/html-puzzles.jpg)
Поскольку кнопки расположены в родительском .html файле, в который встроено приложение «Вердж3Д», мы должны установить флажок in parent doc, чтобы они работали.
Вот и все! Сохраните пазлы и запустите/загрузите собранное приложение снова, чтобы проверить, работают ли кнопки!
Аннотации
Аннотации «Вердж3Д» — это самый простой способ отобразить информационные всплывающие элементы над 3Д-контентом. Вам не нужно знать ХТМЛ, чтобы добавить их в свое приложение. Просто воспользуйтесь функцией добавления add annotation.
![](files/HTML-based-user-interfaces/annotation.jpg)
Вы можете изменить стиль ваших аннотаций, изменив шрифт, форму, цвет или размер. Дополнительную информацию смотрите здесь.
Смотрите также
Ознакомьтесь со следующим видеоуроком, объясняющим, как создавать пользовательские интерфейсы для 3Д-веб-приложений на основе ХТМЛ.
Остались вопросы?
Задайте их на нашем форуме!