Персонализация приложений Verge3D

Используйте это руководство для создания индивидуальных приложений Verge3D, ориентированных на вашу конкретную аудиторию.

Пользовательский UI

Лучший способ создать полностью персонализированный UI в Verge3D - это создание пользовательского интерфейса поверх 3D (посмотрите демо Scooter demo в качестве примера такого подхода). Однако, учитывая трудности создания такого пользовательского интерфейса, здесь мы расскажем о настройке стандартного интерфейса Verge3D. Сюда входят экран предзагрузки, аннотации, кнопка полноэкранного режима, а также заголовок/описание страницы и теги социальных сетей.

Введение в стилизацию UI

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

Самый простой способ сделать ваше приложение персонализированным - выбрать Standard Light или Standard Dark в диалоге создания приложения:

Для более сложных настроек обратитесь к файлу src/style.css . Не изменяйте этот файл, поскольку он скомпилирован прямо в Verge3D. Вместо этого добавьте весь код стилей в основной CSS-файл вашего приложения. Например, если ваше приложение называется "My Awesome App", то вам следует изменить следующий файл:

applications/my_awesome_app/my_awesome_app.css

Кроме того, вы можете изменить классы CSS с помощью редактора пазлов. Смотрите пример пазла set css rule .

Настройка экрана загрузки

Для модификации экрана загрузки измените следующие классы CSS:

v3d-simple-preloader-background - для изменения фона всего экрана экрана загрузки.

v3d-simple-preloader-container - для изменения элемента контейнера с изображением и полосой экрана загрузки. Переопределив этот класс, вы можете настроить положение и размер экрана загрузки.

v3d-simple-preloader-bar - для изменения полосы загрузки.

v3d-simple-preloader-logo - для изменения изображения экрана загрузки.

Например, если вам нужно сделать индикатор прогресса красным вместо синего по умолчанию, добавьте следующий код в основной CSS-файл вашего приложения:

.v3d-simple-preloader-bar { background: red; }

Чтобы изменить изображение экрана загрузки на другое:

.v3d-simple-preloader-logo { background-image: url("PATH_TO_YOUR_IMAGE"); background-size: cover; }

Замените PATH_TO_YOUR_IMAGE на фактический URL вашего изображения, например my_company_logo.png.

Рекомендуемый размер изображения прелоадера - 110x110px.

Чтобы назначить пользовательское фоновое изображение вместо стандартного белого:

.v3d-simple-preloader-background { background-image: url("PATH_TO_YOUR_IMAGE"); }

С пазлами все три варианта настройки стиля будут выглядеть следующим образом:

Стилизация аннотаций

Для стилизации аннотаций используйте следующие классы CSS:

Например, чтобы сделать аннотации квадратными с зеленым фоном код будет выглядеть следующим образом:

.v3d-annotation { border-radius: 0px; background: rgba(0, 255, 0, 0.8); }

Изменение кнопки полноэкранного режима

Стилизация кнопок полноэкранного режима уже управляется вашим приложением. Смотрите следующие классы в главном файле CSS вашего приложения:

Например, если вам нужно изменить стандартные изображения открытия/закрытия на что-то другое, измените следующие два класса:

.fullscreen-open { background-image: url('PATH_TO_OPEN_IMAGE'); } .fullscreen-close { background-image: url('PATH_TO_CLOSE_IMAGE'); }

Заголовок и краткое описание страницы

Трудно переоценить важность назначения осмысленных заголовка и описания для вашего приложения.

Заголовок отображается на вкладке браузера, а также используется для названия созданной закладки с вашим приложением:

И заголовок, и описание используются поисковыми системами, чтобы найти ваше приложение и представить его пользователю в поисковой выдаче:

Чтобы изменить название приложения, найдите следующий фрагмент в вашем основном HTML-файле (напримерmy_awesome_app.html):

<title>Verge3D Web Interactive</title>

и измените Verge3D Web Interactive на предпочитаемый заголовок.

Длина заголовка не должна превышать 50-60 символов.

Описание приложения может быть изменено таким же образом. Найдите и замените содержание Interactive 3D web application... в теге <meta name="description"> :

<meta name="description" content="Interactive 3D Web application made with Verge3D. Immerse yourself in amazing graphics experience offered by state-of-the WebGL and HTML5 technologies.">

на более подходящее описание для приложения.

Как и заголовок, текст описания не должен быть длинным - 120-160 символов вполне достаточно.

Язык

Измените следующий фрагмент в начале вашего основного HTML-файла, чтобы изменить язык приложения:

<html lang="en">

Смотрите здесь для получения списка возможных языков.

Иконка

Чтобы настроить иконку страницы, отображаемую в браузере (также известную как favicon), замените следующие файлы в директории media вашего приложения:

Чтобы упростить дело, в интернете можно найти множество генераторов иконок .

Теги социальных сетей

Чтобы ссылка на ваше приложение выглядела круто в Twitter, измените следующие теги title/description/image в основном HTML-файле:

<meta name="twitter:title" content="Verge3D Web Interactive"> <meta name="twitter:description" content="Interactive 3D Web application made with Verge3D. Immerse yourself in amazing graphics experience offered by state-of-the WebGL and HTML5 technologies."> <meta name="twitter:image:src" content="https://cdn.soft8soft.com/images/player_socials.jpg">

Для получения лучшего результата масштабируйте изображение до размера 1200x630 пикселей и укажите полный URL, например https://www.yoursite.com/app_social_image.jpg, не просто app_social_image.jpg.

Для Facebook, Reddit, WhatsApp, Weibo, VK и других платформ социальных сетей, поддерживающих протокол Open Graph, найдите и измените следующие теги. Вы можете задать им те же значения, которые вы использовали для Twitter:

<meta property="og:title" content="Verge3D Web Interactive"> <meta property="og:description" content="Interactive 3D Web application made with Verge3D. Immerse yourself in amazing graphics experience offered by state-of-the WebGL and HTML5 technologies."> <meta property="og:image" content="https://cdn.soft8soft.com/images/player_socials.jpg">

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

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