Similar presentations:
ПРЕЗЕНТАЦИЯ ВКР
1.
Разработка веб-приложениядля интерактивной визуализации
конструкции беспилотной системы
Направление подготовки: 09.03.01 Информатика и вычислительная техника
Выполнил: ст. гр. ИВТ/б-22-1-о Шумейко Б. Г.
Научный руководитель: доцент Амосова С. Г.
г. Севастополь, 2026
2.
Постановка задачиЦЕЛЬ:
Разработка веб-приложения для интерактивной визуализации конструкции беспилотной системы
ЗАДАЧИ:
Обзор литературы и анализ предметной области
Проектирование структуры веб-приложения
Формирование требований к системе
Подготовка 3D-моделей с анимацией в Blender
Системный анализ объекта проектирования
Реализация веб-приложения
Обоснование выбора технологий разработки
Тестирование функциональности
Стек: HTML5 · CSS3 · Vanilla JS · Three.js r128 · GLB/glTF · Blender 5.1 · VS Code Live Server · Opera GX
3.
Объекты визуализацииMini-ROV Guardian
DJI Phantom 4
Unitree Go2
Телеуправляемый подводный аппарат
Квадрокоптер
Четвероногий робот-квадрупед
3,5 кг · до 100 м · 6 движителей · 4K HDR
1,38 кг · 72 км/ч · 28 мин · 5 км
15 кг · 3,5 м/с · 12 DOF · лидар NVIDIA
Float-анимация парения
Анимация разборки + float
Анимация разборки, BlenderKit
4.
Системный анализ объекта проектирования1
2
3
4
5
Единство
Единая CSS Custom Properties (20+ переменных), единый формат GLB, единый дизайн-код
Декомпозиция
6 этапов: Sketchfab → Blender → анимация → GLB → веб-интерфейс → тестирование
Модульность
6 модулей: GLTFLoader · AnimationMixer · Camera · Themes · UI · BgCanvas
Иерархия
Scene→Group→Mesh · заголовок→просмотрщик→панель · MODELS→объект→specs/info
Развитие
Новая модель = 1 GLB + 1 запись в MODELS. Новая тема = 1 блок переменных
5.
Разработка веб-приложенияМассив MODELS
Единственная точка регистрации всех моделей: файл, параметры камеры, характеристики, описание. Новая модель — 1 GLB + 1 запись
в массиве, код не меняется
loadModelFile()
Асинхронная загрузка GLB: автоцентрирование по Box3, масштабирование, обработка материалов (sRGBEncoding, стекло через
KHR_materials_transmission), создание AnimationAction
updateCamera()
Сферические координаты (θ, φ, r). Линейная интерполяция к целевым значениям с коэффициентом 0.08 за кадр — эффект плавной
инерции при управлении мышью
CSS Custom Properties
20+ переменных на тему (--bg, --accent, --text, --border…). Переключение через атрибут data-theme на <html> — браузер мгновенно
пересчитывает всё
Canvas 2D анимированный фон
3 независимые сцены: ROV — световые лучи + пузырьки + морской снег · DJI — мерцающие звёзды · Go2 — дрейфующие частицы. 3
палитры × 3 темы
6.
Три темы оформления и анимированный фонСветлая тема
Синяя тема
Тёмная тема
7.
Анимация разборки конструкцииMini-ROV Guardian
DJI Phantom 4
Unitree Go2
Реализация: timeScale = 1 (разборка) / timeScale = –1 (сборка) · THREE.AnimationMixer · LoopOnce + clampWhenFinished
8.
Тестовые примерыЗагрузка
6.1
Прогресс-бар → Mini-ROV Guardian, анимированный фон
Навигация
6.2
←/→, клавиши, список — анимация затемнения
Разборка
6.3
timeScale=1/−1, Go2: 14 подсборок + внутренние детали
Темы
6.4
3 темы, мгновенное применение через data-theme
Доп. функции
6.5
Wireframe, авто-вращение, сброс, модальное окно
9.
ЗаключениеДостигнутые результаты
Разработано функциональное веб-приложение для 3D-визуализации 3
беспилотных систем
Подготовлены GLB-модели с покадровой анимацией разборки (≈ 50 МБ
суммарно)
Реализованы: 3 темы оформления, анимированный фон Canvas 2D,
модальное окно
Перспективы развития