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

Узнайте, как можно использовать стандартные веб-технологии для создания удобных интерфейсов мобильных приложений и для гармоничной web-интеграции.

Введение

Шаблон приложения Verge3D предлагает одностраничный широкоэкранный макет с полноэкранной кнопкой и прелоадером. Интерактивные элементы, такие как кнопки, могут быть реализованы как 3D-объекты, прикрепленные к камере - то же самое относится и к текстовым блокам.

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

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

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

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

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

Быстрый обзор: Teapot Heater

Посмотрите на следующий пример (демонстрация Verge3D Teapot Heater): весь интерфейс построен с помощью стороннего программного обеспечения для веб-дизайна и сохранен как index.html (это имя не является обязательным). Помимо HTML-элементов интерфейса, файл index.html содержит элемент iframe, в который встроен проект Verge3D - teapot_heater.html.

В Verge3D App Manager такой составной проект имеет два значка запуска, которые можно использовать для независимого запуска чистого проекта Verge3D или собранного приложения:

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

Урок

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

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

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

Из нескольких бесплатных и платных конструкторов сайтов, для использования в работе с Verge3D, мы рекомендуем Webflow - онлайн-редактор, который позволяет даже абсолютному новичку легко создавать пользовательский интерфейс для приложений Verge3D. Тем не менее, вы можете попробовать и другие инструменты, такие как Adobe Dreamweaver, Google Web Designer, Tumult Hype или Pinegrow, хотя они могут потребовать от пользователя определенных знаний HTML/CSS.

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

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

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

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

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

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

Эта строка кода предполагает, что мы скопируем веб-страницу, сгенерированную Webflow, в папку нашего приложения, так что элемент <iframe> подхватит основной HTML-файл приложения Verge3D под названием 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 и попробовать его в приложении Verge3D. Нажмите кнопку с угловыми скобками (Export Code) в верхней части...

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Теперь мы можем добавить элемент iframe в body документа для встраивания основного запускающего файла нашего приложения Verge3D, 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, используемый с идентификаторами элементов, которые мы назначили в Webflow. Запустите редактор Puzzles и добавьте эти блоки:

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

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

Аннотации

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

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

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

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

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

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