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

Что такое расширенная реальность?

Расширенная реальность (XR) — это универсальный термин, обозначающий:

  • Virtuel Reality — VR: это трехмерная среда, в которой пользователи могут полностью погрузиться в смоделированную реальность с помощью специальных наушников.
  • Дополненная реальность — AR: пользователи могут использовать такие устройства, как мобильный телефон или планшет, для наложения изображений и звуков, созданных в цифровом виде, на их реальную среду.
  • Смешанная реальность — смешивает реальный и виртуальный миры для создания сложных сред, в которых физические и цифровые элементы взаимодействуют в режиме реального времени.

Расширенная реальность распространяется на VR, AR и MR, а также на все будущие иммерсивные технологии, которые позволяют расширить реальность, смешивая виртуальную графику с элементами реального мира. К таким технологиям относятся, например, искусственный интеллект (ИИ), Интернет вещей (IoT), сеть 5G и другие. XR охватывает весь спектр реальных и виртуальных сред.

Для получения дополнительной информации о XR посетите здесь

О проекте

Мы создадим простое веб-приложение AR, чтобы обнаружить уменьшенную солнечную систему и перемещаться внутри нее. Это просто базовый проект того, как использовать WebGL с three.js, чтобы мы не собирались создавать солнечную систему со всеми планетами. Наша система будет состоять из:

  • солнце
  • Земля
  • Луна

Во-первых, нам нужно создать сцену, так что нам нужно:

  1. Подготовьте html-документ для отображения в веб-браузере
  2. Создать сцену
  3. Рендеринг сцены
  4. Анимируйте сцену

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

Следующим шагом является добавление группы, содержащей систему Земли, она содержит:

  • Земля
  • Атмосфера Земли
  • Осевая линия
  • Луна

после нам нужно сделать земную орбиту, так как мы знаем, что орбита Земли не является идеальной окружностью, поэтому мы сделаем эллиптическую кривую.

Чтобы придать сцене более реалистичный эффект, мы добавим текстуру солнцу, земле и луне.

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

Требование

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

Тебе понадобится:

  • код Visual Studio, установленный на вашем ноутбуке, после того, как вам нужно добавить какое-то расширение. Во-первых, 'Live Server', он позволяет нам открывать html-файл с нашего локального хоста, поэтому вместо того, чтобы открывать его из нашей файловой системы, он будет открывать его, например. , локальный хост:5500. Второе расширение – Раскрашивание пар скобок. Оно окрашивает пары скобок в определенный цвет, чтобы вы не перепутались.
  • скачать библиотеку three.js — здесь
  • Для организации нашего проекта лучше создать папку с именем js, куда мы поместим всю библиотеку, с которой будем работать, а также вам нужно создать другую папку с именем texture положить нужный файл для текстур.

О THREE.js

ThreeJS — это библиотека на JavaScript, которая позволяет вам манипулировать 3D-объектами прямо в браузере. Что вы должны понимать, так это то, что ThreeJS через Javascript позволяет вам использовать WebGL в холсте HTML5.

Таким образом, у нас есть библиотека Javascript (ThreeJS), которая манипулирует API Javascript для выполнения графического рендеринга (WebGL) в компоненте HTML5.

Другими словами, для работы с ThreeJS вам необходимо манипулировать несколькими ключевыми элементами:

  • Сцена. Вы можете видеть сцену как трехмерный мир, в котором собираетесь работать. Вам нужно расположить объекты на этой сцене. Вы собираетесь создать столько объектов, сколько захотите, в своей сцене с помощью мешей.
  • Меши. Меши — это просто объекты, которые будут присутствовать в вашей сцене. Вам нужно будет осветить эти объекты, чтобы увидеть их. Чтобы увидеть их, вам придется снять их на видео. Чтобы их снять, нужна камера.
  • Камера. Как и в реальной жизни, камера будет показывать точку обзора вашей сцены. Перемещая камеру, вы перемещаете объекты внутрь или наружу. это поле зрения. Именно то, что вы видите в этом поле зрения этой камеры, будет отправлено в механизм рендеринга.
  • Движок рендеринга.Движок рендеринга использует сцену и камеру в качестве параметров. При этом он отображает все на холсте HTML5. Механизм рендеринга будет создавать изображение каждый раз, когда ваш экран обновляется. В общем, 60 кадров в секунду.

Рисунок ниже иллюстрирует это объяснение более конкретно:

Подробнее по ссылке здесь

График сцены

что такое граф сцены?

Граф сцены — это структура данных, обычно используемая для представления иерархических взаимосвязей, применяемых к набору объектов в 3D-сцене.

Структура и содержание графа сцены, очевидно, будут зависеть от типа информации, которую он хранит:

  • Корневой узел дерева представляет всю совокупность объектов в 3D-сцене.
  • Каждый листовой узел представляет либо объект, либо часть объекта и поддерживает необходимую геометрическую информацию в дополнение к некоторой семантической информации, камера и источники света также могут быть представлены листовыми узлами.

Итак, для нашего проекта мы создаем следующий граф, поэтому мы явно помещаем сцену в качестве корневого узла, добавляем камеру и свет, Earth_sytem — это группа, а Orbit — это линия.

Спасибо за прочтение! Я надеюсь, что вы нашли эту статью полезной.

Вы можете найти код для сборки проекта: