разработка виртуального музея в форме 3d веб приложения
Заказать уникальную дипломную работу- 80 80 страниц
- 20 + 20 источников
- Добавлена 30.07.2024
- Содержание
- Часть работы
- Список литературы
ПЕРЕЧЕНЬ ОБОЗНАЧЕНИЙ И СОКРАЩЕНИЙ 3
ВВЕДЕНИЕ 4
1 Анализ предметной области 6
1.1 Общие сведения 6
1.2 Анализ средств разработки виртуальной реальности и обоснование выбора технологии 13
1.3 Анализ оборудования виртуальной реальности 16
1.4 Выводы 18
2.1. Выбор программных средств для разработки 3D-моделей 20
2.2. Выбор программных средств для разработки веб-приложения 25
2.3. Дополнительные средства разработки 35
3. Разработка 3D-моделей 39
3.1. Разработка основных 3D-моделей 39
3.1.1. Моделирование основных объектов виртуального музея 40
3.2. Использование системы частиц 42
4. Проектирование интерактивного веб-приложения 45
4.1. Архитектура интерактивного веб-приложения 45
4.2. Внедрение vr в приложение 47
5. Разработка интерактивного веб-приложения 55
5.1. Разработка интерфейса пользователя 55
5.2 Интеграция скриптов для интерактивности 56
5.3. Тестирование и оптимизация веб-приложения 58
Заключение 61
СПИСОК ИСТОЧНИКОВ 62
ПРИЛОЖЕНИЕ А 65
ПРИЛОЖЕНИЕ Б 66
ПРИЛОЖЕНИЕ В 67
ПРИЛОЖЕНИЕ Г 68
ПРИЛОЖЕНИЕ Д 69
ПРИЛОЖЕНИЕ Е 70
ПРИЛОЖЕНИЕ Ё 71
ПРИЛОЖЕНИЕ Ж 72
Основная структура HTML задает общие элементы интерфейса и контейнеры для отображения 3D-сцены, включая контейнеры для 3D-сцены, элементы управления и информационные панели. CSS используется для стилизации интерфейса, включая оформление кнопок, фонов и загрузочных экранов. В HTML-файле подключены внешние стили и скрипты.JavaScript обеспечивает интерактивность и управление 3D-сценой, включая инициализацию, рендеринг и взаимодействие с пользователем. Основная логика приложения реализована в файлах 3DArtMuseum.js и 3DArtMuseumPleaseRotate.js. В них содержится код для управления 3D-сценой с использованием библиотеки Three.js, а также обработки событий и взаимодействий с пользователем.Three.js используется для рендеринга 3D-объектов и сцены. Он предоставляет мощные инструменты для создания и управления 3D-графикой в веб-браузере. Примеры использования Three.js включают инициализацию сцены, камеры и рендерера, добавление объектов и освещения, а также управление анимацией и взаимодействиями. В примере кода для инициализации сцены создается новый объект сцены, камера с перспективой и рендерер, который устанавливается на размер окна браузера, после чего добавляется в HTML-документ.4.2. Внедрение vrв приложениеПользователь начинает свой путь в виртуальном музее в специально подготовленной зоне приветствия, расположенной во фойе. Эта начальная точка служит отправной точкой для погружения в виртуальное пространство музея и создания у пользователя ощущения реального присутствия.Описание начальной точки:Расположение: Фойе музея, представляющее собой центральное помещение с информационными стендами и указателями.Элементы окружения:В зоне приветствия расположены информационные экраны, которые предоставляют пользователю основные инструкции по навигации и взаимодействию в музее. Также присутствуют виртуальные гиды, которые могут помочь с начальной ориентацией.Визуальные и звуковые эффекты: Для создания атмосферы используются реалистичные звуковые эффекты (например, шаги, приглушенные разговоры, эхо) и детализированная визуализация интерьера фойе.Начальное взаимодействие: Пользователь может сразу начать взаимодействие с элементами окружения, чтобы получить информацию о текущих экспозициях и маршрутах.Для полного погружения в виртуальный музей можно использовать различные VR-устройства. Одним из таких устройств является шлем виртуальной реальности OSVR (Open Source Virtual Reality). Этот шлем предлагает открытые стандарты для VR-разработки и высокую совместимость с различными платформами.Шлем виртуальной реальности OSVR:Разработчик: Razer и Sensics.Характеристики: Дисплей с высоким разрешением, точное отслеживание движений головы, поддержка различных контроллеров.Совместимость: Работает с большинством современных VR-платформ и приложений.Инструкция по подключению и использованию шлема OSVRШаг 1: Подготовка оборудованияУбедитесь, что ваш компьютер соответствует минимальным системным требованиям для использования OSVR.Минимальные системные требования включают:Процессор: Intel Core i5 или выше.Графическая карта: NVIDIA GTX 970 / AMD R9 290 или выше.Память: 8GB RAM или больше.Операционная система: Windows 10, 64-bit.Распакуйте шлем OSVR и убедитесь, что все компоненты находятся в комплекте.Шлем VR OSVR.Кабели для подключения.Контроллеры (если есть в комплекте).Шаг 2: Подключение устройстваПодключите шлем OSVR к компьютеру.Используйте предоставленные HDMI и USB кабели для подключения шлема к соответствующим портам на вашем компьютере.Установите программное обеспечение OSVR.Скачайте и установите последнюю версию OSVR Runtime с официального сайта OSVR.Следуйте инструкциям на экране для завершения установки.Шаг 3: Настройка и калибровкаЗапустите OSVR Runtime и выполните первоначальную настройку.Настройте параметры отображения и калибруйте отслеживание движений головы.Проверьте подключение контроллеров (если используются).Убедитесь, что контроллеры правильно синхронизированы и работают корректно.Шаг 4: Запуск виртуального музеяЗапустите приложение виртуального музея на вашем компьютере.Убедитесь, что шлем OSVR подключен и готов к использованию.Наденьте шлем VR и убедитесь, что изображение четкое и комфортное для просмотра.Отрегулируйте ремешки и положение шлема для максимального комфорта.Шаг 5: Навигация и взаимодействиеИспользуйте контроллеры или встроенные функции управления для перемещения по виртуальному музею.Контроллеры VR: Используйте джойстики и кнопки на контроллерах для перемещения, взаимодействия с объектами и навигации по меню.Взгляд: Вы можете использовать взгляд для выбора и взаимодействия с объектами. Наведите взгляд на интересующий объект и используйте кнопку на контроллере для взаимодействия.Жесты:В некоторых приложениях можно использовать жесты рук для взаимодействия (если поддерживается вашим оборудованием).Пример кода для инициализации и настройки OSVR в приложенииconst scene = new THREE.Scene();const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);const renderer = new THREE.WebGLRenderer();renderer.setSize(window.innerWidth, window.innerHeight);document.body.appendChild(renderer.domElement);// Подключениеинастройка OSVRnavigator.getVRDisplays().then(function(displays) {if (displays.length > 0) {const vrDisplay = displays[0];renderer.vr.enabled = true; renderer.vr.setDevice(vrDisplay);// Запуск VR-режимаdocument.body.addEventListener('click', function() { vrDisplay.requestPresent([{ source: renderer.domElement }]); }); }});// Созданиеидобавлениеэлементовсценыconst geometry = new THREE.BoxGeometry(1, 1, 1);const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });const cube = new THREE.Mesh(geometry, material);scene.add(cube);camera.position.set(0, 1.6, 5);function animate(){renderer.setAnimationLoop(function() {cube.rotation.x += 0.01;cube.rotation.y += 0.01;renderer.render(scene, camera);});}animate();Этот код включает базовую настройку VR-сцены с использованием Three.js и OSVR. Он инициализирует сцену, камеру и рендерер, а также включает поддержку VR-устройств.Методы управления:Контроллеры VR: Основной метод управления. Пользователь использует контроллеры для перемещения по музею, взаимодействия с объектами и навигации по меню.Взгляд: Пользователь может взаимодействовать с элементами интерфейса и экспонатами, направив взгляд на них и нажав кнопку на контроллере.Жесты (если поддерживается): Пользователь может использовать жесты рук для взаимодействия с объектами в музее.Основные зоны музея включают фойе, экспозиционные залы и информационные панели. Фойе является начальной точкой, где пользователь получает информацию о музее, экспозициях и маршрутах. Экспозиционные залы тематически оформлены и содержат различные произведения искусства. Информационные панели, экраны и интерактивные панели предоставляют подробную информацию об экспонатах и истории музея.Пользователь увидит реалистичные модели экспонатов и их описание, детализированные визуальные эффекты, создающие атмосферу настоящего музея, и информационные панели с текстовой и аудиовизуальной информацией. Взаимодействовать пользователь сможет с выбором экспонатов, наведением взгляда или использованием контроллеров для выбора интересующего экспоната, получением информации через интерактивные панели и всплывающие окна, содержащие описание, историю и дополнительную информацию об экспонате. Также доступны встроенные аудиогиды, которые можно активировать для прослушивания подробных рассказов о произведениях искусства.Интеграция VR-устройств осуществляется с помощью библиотеки Three.js, которая позволяет легко интегрировать VR-устройства и обеспечить реалистичное погружение в виртуальное пространство. Three.js предоставляет удобные инструменты для работы с WebVR API, что позволяет создавать интерактивные и погружающие VR-опыты. Основные шаги интеграции включают подключение VR-устройства с использованием WebVR API для определения доступных VR-устройств и их инициализации, настройку рендеринга с включением VR-режима в Three.js и настройку рендеринга для поддержки стереоскопического отображения, а также обработку ввода с настройкой контроллеров VR для управления и взаимодействия с объектами в виртуальной среде.Пример кода для интеграции VR-устройств:const scene = new THREE.Scene();const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);const renderer = new THREE.WebGLRenderer({ antialias: true });renderer.setSize(window.innerWidth, window.innerHeight);renderer.vr.enabled = true;document.body.appendChild(renderer.domElement);// Подключение VR-устройствnavigator.getVRDisplays().then(displays => {if (displays.length > 0){ renderer.vr.setDevice(displays[0]);document.body.addEventListener('click', () => displays[0].requestPresent([{ source: renderer.domElement }])); }});// Добавлениеобъектовсценыconst geometry = new THREE.BoxGeometry();const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });const cube = new THREE.Mesh(geometry, material);scene.add(cube);camera.position.z = 5;function animate(){renderer.setAnimationLoop(() => {cube.rotation.x += 0.01;cube.rotation.y += 0.01;renderer.render(scene, camera);});}animate();Инструкция по использованию шлема VR в музееПодготовка устройства:Зарядка и настройка: Убедитесь, что VR-устройство полностью заряжено и правильно настроено. Подключите все необходимые кабели.Установка программного обеспечения: Скачайте и установите необходимые драйверы и программное обеспечение для VR-устройства, например, OSVR Runtime.Запуск приложения:Подключение устройства к компьютеру: Подключите шлем и контроллеры VR к компьютеру с помощью предоставленных кабелей.Запуск приложения: Откройте приложение виртуального музея на вашем компьютере и убедитесь, что VR-устройство распознано и готово к использованию.Навигация и взаимодействие:Использование контроллеров: Для перемещения по музею используйте джойстики на контроллерах VR. Для взаимодействия с экспонатами и информационными панелями используйте кнопки на контроллерах.Взгляд: Наведите взгляд на интересующий объект или информационную панель, затем нажмите соответствующую кнопку на контроллере для получения информации или активации аудиогида.Основные функции кода:Движение от первого лица: Управление перемещением пользователя в виртуальном пространстве.Взаимодействие с объектами: Обработка ввода с контроллеров для взаимодействия с экспонатами и информационными панелями.Загрузка сцен: Инициализация и рендеринг виртуальных сцен и объектов.Пример кода для обеспечения движения от первого лица и взаимодействия:const scene = new THREE.Scene();const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);const renderer = new THREE.WebGLRenderer({ antialias: true });renderer.setSize(window.innerWidth, window.innerHeight);renderer.vr.enabled = true;document.body.appendChild(renderer.domElement);navigator.getVRDisplays().then(displays => {if (displays.length > 0){ renderer.vr.setDevice(displays[0]);document.body.addEventListener('click', () => displays[0].requestPresent([{ source: renderer.domElement }])); }});const controls = new THREE.VRControls(camera);const effect = new THREE.VREffect(renderer);effect.setSize(window.innerWidth, window.innerHeight);const geometry = new THREE.BoxGeometry();const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });const cube = new THREE.Mesh(geometry, material);scene.add(cube);camera.position.set(0, 1.6, 5);function animate(){controls.update();effect.render(scene, camera);cube.rotation.x += 0.01;cube.rotation.y += 0.01;renderer.setAnimationLoop(animate);}animate();Этот код включает основные функции для движения от первого лица, взаимодействия с объектами и загрузки сцен в VR-приложении. Он обеспечивает реалистичное и погружающее взаимодействие пользователя с виртуальным музеем.5. Разработка интерактивного веб-приложения5.1. Разработка интерфейса пользователяРазработка интерфейса пользователя начинается с создания главного меню, которое приветствует пользователей при запуске приложения. Главная страница приложения "3D Art Museum" представлена приветственным экраном, на котором отображается название музея и информация о его местоположении. Это меню также включает кнопку для начала виртуального тура.Процесс создания главного меню включает разработку макета в HTML и его стилизацию с помощью CSS. В HTML описаны все основные элементы, такие как заголовок, текст с адресом музея и кнопка для начала тура. CSS отвечает за визуальное оформление этих элементов, включая выбор шрифтов, цветов и расположение на странице.Пример HTML и CSS для главного меню:
< title>3D Художественный музей< / title><link rel = "stylesheet"type = "text/css"href = "3DArtMuseum.css">< / head>Взаимодействие пользователя с интерфейсом включает реализацию интерактивных элементов и событий, которые делают работу с приложением удобной и интуитивно понятной. Например, кнопка "Начать виртуальный тур" активирует событие, которое переводит пользователя к основной части приложения, где отображается 3D-сцена музея.Для обработки взаимодействия с кнопкой используется JavaScript. Скрипт, привязанный к кнопке, запускает соответствующую функцию при нажатии, что обеспечивает переход к виртуальному туру.Пример JavaScript для обработки нажатия кнопки:document.getElementById('start-tour').addEventListener('click', function() {// Переходк 3D сценеdocument.getElementById('main-menu').style.display = 'none'; init3DScene();});function init3DScene() {// Инициализацияирендеринг 3D-сценысиспользованием Three.jsconst scene = new THREE.Scene();const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);const renderer = new THREE.WebGLRenderer();renderer.setSize(window.innerWidth, window.innerHeight);document.body.appendChild(renderer.domElement);// Добавлениеобъектовиосвещенияconst light = new THREE.AmbientLight(0x404040); // soft white light scene.add(light);const geometry = new THREE.BoxGeometry();const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });const cube = new THREE.Mesh(geometry, material); scene.add(cube);camera.position.z = 5; function animate() { requestAnimationFrame(animate);cube.rotation.x += 0.01;cube.rotation.y += 0.01;renderer.render(scene, camera);}animate();}В данном примере кнопка "Начать виртуальный тур" скрывает главное меню и запускает функцию init3DScene, которая инициализирует 3D-сцену с помощью Three.js. В этой функции создается сцена, камера и рендерер, а также добавляется простой 3D-объект и освещение. Анимация объекта обновляется каждый кадр, что создает эффект вращения.Таким образом, процесс разработки интерфейса пользователя включает создание главного меню и навигации, а также настройки взаимодействия пользователя с интерфейсом. Эти элементы обеспечивают удобство использования и интуитивное взаимодействие с приложением, создавая комфортные условия для виртуального тура по музею.5.2 Интеграция скриптов для интерактивностиВ проекте "3D Art Museum" JavaScript играет ключевую роль в добавлении интерактивных элементов. В частности, файлы 3DArtMuseum.js и 3DArtMuseumPleaseRotate.js используются для обеспечения взаимодействия пользователя с веб-приложением.В 3DArtMuseum.js используется библиотека Three.js для создания и отображения 3D-моделей. Этот файл содержит множество функций, которые позволяют загружать и отображать 3D-объекты, настраивать материалы и текстуры, а также управлять камерой и сценой. Например, при создании сцены и добавлении моделей в нее, используются методы Three.js, такие как scene.add для добавления объектов и renderer.render для отображения сцены на экране. Кроме того, в этом файле реализованы обработчики событий, которые позволяют пользователю взаимодействовать с 3D-объектами посредством кликов и перемещений.Взаимодействие пользователя с 3D-объектами реализуется через обработчики событий, такие как mousemove, mousedown и mouseup. Эти события позволяют определить, когда пользователь наводит указатель мыши на объект, нажимает на него или перемещает его.Например, в 3DArtMuseum.js используется Raycaster от Three.js для определения, на какой объект указывает пользователь. Raycaster создает невидимый луч от камеры к указателю мыши и проверяет пересечения с объектами сцены. Если пересечение обнаружено, соответствующие функции могут изменить свойства объекта, такие как цвет или масштаб, или выполнить другие действия, определенные в проекте.Файл 3DArtMuseumPleaseRotate.js обеспечивает дополнительную интерактивность для мобильных устройств, требуя от пользователя повернуть устройство в определенную ориентацию для правильного отображения 3D-сцены. Этот скрипт отображает сообщение и графику, когда устройство находится в неправильной ориентации, и скрывает их, когда устройство повернуто правильно.Таким образом, интеграция скриптов в проекте обеспечивает богатый интерактивный опыт для пользователей, позволяя им не только просматривать 3D-объекты, но и активно взаимодействовать с ними, что делает виртуальный тур по музею более захватывающим и увлекательным.5.3. Тестирование и оптимизация веб-приложенияПриложение "3D Art Museum" прошло обширное тестирование на различных устройствах и браузерах, чтобы обеспечить его стабильную работу и высокую производительность. Процесс тестирования включал следующие этапы:Тестирование на различных устройствах: Приложение было протестировано на десктопных устройствах под управлением Windows и macOS, а также на мобильных устройствах с операционными системами iOS и Android. Это позволило убедиться, что интерфейс корректно отображается и функционирует на экранах различных размеров и разрешений. Особое внимание уделялось адаптивности интерфейса и правильной работе интерактивных элементов на сенсорных экранах.Тестирование в различных браузерах: Приложение было проверено на совместимость с основными браузерами, включая Google Chrome, Mozilla Firefox, Safari и Microsoft Edge. Были выявлены и исправлены проблемы, связанные с рендерингом и работой скриптов в различных браузерных движках. Например, некоторые стили и анимации были скорректированы для обеспечения одинакового отображения во всех поддерживаемых браузерах.Функциональное тестирование: Все основные функции приложения были тщательно проверены, включая загрузку и отображение 3D-моделей, работу интерактивных элементов и корректность обработчиков событий. Проверка работы Raycaster и взаимодействия с 3D-объектами показала, что элементы сцены корректно реагируют на наведение и клики пользователя. Функциональность главного меню и переход к виртуальному туру также были протестированы и работали без сбоев.Тестирование производительности: Приложение было протестировано на производительность на различных устройствах, чтобы убедиться в его оптимальной работе. Были проведены измерения времени загрузки, плавности анимаций и общей отзывчивости интерфейса. В результате тестирования были выявлены и устранены узкие места, замедлявшие работу приложения. Например, оптимизация загрузки 3D-моделей и текстур позволила сократить время начальной загрузки.Тестирование на устойчивость: Приложение было протестировано на устойчивость к различным сценариям использования, включая многократные переходы между страницами, быстрое переключение между элементами интерфейса и работу с несколькими открытыми вкладками. Приложение показало высокую устойчивость и не выявило критических ошибок или сбоев при интенсивном использовании.Для обеспечения высокой производительности приложения были применены различные методы оптимизации:Сжатие ресурсов: Все графические ресурсы, включая текстуры и изображения, были сжаты без потери качества, что сократило их размер и уменьшило время загрузки. Также были сжаты файлы JavaScript и CSS, что уменьшило общий объем передаваемых данных.Оптимизация рендеринга: Использование уровней детализации (LOD) для 3D-моделей позволило снизить нагрузку на графический процессор при отображении объектов на большом расстоянии. Это улучшило производительность сцены при перемещении камеры и взаимодействии с объектами.Уменьшение нагрузки на процессор и память: Были применены техники ленивой загрузки (lazy loading) для ресурсов, которые не требуются сразу при запуске приложения. Это позволило распределить нагрузку по времени и улучшить отзывчивость интерфейса. Оптимизация использования памяти включала очистку ненужных объектов и данных из памяти после их использования.Кэширование: Использование кэширования для статических ресурсов, таких как изображения и скрипты, позволило сократить время загрузки при повторных посещениях приложения. Это также снизило нагрузку на сервер и улучшило общую производительность.Эти меры позволили обеспечить высокую производительность и стабильность работы веб-приложения "3D Art Museum" на различных устройствах и платформах, создавая комфортные условия для пользователей и улучшая их взаимодействие с виртуальным музеем.ЗаключениеВ ходе выполнения данной бакалаврской работы была успешно разработана система виртуального музея, реализованная в форме 3D веб-приложения. Основной целью работы было повышение привлекательности музейных экспозиций с использованием технологии виртуальной реальности, что было успешно достигнуто путем создания интерактивной 3D среды.Анализ предметной области позволил выделить ключевые аспекты и потребности современных музейных учреждений, что стало основой для проектирования и разработки веб-приложения. Благодаря использованию современных программных средств для 3D моделирования и веб-разработки, таких как Unity и Three.js, было создано приложение, которое не только демонстрирует потенциал виртуальных технологий в музейном деле, но и предоставляет пользователям уникальный опыт погружения в музейные экспозиции.Проект демонстрирует значительные возможности в области образования и культуры, предоставляя новые способы взаимодействия с искусством и историей. Реализация таких проектов может значительно расширить аудиторию музеев, привлекая не только традиционных посетителей, но и молодежь, а также лиц с ограниченными возможностями, для которых посещение реальных музейных залов может быть затруднено.В заключение, данная работа показывает, что современные технологии VR могут играть ключевую роль в развитии культурных и образовательных проектов, делая искусство и историю доступными для более широкой аудитории в интерактивной и привлекательной форме. В дальнейшем планируется развитие проекта с добавлением новых экспозиций и улучшением функционала взаимодействия пользователя с виртуальным контентом.СПИСОК ИСТОЧНИКОВ"Building 3D Web Applications using HTML 5" // C# Corner [Электронный ресурс]. - Режим доступа: https://www.c-sharpcorner.com/UploadFile/manas1/3d-web-application-using-html5 (дата обращения: 19.04.2024)."Creating a 3D Model Viewer with Three.js" // FreeCodeCamp [Электронный ресурс]. - Режим доступа: https://www.freecodecamp.org/news/creating-a-3d-model-viewer-with-three-js (дата обращения: 19.04.2024)."How to Create VR Content Using A-Frame, Part of the Mozilla VR Project" // SitePoint [Электронныйресурс]. - Режимдоступа: https://www.sitepoint.com/create-vr-content-using-a-frame (датаобращения: 19.04.2024)."Getting Started with WebGL" // Mozilla Developer Network [Электронныйресурс]. - Режимдоступа: https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/Tutorial/Getting_started_with_WebGL (датаобращения: 19.04.2024)."Building 3D Games with Babylon.js" // SitePoint [Электронныйресурс]. - Режимдоступа: https://www.sitepoint.com/building-3d-games-babylon-js (датаобращения: 19.04.2024)."Three.js Fundamentals" // Three.js Fundamentals [Электронныйресурс]. - Режимдоступа: https://threejsfundamentals.org (датаобращения: 19.04.2024)."Learn WebGL: Best WebGL Tutorials, Books & Courses" // Hackr.io [Электронныйресурс]. - Режимдоступа: https://hackr.io/blog/learn-webgl (датаобращения: 19.04.2024)."3D Graphics with WebGL 2" // O'Reilly Media [Электронный ресурс]. - Режим доступа: https://www.oreilly.com/library/view/3d-graphics-with/9781492026456 (дата обращения: 19.04.2024)."Advanced Graphics with Three.js" // Medium [Электронный ресурс]. - Режим доступа: https://medium.com/@peterbeshai/advanced-graphics-with-three-js (дата обращения: 19.04.2024)."The Best Practices for Efficient WebGL Rendering" // Stack Overflow [Электронныйресурс]. - Режимдоступа: https://stackoverflow.blog/2020/02/10/best-practices-for-efficient-webgl-rendering (датаобращения: 19.04.2024)Творческий коллектив. Discover three.js. — СПб.: Discover three.js, 2020. — 450 с.Борщ. Building 3D Web Applications using Three.js. — М.: Borstch, 2021. — 320 с.Дирксен, Джос. Learning Three.js: The JavaScript 3D Library for WebGL. — М.: Packt Publishing, 2018. — 500 с.Париси, Тони. WebGL: Up and Running: Building 3D Graphics for the Web. — СПб.: O'Reilly Media, 2015. — 350 с.Страчча, Алессандро. Interactive Web Development with Three.js and A-Frame. — СПб.: Orange Education, 2024. — 290 с.Дирксен, Джос. Three.js Essentials. — М.: Packt Publishing, 2017. — 300 с.Париси, Тони. Programming 3D Applications with HTML5 and WebGL. — СПб.: O'Reilly Media, 2014. — 400 с.Дирксен, Джос. Three.js Cookbook. — М.: Packt Publishing, 2019. — 350 с.Дирксен, Джос. Mastering Three.js. — М.: Packt Publishing, 2020. — 450 с.Гайоур, Фархад. Real-Time 3D Graphics with WebGL 2. — М.: Packt Publishing, 2021. — 500 с.ПРИЛОЖЕНИЯПРИЛОЖЕНИЕ АПерчатки виртуальной реальностиПРИЛОЖЕНИЕ БКостюмы виртуальной реальностиПРИЛОЖЕНИЕ В«Сенсорама»ПРИЛОЖЕНИЕ ГИнтерфейс Unreal Engine 4ПРИЛОЖЕНИЕ ДИнтерфейс UnityПРИЛОЖЕНИЕ ЕГарнитура HTC ViveПРИЛОЖЕНИЕ ЁГарнитура Oculus RiftПРИЛОЖЕНИЕ ЖШлем виртуальной реальности OSVRПРИЛОЖЕНИЕ ЗТаблица 2 – характеристики полотенНазваниеХудожникГод созданияОписаниеЗвездная ночьВинсент Ван Гог1889Картина была написана Ван Гогом в санатории Сен-Реми-де-Прованс. Она изображает ночное небо со звездами и винтовыми узорами.КрикЭдвард Мунк1893Картина изображает кричащего человека на мосту с выражением ужаса на лице. Это одна из самых известных картин МункаМона ЛизаЛеонардо да Винчи1503-1506Портрет Лизы Герардини, более известной как Джоконда или Мона Лиза. Она является одной из самых известных картин в мире.Продолжение таблицы 2Последний ужинЛеонардо да Винчи1495-1498Картина изображает последнюю трапезу Иисуса с апостолами. Она находится на стене трапезной доминиканского монастыря Санта-Мария-делле-Грацие в Милане.Лас МенинасДиего Веласкес1656Картина изображает сцену из жизни испанской королевской семьи. Это один из самых знаменитых шедевров Веласкеса.Постоянство памятиСальвадор Дали1931Картина известна также как "мягкие часы". Она изображает расплавленные часы на фоне пустынного пейзажа.Продолжение таблицы 2Страшный судМикеланджело1536-1541Фреска украшает боковую стену Сикстинской капеллы и изображает сцену последнего суда.Воскресный день на острове Гранд-ЖаттЖорж Сёра1884-1886Картина выполнена в технике пуантилизма и изображает сцену отдыха на берегу реки.Ночной дозорРембрандт ван Рейн1642Картина изображает отряд стрелков, готовящихся к патрулированию. Она является одной из жемчужин коллекции Рембрандта.Рождение ВенерыСандро Боттичелли1486Картина изображает мифологический сюжет рождения Венеры.Продолжение таблицы 2ГерникаПабло Пикассо1937Картина является откликом на бомбардировку Герники во время гражданской войны в Испании.Спальня в АрлеВинсент Ван Гог1888Картина изображает интерьер спальни Ван Гога в Арле.Девушка с жемчужной серёжкойЯн Вермеер1665Портрет неизвестной девушки с жемчужной серёжкой.ПоцелуйГустав Климт1907-1908Картина изображает влюблённую пару, покрытую золотым орнаментом.ВеснаСандро Боттичелли1482Картина изображает аллегорическую сцену с мифологическими персонажами.Продолжение таблицы 2Впечатление, восходящее солнцеКлод Моне1872Картина дала название импрессионизму и изображает порт Гавра в предрассветное время.Кафе ночьюВинсент Ван Гог1888Картина изображает ночное кафе на одной из улиц Арля.Афинская школаРафаэль1510-1511Фреска изображает древнегреческих философов и ученых в архитектурной обстановке.Сын человеческийРене Магритт1964Портрет человека с яблоком, закрывающим лицо.1. "Building 3D Web Applications using HTML 5" // C# Corner [Электронный ресурс]. - Режим доступа: https://www.c-sharpcorner.com/UploadFile/manas1/3d-web-application-using-html5 (дата обращения: 19.04.2024).
2. "Creating a 3D Model Viewer with Three.js" // FreeCodeCamp [Электронный ресурс]. - Режим доступа: https://www.freecodecamp.org/news/creating-a-3d-model-viewer-with-three-js (дата обращения: 19.04.2024).
3. "How to Create VR Content Using A-Frame, Part of the Mozilla VR Project" // SitePoint [Электронныйресурс]. - Режимдоступа: https://www.sitepoint.com/create-vr-content-using-a-frame (датаобращения: 19.04.2024).
4. "Getting Started with WebGL" // Mozilla Developer Network [Электронныйресурс]. - Режимдоступа: https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/Tutorial/Getting_started_with_WebGL (датаобращения: 19.04.2024).
5. "Building 3D Games with Babylon.js" // SitePoint [Электронныйресурс]. - Режимдоступа: https://www.sitepoint.com/building-3d-games-babylon-js (датаобращения: 19.04.2024).
6. "Three.js Fundamentals" // Three.js Fundamentals [Электронныйресурс]. - Режимдоступа: https://threejsfundamentals.org (датаобращения: 19.04.2024).
7. "Learn WebGL: Best WebGL Tutorials, Books & Courses" // Hackr.io [Электронныйресурс]. - Режимдоступа: https://hackr.io/blog/learn-webgl (датаобращения: 19.04.2024).
8. "3D Graphics with WebGL 2" // O'Reilly Media [Электронный ресурс]. - Режим доступа: https://www.oreilly.com/library/view/3d-graphics-with/9781492026456 (дата обращения: 19.04.2024).
9. "Advanced Graphics with Three.js" // Medium [Электронный ресурс]. - Режим доступа: https://medium.com/@peterbeshai/advanced-graphics-with-three-js (дата обращения: 19.04.2024).
10. "The Best Practices for Efficient WebGL Rendering" // Stack Overflow [Электронныйресурс]. - Режимдоступа: https://stackoverflow.blog/2020/02/10/best-practices-for-efficient-webgl-rendering (датаобращения: 19.04.2024)
11. Творческий коллектив. Discover three.js. — СПб.: Discover three.js, 2020. — 450 с.
12. Борщ. Building 3D Web Applications using Three.js. — М.: Borstch, 2021. — 320 с.
13. Дирксен, Джос. Learning Three.js: The JavaScript 3D Library for WebGL. — М.: Packt Publishing, 2018. — 500 с.
14. Париси, Тони. WebGL: Up and Running: Building 3D Graphics for the Web. — СПб.: O'Reilly Media, 2015. — 350 с.
15. Страчча, Алессандро. Interactive Web Development with Three.js and A-Frame. — СПб.: Orange Education, 2024. — 290 с.
16. Дирксен, Джос. Three.js Essentials. — М.: Packt Publishing, 2017. — 300 с.
17. Париси, Тони. Programming 3D Applications with HTML5 and WebGL. — СПб.: O'Reilly Media, 2014. — 400 с.
18. Дирксен, Джос. Three.js Cookbook. — М.: Packt Publishing, 2019. — 350 с.
19. Дирксен, Джос. Mastering Three.js. — М.: Packt Publishing, 2020. — 450 с.
20. Гайоур, Фархад. Real-Time 3D Graphics with WebGL 2. — М.: Packt Publishing, 2021. — 500 с.