Создание пользовательских интерфейсов 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.

В менеджере проектов «Вердж3Д» такой составной проект имеет два значка запуска, которые можно использовать для независимого запуска чистого проекта «Вердж3Д» или собранного приложения:

Наконец, 2Д и 3Д части логически связаны между собой с помощью ХТМЛ-пазлов.

Урок

В следующем уроке мы покажем, как создать простое приложение с пользовательским интерфейсом на основе ХТМЛ. В этом приложении будет только 2 кнопки для скрытия и раскрытия стандартного куба.

Мы начнем с создания нового проекта под названием my_awesome_app в App Manager. Затем продемонстрируем вам два способа создания дополнительного файла .html для пользовательского интерфейса: с использованием стороннего конструктора веб-страниц и на основе кода. После того как пользовательский интерфейс будет готов, мы сделаем ХТМЛ-кнопки работоспособными с помощью редактора пазлов.

Дизайнерский подход

Из нескольких бесплатных и платных конструкторов сайтов, для использования в работе с «Вердж3Д», мы рекомендуем «Вебфлоу» — онлайн-редактор, который позволяет даже абсолютному новичку легко создавать пользовательский интерфейс для приложений «Вердж3Д». Тем не менее, вы можете попробовать и другие инструменты, такие как «Адоби Дримвивер», «Гугл Веб Дизайнер», «Тумулт Хайп» или «Пайнгроу», хотя они могут потребовать от пользователя определенных знаний ХТМЛ/ЦСС.

Создайте учетную запись «Вебфлоу», нажав кнопку "Get started" на их веб-сайте. Необходимый компонент "Embed" и функция "Export Code" доступны только в платных планах "Workspace", поэтому вам необходимо приобрести подписку, прежде чем приступать к данному руководству.

Для оплаты сервиса гражданам и компаниям из России и Белоруссии потребуется карта зарубежного банка.

Войдите в свою учетную запись «Вебфлоу», перейдите в Dashboard и нажмите New Project.

Выберите Blank Site среди шаблонов. Заполните название проекта и нажмите кнопку Create project:

Теперь мы встроим наше приложение «Вердж3Д» в эту веб-страницу. На левой панели нажмите самую верхнюю кнопку с иконкой "плюс" ((Добавить элементы). Найдите компонент Embed и щелкните на нем (или перетащите его):

Скопируйте следующую строку и вставьте ее в окно редактора:


<iframe width="100%" height="100%" frameborder="0" src="my_awesome_app.html"></iframe>

Эта строка кода предполагает, что мы скопируем веб-страницу, сгенерированную «Вебфлоу», в папку нашего приложения, так что элемент <iframe> подхватит основной ХТМЛ-файл приложения «Вердж3Д» под названием my_awesome_app.html.

Нажмите кнопку Save & Close. Теперь компонент Embed размещен на странице. Не обращайте внимания на надпись об ошибке 404 - она исчезнет после экспорта проекта.

Сделаем так, чтобы компонент Embed занимал всю страницу. Нажмите на кнопку Style в правом верхнем углу. На панели Size укажите 100% для Width и Height (вам придется нажать на маленькие кнопки PX, чтобы переключиться с пикселей на проценты). Также выберите Fixed для Position.

Давайте добавим эти две кнопки. Снова нажмите кнопку Add Elements на самой левой панели, найдите элемент Button и перетащите его на страницу.

Обратите внимание, что кнопка не будет видна сразу, так как ее полностью закрывает ранее добавленный компонент Embed. Чтобы исправить ситуацию, выберите только что добавленный элемент в Навигаторе (раскрытый кнопкой на левой панели)...

...и на вкладке Style выберите Fixed для элемента Position, как мы это делали для компонента Embed. Также обеспечьте ему некоторое расстояние, установив верхнее и левое поля по 10 пикселей каждое.

Теперь кнопка должна стать видимой в левом верхнем углу страницы. Дважды щелкните по ней, чтобы отредактировать надпись и изменить ее на "Hide".

Добавьте еще одну кнопку с помощью той же процедуры. Установите ее левое поле на 80 пикселей, чтобы она появилась рядом с кнопкой "Hide", и измените ее надпись на "Show".

Теперь нам нужно задать уникальные ID для обеих кнопок - мы будем использовать их в пазлах. Для этого выделите кнопку, перейдите на вкладку Element Settings и введите "hide_button" в поле ID. Повторите это для второй кнопки, присвоив ей ID "show_button".

На этом этапе мы можем сгенерировать наш файл UI .html и попробовать его в приложении «Вердж3Д». Нажмите кнопку с угловыми скобками (Export Code) в верхней части...

...затем нажмите Prepare ZIP и наконец, Download ZIP:

Найдите загруженный ZIP-файл и распакуйте его содержимое в папку приложения, my_awesome_app.

Запустите/перезагрузите менеджер приложений — новый .html-файл должен отображаться в виде дополнительной синей иконки.

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

Теперь запустите собранное приложение, нажав на иконку index.html. Вы должны увидеть что-то вроде этого:

Давайте сделаем ХТМЛ-кнопки кликабельными, чтобы пользователь мог скрывать и раскрывать куб. Этого легко добиться, используя пазл event ХТМЛ, используемый в связи с идентификаторами элементов, которые мы назначили в «Вебфлоу». Запустите редактор пазлов и добавьте эти блоки:

Поскольку кнопки расположены в родительском .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>

Теперь мы можем добавить элемент 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>

При запуске собранного приложения из диспетчера приложений вы должны увидеть что-то вроде этого:

Давайте сделаем ХТМЛ-кнопки кликабельными, чтобы пользователь мог скрывать и раскрывать куб. Этого легко добиться, используя пазл event, используемый с идентификаторами элементов, которые мы назначили в «Вебфлоу». Запустите редактор пазлов и добавьте эти блоки:

Поскольку кнопки расположены в родительском .html файле, в который встроено приложение «Вердж3Д», мы должны установить флажок in parent doc, чтобы они работали.

Вот и все! Сохраните пазлы и запустите/загрузите собранное приложение снова, чтобы проверить, работают ли кнопки!

Аннотации

Аннотации «Вердж3Д» — это самый простой способ отобразить информационные всплывающие элементы над 3Д-контентом. Вам не нужно знать ХТМЛ, чтобы добавить их в свое приложение. Просто воспользуйтесь функцией добавления add annotation.

Вы можете изменить стиль ваших аннотаций, изменив шрифт, форму, цвет или размер. Дополнительную информацию смотрите здесь.

Смотрите также

Ознакомьтесь со следующим видеоуроком, объясняющим, как создавать пользовательские интерфейсы для 3Д-веб-приложений на основе ХТМЛ.

Остались вопросы?

Задайте их на нашем форуме!