Создание пользовательских интерфейсов 3Д-веб-приложений на основе HTML

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

Введение

Стандартные шаблоны «Вердж3Д»-приложений предлагают одностраничный широкоэкранный макет с полноэкранной кнопкой и прелоадером. Интерактивные элементы, такие как кнопки, могут быть реализованы как 3Д-объекты, прикрепленные к камере (то же самое относится и к текстовым блокам).

Однако более гибким и эффективным подходом будет использование штатных веб-технологий для создания пользовательских интерфейсов. С помощью HTML и CSS вы можете создать любой макет для своего приложения. Пользовательский интерфейс и особенно текст, созданные с помощью HTML и CSS, благодаря специализированным механизмам растеризации современных веб-браузеров обычно выглядят более четкими, чем их 3Д-аналоги. Этот подход также позволит вам легко смешивать 2Д-медиа, такие как изображения, видео и веб-ссылки, с WebGL-контентом и стилизовать ваше приложение в соответствии с дизайном веб-сайта, на котором оно будет установлено.

Существует множество инструментов для веб-дизайна, начиная от простого текстового редактора и заканчивая полноценными конструкторами сайтов. Последние могут создавать полные наборы HTML/CSS/«Ява Скрипт», готовых к использованию веб-страниц, позволяя вам никогда не прикасаться к коду.

Куда добавлять HTML и CSS

Предположим, вы создали свое приложение с помощью диспетчера приложений (с параметрами конфигурации по умолчанию) и назвали его my_awesome_app. Если вы заглянете в папку my_awesome_app находящуюся в папке приложений, то найдете там файлы my_awesome_app.html и my_awesome_app.css, которые, казалось бы, можно редактировать — однако не стоит с этим торопиться!

На практике вам не стоит редактировать эти файлы, поскольку они создаются диспетчером приложений автоматически и могут быть переопределены в результате обновления. Более надежным способом добавления собственного HTML/CSS в «Вердж3Д»-приложение является создание нового .html-файла, в который в свою очередь встраивается .html-файл самого приложения на подобие матрешки.

Пример: Подогреватель чайников

Посмотрите следующий пример — («Подогреватель чайников»). Интерфейс этого приложения построен с помощью стороннего программного обеспечения для веб-дизайна и сохранен как index.html (это имя не является обязательным). Помимо HTML-элементов интерфейса, файл index.html содержит элемент iframe, в который встроен проект «Вердж3Д» — teapot_heater.html.

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

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

Уроки

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

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

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

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

Создайте учетную запись «Вебфлоу», нажав кнопку "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> подхватит основной HTML-файл приложения «Вердж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. Вы должны увидеть что-то вроде этого:

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

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

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

Вёрстка на пазлах

Ознакомиться с этим подходом вам может серия видеоуроков:

Подход веб-разработчиков

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

Для редактирования HTML/CSS кода можно использовать любой текстовый редактор, но удобнее работать, если ваш редактор поддерживает подсветку синтаксиса и нумерацию строк, как Notepad++ или VS Code.

Базовый HTML-документ, с которого мы можем начать, выглядит следующим образом. Вы можете просто скопировать это содержимое в новый текстовый документ и сохранить как index.html в какой-либо подпапке папки с приложениями «Вердж3Д». Опять же, имя файла не является обязательным, и мы используем его везде только для единообразия.


<!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 в левом верхнем углу. Мы можем сделать его широкоэкранным и без границ, используя CSS:


<style>
#my_iframe {
        position: absolute;
        top: 0px;
        left: 0px;
        width: 100%;
        height: 100%;
        border: 0;
}
</style>

Теперь давайте создадим 2 кнопки, добавив в тело 2 элемента div, снабженные уникальными атрибутами id для ссылок в CSS и в пазлах:


<div id="hide_button">Hide</div>
<div id="show_button">Show</div>

Однако вы не заметите их в приложении, пока не настроите их позиционирование и стилизацию с помощью CSS:


#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;
}

Вот и все - теперь у вас есть две HTML-кнопки в вашем приложении! Таким должен получиться финальный 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>

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

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

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

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

Аннотации

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

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

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

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

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

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