Что из себя представляет проект?

Отчет по проекту

Данный проект предназначен для измерения скорости движения метеорита во время падения его на планету Земля.

Скриншоты проекта

Структура проекта

Страница проекта представляет собой 3 основных блока:

• Блок моделирования;
• Блок настроек метеорита;
• Блок информации о падении метеорита.

Блок моделирования

Здесь происходит отрисовка метеорита, планеты и дополнительных эффектов - все, что нужно для визуального восприятия падения метеорита.

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

Про интерактивные контроллеры

Интерактивные контроллеры - это способ задать настройки приложения, используя вместо полей ввода данных клавиатуру или мышь/тачпад. Настройки, которые можно изменить при помощи интерактивного контроллера помечены🖱️иконкой. Чтобы узнать как воспользоваться интерактивным контроллером, достаточно навести курсор мыши на такую иконку, и вам покажется необходимая инструкция.

Интерактивные контроллеры тоже можно настраивать. Это можно сделать в секции, помеченной той же🖱️иконкой. Таким образом вы сможете регулировать чувствительность контроллеров - значение, на которое они будут менять определенную настройку приложения.

Блок настроек

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

В качестве интерфейса для изменения параметров предоставляется связанные между собой поле ввода и слайдер.

Блок информации о падении метеорита

Блок содержит настройки положения камеры, различные графики, информацию о падении метеорита, таймер и кнопки управления процессом моделирования (остановить/запустить или сбросить процесс).

Как запустить проект?

Данный проект доступен всем по ссылке https://vadimshahray.github.io/meteorite-movement-in-earth-atmosphere/. Если вы хотите клонировать данный репозиторий и запустить проект на локальной машине, на ней должна быть установлена Node.js.

После успешного клонирования репозитория, откройте корневую папку проекта в терминале и введите следующие команды:

npm install
npm start

или с помощью yarn:

yarn install
yarn start

Физика проекта

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

Программирование проекта

Проект написан на языке TypeScript, в качестве основных инструментов были выбраны библиотеки React (интерфейс), Redux Toolkit (менеджер состояний) в связке с React Redux (интеграция Redux в React) и React Three Fiber (3D).

Дополнительные используемые технологии:

• @mui/material и @mui/icons-material - пакет готовых элементов интерфейса, стилизация и иконки;
• @react-three/drei и lamina - готовые решения для 3D;
• camera-controls - контроллеры камеры 3D сцены;
• notistack - элемент интерфейса Snackbar;
• recharts - графики;
• redux-persist - локальное сохранение состояния проекта;
• yup - валидация данных.

Файловая структура проекта

├───public - статичные данные
│   ├───docs - документация проекта
│   └───models - 3d модели
└───src - рабочий корень проекта
    ├───components - UI/UX компоненты
    ├───constants - константы
    ├───hooks - React-хуки
    ├───layouts - блоки страницы
    ├───models - 3D-компоненты
    ├───pages - web-страницы проекта
    ├───providers - провайдеры данных
    ├───selectors - Redux-селекторы
    ├───slices - Redux-слайсы
    ├───styles - стилизация
    ├───types - типы
    └───utils - различный полезный функционал