Недавно я думал о метавселенной и решил, что сейчас самое время узнать о ней больше, потому что лучший способ узнать что-то — это иметь практический проект для работы. Я решил объединить terraform, Azure, AWS и A-Frame, чтобы создать VR-версию моего резюме, чтобы добавить немного интерактивности.
Что такое A-Frame
A-Frame — это фреймворк на основе three.js, который позволяет создавать 3D-среды, которые могут отображаться в стандартном веб-браузере как статический веб-сайт, видимый в стандартном браузере, а также в гарнитуре виртуальной реальности. Вы используете теги стиля HTML для создания средах, которая делает первоначальную кривую обучения очень простой, но по-прежнему предоставляет широкие возможности для настройки, лучше всего она удаляет все шаблоны, необходимые для загрузки сайта, и позволяет вам работать с контентом.
Начальная загрузка сайта
Прежде чем мы начнем кодировать что-либо, нам нужно предоставить место для его запуска, потому что он может работать как статический веб-сайт, он предоставляет большое количество опций, я старался сделать его как можно более простым, предоставив пространство для роста, поэтому я Я выбрал следующие конфигурации.
АМС
Сегмент S3 с включенным статическим веб-хостингом.
Лазурный
Статическое веб-приложение, которое заботится о пользовательском доменном имени, хостинге сайта и CDN в виде единого пакета, что позволяет мне сосредоточиться на коде.
Azure DNS, мой домен размещен в Azure, поэтому это позволит мне использовать terraform для создания записей имени хоста.
Хранилище BLOB-объектов Azure для хранения всех моих ресурсов, изображений, звуков и т. д. в первую очередь связано с ограничением в 250 МБ для статических веб-приложений на уровне бесплатного пользования.
Обычно я бы использовал модули terraform для создания этого, но для простоты код terraform, используемый полностью, приведен ниже, вы можете сделать это более полным, добавив CDN перед частями среды (и, возможно, захотите для «производственной» системы), но это работа, которая не добавит ценности этому.
############################################
# Настройка поставщиков AWS и Azure
############################################
терраформировать {
required_providers{
азурерм = {
source = “hashicorp/azurerm”
версия = "= 2.78.0"
}
авс = {
источник = «hashicorp/aws»
версия = "= 3.61.0"
}
}
}
поставщик "azurerm" {
функции{}
}
поставщик "aws" {
access_key = "xxxxx"
secret_key = "гггг"
регион = "eu-west-2"
}
############################################
# Настройте используемые переменные
############################################
местные жители{
azregion = "Западная Европа"
bucketname = «vr.thepaynetrain.com»
azname = "vr-thepaynetrain-com"
}
############################################
# Создайте группу ресурсов в Azure
############################################
ресурс "azurerm_resource_group" "vr-thepaynetrain-com-rg" {
имя = “${local.azname}-rg”
location = local.azregion
}
############################################
# Создайте статическое веб-приложение для использования
# ПРИМЕЧАНИЕ. Пользовательские доменные имена пока нельзя создать, вам нужно # использовать консоль
############################################
ресурс "azurerm_static_site" "vr-thepaynetrain-com-swa" {
name = “${local.azname}-swa”
resource_group_name = azurerm_resource_group.vr-thepaynetrain-com-rg.name
location = local.azregion
sku_size = "Бесплатно"
sku_tier = «Бесплатно»
зависит_от = [
azurerm_resource_group.vr-thepaynetrain-com-rg
]
}
############################################
# Вывод ключа развертывания для использования в CI/CD
############################################
выведите ключ развертывания {
value = azurerm_static_site.vr-thepaynetrain-com-swa.api_key
}
############################################
# Создайте учетную запись хранения для хранения любых файлов, которые вам нужны, добавьте CORS, чтобы разрешить #веб-приложению доступ к ней
############################################
ресурс "azurerm_storage_account" "vr-thepaynetrain-com-sa" {
name = “vrthepaynetraincomsa”
resource_group_name = azurerm_resource_group.vr-thepaynetrain-com-rg.name
location = local.azregion
account_tier = "Стандартный"
account_replication_type = "GRS"
allow_blob_public_access = true
min_tls_version = "TLS1_2"
blob_properties{
cors_rule{
allowed_headers = [“*”]
allowed_methods = ["ПОЛУЧИТЬ"]
allowed_origins = [azurerm_static_site.vr-thepaynetrain-com-swa.default_host_name]
exposed_headers = [“*”]
max_age_in_seconds = 3600
}
}
зависит_от = [
azurerm_resource_group.vr-thepaynetrain-com-rg
azurerm_static_site.vr-thepaynetrain-com-swa
]
}
############################################
# Добавить контейнер для изображений в хранилище #
############################################
ресурс "azurerm_storage_container" "контейнер-хранилище" {
имя = «изображения»
storage_account_name = azurerm_storage_account.vr-thepaynetrain-com-sa.name
container_access_type = "blob"
зависит_от = [
azurerm_storage_account.vr-thepaynetrain-com-sa
]
}
############################################
# Создать DNS CNAME для хранилища и веб-приложения
############################################
ресурс "azurerm_dns_cname_record" "vr-thepaynetrain-com-cname" {
имя = «vr»
zone_name = «thepaynetrain.com»
resource_group_name = azurerm_resource_group.vr-thepaynetrain-com-rg.name
ttl = 3600
record = azurerm_static_site.vr-thepaynetrain-com-swa.name
зависит_от = [
azurerm_static_site.vr-thepaynetrain-com-swa
]
}
ресурс "azurerm_dns_cname_record" "vrassets-thepaynetrain-com-cname" {
имя = «врассет»
zone_name = «thepaynetrain.com»
resource_group_name = azurerm_resource_group.vr-thepaynetrain-com-rg.name
ttl = 3600
record = azurerm_storage_account.vr-thepaynetrain-com-sa.name
зависит_от = [
azurerm_storage_account.vr-thepaynetrain-com-sa
]
}
############################################
# создать корзину S3, сделать ее общедоступной и добавить политику
############################################
ресурс "aws_s3_bucket" "vrthepaynetrain-com-ss-s3" {
bucket = local.bucketname
acl = "общедоступно для чтения"
веб-сайт{
index_document = "index.html"
error_document = "error.html"
}
политика = ‹‹ПОЛИТИКА
{
"Версия": "2012-10-17",
"Заявление": [
{
"Sid": "PublicReadGetObject",
"Эффект": "Разрешить",
"Директор": "*",
"Действие": [
«s3:ПолучитьОбъект»
],
"Ресурс": [
"arn:aws:s3:::${local.bucketname}/*"
]
}
]
}
ПОЛИТИКА
}
Сайт
Теперь, когда у нас есть основа, мы можем начать с разработки сайта, мы должны начать с чего-то простого, поэтому мы начнем с создания простого пола и потолка с коробкой.
‹html›
‹голова›
‹script src="https://aframe.io/releases/1.2.0/aframe.min.js'›‹/script›
‹/голова›
‹тело›
‹сцена›
‹a-plane position=”0 0 -4’ rotate="-90 0 0' width=”4' height=”4' color=”#7BC8A4'›‹/a-plane›
‹a-sky color="#49B1EB"›‹/a-sky›
‹a-box position=”-1 0,5 -3’ rotate=”0 45 0’ color=”#4CC3D9’›‹/a-box›
‹/сцена›
‹/тело›
‹/html›
Это должно дать вам что-то похожее на это
Это довольно просто и может быть разбито на составные части.
1. Мы импортируем файл aframe js (в данном случае из CDN, а не с локального хостинга), чтобы справиться со всей магией, это абстрагирует большую часть тяжелой работы и предоставляет знакомую систему тегов в стиле HTML для создания объектов.
2. Все в VR-пространстве содержится в тегах ‹a-scene›, вы можете создавать вещи вне этого, которые будут отображаться как обычно.
3. Тег ‹a-plane› — это просто плоская поверхность, здесь мы устанавливаем его положение ниже всего остального и поворачиваем его на 90 градусов, превращая его в «пол».
4. Позиционирование находится в 3D-пространстве (то есть x, y, z), и, изменяя его, вы можете перемещать объект в любое место в пределах сцены и так близко или далеко, как хотите.
5. Неудивительно, что объект ‹a-sky› — это «небо» или, в данном случае, весь фон, и мы установили светло-голубой цвет. Вы можете использовать этот тег, чтобы установить изображение, которое Я сделаю в следующих статьях.
6. Наконец, коробка была размещена на плоскости и повернута под углом, чтобы представить 2 стороны к зрителю, вы можете видеть, что затенение для коробки выполняется автоматически без дополнительной работы с вами, это связано с автоматической настройкой освещения. , вы можете установить это вручную, если хотите, но я считаю, что это хорошо работает само по себе.
Этот код можно найти здесь, если вы хотите увидеть живой образец.
