Оглавление

Введение..............................................................................................................................................2
Тема работы:...................................................................................................................................2
Актуальность:.................................................................................................................................2
Цель работы:...................................................................................................................................2
Задачи :............................................................................................................................................2
Объект и предмет исследования:..................................................................................................3
Используемое ПО:.........................................................................................................................3
Глава 1 Теоретические основы применяемых web-технологийтехнологий.....................................................4
1.1 Основы three.js.........................................................................................................................4
1.1.1 Вводная часть...................................................................................................................4
1.1.2 Из чего состоят модели....................................................................................................5
1.1.3 Камера...............................................................................................................................5
1.1.4 Материалы........................................................................................................................6
1.1.5 Да будет свет!....................................................................................................................6
1.1.6 Интерактивность и интерфейс........................................................................................7
1.2 Основы html..............................................................................................................................8
1.2.1 Обзор.................................................................................................................................8
1.2.2 Отличительная черта html...............................................................................................8
1.3 Основы JavaScript....................................................................................................................9
1.3.1 Обзор.................................................................................................................................9
1.3.2 Структура и возможности...............................................................................................9
1.4 Booster.....................................................................................................................................11
1.4.1 DOS..................................................................................................................................11
1.4.2 Вводная часть.................................................................................................................12
1.4.3 Общее описание программы.........................................................................................12
1.4.4 Схема...............................................................................................................................13
1.4.5 Компоновка.....................................................................................................................14
1.4.6 Носитель.........................................................................................................................15
1.4.7 Траектория......................................................................................................................16
Глава 2 Концепт интерфейса Booster 2.0........................................................................................17
2.1 Изучай и создавай..................................................................................................................17
2.1.1 Начало.............................................................................................................................17
2.1.2 Первое воссоздание.......................................................................................................17
2.1.3 Вывод после первого воссоздания................................................................................19
2.1.4 Изучение создания интерактивного интерфейса........................................................19
2.1.5 Второе воссоздание........................................................................................................20
2.1.6 Вывод после второго воссоздания................................................................................21
2.2 Создание концепции..............................................................................................................22
2.2.1 Концепция выбора..........................................................................................................22
2.2.2 ООП.................................................................................................................................23
2.2.3 Создание выбора............................................................................................................23
2.2.4 Концепт...........................................................................................................................24
Заключение........................................................................................................................................26
Результаты работы.......................................................................................................................26
Выводы..........................................................................................................................................26
Список литературы...........................................................................................................................27

1
Введение
Тема работы:
Разработка концепта интерфейс для новой версии ПО Booster с
применением современных web-технологий: JavaScript и HTML, а также
библиотеки three.js

Актуальность:
Созданный концепт позволит в последствии начать разработку интерфейса
для новой версии Booster, которая является переосмыслением старой
программы написанной выпускником ЮКК. Booster после переосмысления
станет отличным инструментом для изучения зависимостей построения ракеты
и ее траектории.
Также эта концепция станет отличной основой для разработки других
интерфейсов на базе three.js и не только.

Цель работы:
Разработать концепт интерфейса способный предоставить пользователю
инструментарий для создания модели ракета-носителя (далее по тексту РН,
ракеты) и его последующей настройки. Интерфейс должен быть интуитивно
понятен. Пользователь будет иметь возможность рассчитать траекторию полета
ракеты и запустить модель по этой траектории.

Задачи :
1) Изучить базис html
2) Изучить базис JavaScript
3) Изучить базис three.js
4) Изучить Booster и подчеркнуть самое лучшее в его управлении и
интерфейсе
5) Создать концепцию интерфейса выполняющего цель работы.

2
Объект и предмет исследования:
Предметом исследований стала библиотека на языке JavaScript – three.js
(далее по тексту three.js) для исследований которого потребовалось изучить
базовые понятия html и JavaScript.Практическая составляющая:
Найти и воссоздать необходимые для решения задачи примеры работы с
three.js. Создать начальные наброски интерфейса, чтобы понять возможности
three.js. Создать концепт интерфейса.

Используемое ПО:
1) html
2) javascript
3) Библиотека для javascript three.js

3
Глава 1 Теоретические основы применяемых
web-технологий
1.1 Основы three.js

1.1.1 Вводная часть

Three.js – библиотека для очень
распространенного языка
программирования что используется в
крупных и не очень компаниях. Three.js
предоставляет возможность с помощью
заложенных в себя функций создавать
и выводить на экран трехмерную Иллюстрация 1: Пример примитива
графику с помошью GPU
(графического процессора).
Three.js использует для создания трехмерной WebGL.
WebGL – набор способов взаимодействия между собой двух
программ построенная на основе OpenGL ES 2.0 (подмножество графических
интерфейсов OpenGL предназначенное для мобильных телефонов, консолей и
подобных устройств) и даёт возможность реализации 3D-графики в браузере,
использует элемент из HTML5 (язык предназначенный для создания
сайтов) canvas (предназначенный для создания растрового двухмерного
изображения при помощи скриптов, обычно на языке JavaScript), также
оперирует с DOM (интерфейс позволяющий получать доступ программе к
файлам html xhtml, xml, а так же изменять содержимое, структуру и
оформление таких документов).
Основными средствами создания трехмерного пространства и
последующего вывода его на экран в three.js: полигональная сетка, камера,
материалы и текстуры, источники света.

4
1.1.2 Из чего состоят модели
Three.js использует для расчета и вывода изображения объекты состоящие
из полигональной сетки. Почти вся современная 3D графика использует
полигональную сетку, исключение являются некоторые эффекты не
представляющие собой отдельную модель, а набор частиц. Объект состоящий
из этой полигональной сетки состоит из полигонов (от древен-греческого
«многоугольник). Полигонами являются чаще всего треугольники различных
видов, но также допустимо использование фигур с большим количеством
граней, но это приведет к потере производительности. Если в объекте
используется многоугольник не являющийся треугольником, то большинство
программ для оптимизации процессов преобразует данный многоугольник в
набор треугольников. Количество полигонов в модели определяет угловатость
данной модели, чем больше, тем более гладкой она будет.

1.1.3 Камера
Three.js не смогла бы выводить изображение имей она только возможность
математически рассчитывать модель. Для вывода картинки three.js использует
камеру — мнимый объект определяющий точку в которой находится зритель.
Камера представляет собой точку из которой в определенное
параметризируемое направление выходит равнобедренная пирамида, где
вершиной и является наша камера. Все что находится внутри этой пирамиды
будет отображено на
экране. Пирамида является,
множеством лучей
выпущенных из камеры
вперед под определенным
углом. Каждый луч
соответствует пикселю на
экране и при попадании в
объект приобретает его
цвет. Таким образом
достигается имитация Иллюстрация 2: Пример работы камеры в двумерном
пространстве
человеческого глаза.

5
1.1.4 Материалы
Но просто разноцветные модели — это не так интересно. В любой хорошей
трехмерной графике также должны быть возможность текстурирования
объектов, а three.js относится к таким. Текстура — изображение накладываемое
на модель. С помощью текстур можно получить металлический шар или
кирпичную стену. Текстуры можно накладывать друг на друга, что используется
для создания теней и засветов (так называемые shadow map и light map).
Объединив несколько текстур (иногда с использованием определенных правил)
мы получаем «материал». Материал — своего рода одна большая текстура
применяемая к объекту и объединяющая в себе множество других текстур и
условий их наложения. Так же материалы отвечают за параметры наложения
определенных эффектов. В крупных проектах также используют карты высот
благодаря которым материал становится объемным.

1.1.5 Да будет свет!

Имея модель с текстурами и даже камеру мы не сможем вывести
изображение по которому будет понятно, что это трехмерная графика. Тут на
помощь приходит свет. С его помощью будет возможно придать изображению
глубину резкость. Свет в three.js бывает разных видов: глобальное освещение,
не направленный источник света и направленный источник света. Свет может
быть разного цвета. В данной работе было принято решение использовать
глобальное освещение и не направленный источник света. Освещенность
объекта реализована с помощью вычисления разницы направления (скалярного
произведения) нормали поверхности к
направлению к свету. Данная техника
используется для создания запеченных
карт света и теней, они в последствии
накладываются как текстуры на
модели, но может быть использована и
при динамическом освещении. Иногда
освещение реализуется примерно так
же, но находится скалярное
Иллюстрация 3: Пример композиции с произведение нормали поверхности и
использованием сложных моделей отраженного луча выходящего из

6
камеры. В three.js используется первый вариант. Чем меньше разница
скалярных произведений, тем больше поверхность освещена. Глобальное
освещение работает же просто как осветление всех поверхностей без
необходимости рассчитывать что-либо.

1.1.6 Интерактивность и интерфейс

Three.js позволяет создавать анимированные сцены и, самое главное,
интерактивные объекты, что и было необходимо для решения поставленной
задачи.
Простейшим примером интерактивности
three.js – окошко в котором можно изменять
различные параметры или нажимать на кнопки.
Разработчик может вручную создавать в этом
окошке необходимые кнопки и параметры, а
также может автоматизировать их создание
основываясь на действиях пользователя.
Иллюстрация 4: Окошко с
параметрами и кнопками

7
1.2 Основы html

1.2.1 Обзор
Html - стандартизированный язык разметки веб-страниц во Всемирной
паутине. Код HTML интерпретируется браузерами; полученная в результате
интерпретации страница отображается на экране монитора компьютера или
мобильного устройства.

1.2.2 Отличительная черта html

Основной отличительной чертой работы с html является его структура.
Структура html на первый взгляд ужасно запутана из-за одной маленькой вещи
— теги.
Теги — своего рода скобочки в которых пишется код, а по тегам язык
определяет к какой структуре этот код отнести. Сложность заключается в том,
что у разных тегов разный функционал и синтаксис, а также они должны писать
в строгом порядке, где есть теги вне которых код или даже другие теги не будут
работать корректно или вообще не будут работать. Пример кода с тегами:
<div class=”A”>
<div class=”AB>
<span class="gb" style="display:none"></span>
</div>
</div>

Этого уже достаточно чтобы запутать даже бывалого программиста. Это

единственное, что затрудняет изучение html. В остальном код, что пишется в
тегах схож с кодом того же JavaScript.

8
1.3 Основы JavaScript

1.3.1 Обзор
JavaScript – язык программирования. Поддерживает объектно-
ориентированный (основанный на классах с их функциями), императивный (код
состоит из команд, что вызываются последовательно) и функциональный
(основанный на функциях и их вызове) стили. JavaScript обычно используется
как встраиваемый язык для программного доступа к объектам приложений.
Наиболее широкое применение находит в браузерах как язык сценариев для
придания интерактивности веб-страницам.
На JavaScript оказали влияние многие языки, при разработке была цель
сделать язык похожим на Java. Языком JavaScript не владеет какая-либо
компания или организация, что отличает его от ряда языков программирования,
используемых в веб-разработке

1.3.2 Структура и возможности

Как и было сказано выше, JavaScript поддерживает объектно-
ориентированное програмирование (ООП). Благодаря этому есть возможность
создавать «классы» состоящие из различных параметров и обладающие
определенными функциями. Примером класса может стать куб.
Он обладает большим количеством параметров вроде координат вершин и
то как они между собой соединены. У куба также может присутствовать
функция вызываемая для вывода его на экран.

9
 Иллюстрация 5: Пример кода JavaScript
Структурно код JavaScript представляет из себя набор команд и структур
созданных из них, что последовательно обрабатываются компилятором
(программа, которая переводит текст, написанный на языке программирования,
в набор машинных кодов).

10
1.4 Booster

1.4.1 DOS
Важно разобраться с тем, что такое
DOS, так как Booster написан под него.
DOS – операционная система для
компьютеров, ориентированных на
использование дисковых накопителей,
таких как жёсткий диск и дискета. Любая
DOS поддерживает одну или несколько Иллюстрация 6: MC-DOS
файловых систем для организации
хранения, чтения и записи с накопителей. Современные графические ОС, такие
как Windows или Linux, также попадают под это понятие. DOS не имеет
графики и больше похож на консоль.
Кроме доступа к дискам, DOS предоставляет и обычные системные
функции, такие как ввод и вывод на консоль/клавиатуру, порты, операции с
памятью, процессами.
Самым распространенным в свое время был MS-DOS.
В MS-DOS было всего несколько самых популярных и эффективных
способа программировать: Ассемблера (машинно-ориентированный язык
программирования низкого уровня, то есть язык программирования, близкий к
программированию непосредственно в машинных кодах используемого
реального или виртуального процессора), Microsoft basic (семейство
высокоуровневых языков программирования и его простейшая вариация QBasic
изначально вшита в MS-DOS, а QuickBasic не был вшит, но при этом имел
больший функционал и позволял работать с регистрами) и инструментарий
компании Borland (turbo Pascal, c, c++).

11
1.4.2 Вводная часть
Задачей данной работы было не просто создать песочницу, а переосмыслить
визуальную часть старой программы разработанной в ЮКК одним из
выпускников для дальнейшего использованья в новой версии данной
программы. Booster имеет отличную визуальную часть, учитывая
использование DOSа.

1.4.3 Общее описание программы

Пользователя встречает устаревший по сегодняшним мерками интерфейс.
Комбинация из серого и синего не цепляет деталями, но при этом выглядит на
удивление понятно и не перегружено, пока не перегружено.
DOS не поддерживает мышку, что приводит к увеличению времени адаптации
пользователя, тем более тут нет никаких подсказок или инструкций.
Управление осуществляется стрелочками, Enter, Escape и клавиши с F1 по F8.
На верхней панели
написаны пункты
между которыми может
и должен переключатся
пользователь. Каждый
пункт отвечает за свой
набор функций для
настройки созданной
ракеты.

Иллюстрация 7: Начальный интерфейс Booster

12

Иллюстрация 8: Меню выбора
примитивов
Иллюстрация 9: Окошко настроек
примитива
Иллюстрация 10: Интерфейс после
создания каркаса ракеты
1.4.4 Схема
В самом начале пользователю необходимо
выбрать на верхней панели «Схема» и нажать
Enter чтобы подтвердить выбор.
Схема отвечает за каркас ракеты.
Пользователь волен выбирать примитивы и
из них создавать каркас. На F1 пользователь
открывает меню выбора примитивов. Выбор
не велик, но этого достаточно. Далее
пользователь встречает окошко настройки
данного примитива, в ближайшее время он
будет видеть похожие окошки на постоянной
основе, что достаточно напрягает.
После выбора первого «кирпичика»
пользователь впервые увидит здешние
фигуры. Дальше остается только положить
больше «кирпичиков» и завершить каркас.
Важным для переосмысления будет заметить
возможность вставлять отсеки каркаса не
только сзади и спереди, но и между уже
созданными отсеками.
13

Иллюстрация 11: Меню Функция
Иллюстрация 12: После настройки
функций отсеков
Иллюстрация 13: Меню Корпус (на
примере топливного бака)
Иллюстрация 14: Меню Груз (на
примере топливного бака)
1.4.5 Компоновка
Следующим шагом станет пункт верхнего
меню «Компоновка». Тут есть сразу 3
важных функции. Первой является функция с
ироничным названием «Функция» на F1. С
помощью нее возможно задавать функционал
отсеки корпуса делая ее менее абстрактной. В
местном меню можно выбрать для любой
отсеки функцию из списка: Полезная
нагрузка, Приборный отсек, Переходный
отсек, Топливный отсек, Отсек двигателя.
Двигатели делятся на жидкостной (ЖРД) и
твердотопливный (ТТРД). Переходные отсеки
разделяют ступени.
Следующая функция — «Корпус» (F2).
Она позволяет настроить материал и
толщину обшивки каждого отсек. Материалы
выбираются из заранее заготовленных. Этот
пункт также важен как и предыдущий ведь
определяет массу каждого отсека, что очень
важно.
Заключающая функция данного пункта —
«Груз» (F3). Благодаря ней пользователь
может выбрать для каждого отсека массу его
внутренностей. Также эта функция
необходима для настройки массы топлива и
его типа. Пользователь как и во второй
функции выбирает из заранее созданных пар
окислитель — горючее.
14

Иллюстрация 15: Меню выбора типа
топлива
Иллюстрация 16: Результат анализа
Иллюстрация 17: Настройка в
пункте Носитель 2-й ступени
Последним действием является проверка
правильности настройки ракеты. Функция
«Анализ» (F6) проверяет правильность
построения ракеты и указывает на ошибки,
но ошибки в массах и типах (2 и 3 функции)
он не находит. Если проверка закончена и
ошибок не было найдено, а также были
найдены все ступени, можно преступать к
следующему пункту.
1.4.6 Носитель
Пункт «Носитель» — самый сложный из
всех. Весь функционал этого пункта сводится
к настройке тяговооруженности каждой
ступени (хоть в этом пункте и есть функция
на F1, но она не работает по той или иной
причине). Тяговооруженность необходимо
рассчитывать самому. Тяговооруженность —
отношение тяги к весу, точнее, силы тяги к
силе тяжести. Главной проблемой для
простого обывателя — тяга двигателя
необходимая для расчета тяговооруженности.
Указав тяговооруженность мы можем
преступать к главному — расчет траектории.
15

Иллюстрация 18: Пункт Траектория
Иллюстрация 19: Настройка углов
Иллюстрация 20: Результат
расчета траектории
1.4.7 Траектория
Пункт «Траектория» — последний пункт
в процессе создания и реализации ракеты в
Booster. Первая функция — «Параметры»,
является функцией позволяющей настроить
угл наклона траектории в конце работы
ступеней до последней и угол тангажа (угол
между продольной осью летательного
аппарата или судна и горизонтом) последней
ступени.
Вторая функция — то к чему стремился
пользователь и то ради чего он долго и
мучительно настраивал все это. Функция
«Расчет». Она запускает расчет траектории
полета ракеты и в последствии выводит
графики «Скорость полета», «Высота полета»
и «Углы наклона траектории, тангажа», а
также высоты траектории перигея
(ближайшая к Земле точка околоземной
орбиты небесного тела) и апогея (наиболее
удаленная от центра Земли точка орбиты
небесного тела или проще говоря
противоположность перигея).
16
Глава 2 Концепт интерфейса Booster 2.0
2.1 Изучай и создавай

2.1.1 Начало
Первая проблемой с которой столкнулся автор — не знание three.js. Первый
был не похож своей структурой не на один другой, что привело к
продолжительному изучению структуры и базовых вещей данного языка.
Основным отличием html от известных автору ОО-языков (Объектно
ориентированных) — теги.
Приоритетным было понять как использовать three.js в html. Для работы
three.js в html необходимо было импортировать (ввести) эту библиотеку, но
сразу появилась проблема, нельзя импортировать библиотеку с компьютера,
ведь при запуске сайта даже пользователь, что просто зашел на сайт а не
скачивал его исходник должен быть способен его использовать.
На помощь пришел интернет и форумы, где нашлось неоднозначное, но рабочее
решение — импортировать через ссылку на внешние базы данных или просто
импорт из облака.
Следующей проблемой снова стало незнание структуры html. Three.js
просто не хотел работать, так как весь его код должен был находится в <script>, а
он в <canvas>, а тот в свою очередь в <body>.
Первый запуск сайта с three.js прошел успешно. Пришло время изучения
three.js. Любой здравомыслящий человек начал бы с базиса three.js и по
тихоньку начал бы продвигаться к более сложным задачам параллельно работая
над основной задачей, но автор предпочел не делать так, а использовать метод
обратной инженерии (метод где изучающий разбирает объект на части и после
пытается собрать его обратно в процессе изучая эти части).

2.1.2 Первое воссоздание

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

17
 Three.js является библиотекой JavaScript, автор не особо знаком с javascript,
но он оказался удивительно похож на python, и это не удивительно, так как он
тоже является ОО-языком.
Структурно код этого куба выглядит примерно так:
1) Импорт
import * as THREE from
'https://threejsfundamentals.org/threejs/resources/threejs/r122/build/
three.module.js';

2) Создается canvas, метод render предназначенный для вывода картинки на

экран
function main() {
const canvas = document.querySelector('#c');
const renderer = new THREE.WebGLRenderer({canvas});

3) Камера, ее параметры и местонахождение

const camera = new THREE.PerspectiveCamera(fov, aspect, near);
camera.position.y = 5;
camera.position.z = 8;

4) Создается сцена на которой и будут находится модели (трехмерное

пространство в котором существуют наши модельки)
const scene = new THREE.Scene();

5) Создание материала с цветом для куба

var material = new THREE.MeshBasicMaterial({color: 0x00ff00});

6) Создание математической модели куба из библиотеки three.js

var geometry = new THREE.BoxGeometry(1, 1, 1);

18
 7) Создается куб с необходимыми параметрами (куб создается
и добавляется на сцену)
scene.add(new THREE.Mesh(geometry, material););

8) Создание бесконечного цикла с выводом, где мы также вращаем куб

var render = function () {
requestAnimationFrame( render );

cube.rotation.x += 0.1;
cube.rotation.y += 0.1;

renderer.render(scene, camera);
};

9) Вызов рендера

render();

2.1.3 Вывод после первого воссоздания

В изучении языков программирования таким образом очень важно
проводить аналогии со знакомыми функциями из других языков, а также важно
знание английского языка, ведь не один хороший программист не станет
создавать инструментарий и давать функциям и переменным случайные
названия.
Three.js как и ожидалось просто понять имея под рукой не только
английский и аналогии, но и список функций с официального сайта. Three.js не
усложняет работу с собой, что приводит к простоте работы с ним. Именно так и
должен работать наш интерфейс — нельзя чтобы он мешал пользователю, он на
против должен ему помогать.

2.1.4 Изучение создания интерактивного интерфейса

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

19
 Данный интерфейс создается благодаря модулю библиотеки three.js под
названием GUI (Graphical User Interface).
Также было принято решение добавить модуль OrbitControls необходимый
для реализации передвижения камеры и просто ее более точной настройки.

2.1.5 Второе воссоздание

В этот раз код предназначался для немного другой задачи, но его всегда
можно подогнать под наш вращающийся куб. Дополнением прошлого кода
стали:
1) Новые импорты отвечающие за GUI и OrbitControls
import {OrbitControls} from 'https://threejsfundamentals.org/threejs/resources/threejs/r122/
examples/jsm/controls/OrbitControls.js';
import {GUI} from 'https://threejsfundamentals.org/threejs/../3rdparty/dat.gui.module.js';

2) Создание контролера и задание точки куда будет изначально смотреть

камера
const controls = new OrbitControls(camera, canvas);
controls.enableDamping = true;
controls.target.set(0, 0, 0);
controls.update();

3) Создание GUI
const gui = new GUI();

4) Функция где создается куб и его материала, а также «папка» в GUI где
могут быть изменены цвет и размеры куба с помощью ползунков
function makeInstance(geometry, color, x) {
const material = new THREE.MeshPhongMaterial({color});

const cube = new THREE.Mesh(geometry, material);

scene.add(cube);

cube.position.x = x;

const folder = gui.addFolder(`Cube${x}`);

folder.addColor(new ColorGUIHelper(material, 'color'), 'value')
.name('color')
.onChange(requestRenderIfNotRequested);

20
 folder.add(cube.scale, 'x', .1, 2)
.name('scale x')
.onChange(requestRenderIfNotRequested);
folder.add(cube.scale, 'y', .1, 2)
.name('scale y')
.onChange(requestRenderIfNotRequested);
folder.add(cube.scale, 'z', .1, 2)
.name('scale z')
.onChange(requestRenderIfNotRequested);
folder.open();

return cube;
}

5) Куб создан
makeInstance(geometry, 0x44aa88, 0);

6) Функция запроса переотрисовки кадра вызываемая лишь при изменении

положения камеры или изменении параметров в GUI
function requestRenderIfNotRequested() {
if (!renderRequested) {
renderRequested = true;
requestAnimationFrame(render);
}
}

7) Создание зависимостей отслеживающих те самые изменения и

вызывающие предыдущую функцию
controls.addEventListener('change', requestRenderIfNotRequested);
window.addEventListener('resize', requestRenderIfNotRequested);

2.1.6 Вывод после второго воссоздания

GUI является менее интуитивным со своим построением «папок» с
параметрами. GUI кроме того может создавать кнопки с событиями. К примеру
добавив этот код можно получить кнопку обновляющую положение камеры и
устанавливающую ее в начальное положение.

21
 var options = {
reset: function() {
camera.position.z = 8;
camera.position.x = 0;
camera.position.y = 5;
}
}

{
gui.add(options, 'reset');
}

С такими возможностями можно создать и необходимую для решения

поставленной задачи кнопку создания отсека. Для выбора пользователе формы
отсека не обязательно создавать появляющееся при нажатии на нашу кнопку
меню с формами, можно создать «папку» в GUI и назвать ее к примеру «Add», а
в ней создать подпапки с разными формами в каждой из которых будут
настройки размеров и кнопка «Create», что будет создавать отсек. Но появляется
новая проблема: «Как пользователь выберет куда именно он хочет поставить
этот отсек?». Это можно было бы сделать простым ползунком с выбором каким
номером слева на право должен стать отсек от -1 до последнего + 1 (по
умолчанию последний созданный + 1), но это было бы очень не удобно.

2.2 Создание концепции

2.2.1 Концепция выбора

Решением данной проблемы стал другой вариант реализации выбора места
для установки отсека. Концепт звучит примерно так: «После нажатия на кнопку
Create все отсеки отодвинутся друг от друга, а все грани куда можно установить
данный отсек будут подсвечены и станут зелеными, пользователю же нужно
будет просто нажать на подходящую ему грань, и отсек сам встанет туда где
была эта грань».
Теоретически это можно воссоздать, но для этого нужно заранее
подготовить почву и создать зависимость между каждым отсеком с соседом, так
чтобы их грани (отсеки преимущественно можно представить в виде цилиндра)
были друг в друге. Для этого мы могли бы сначала создать рабочую кнопку
создания отсеков, где они бы сами устанавливались слева, но это было бы

22
слишком легко. Создать систему выбора попытавшись предсказать
всевозможные ошибки сложно, но возможно. Автор решил начать разработку
концепции с системы выбора.

2.2.2 ООП
В самом начале нужно понять сможем ли мы работать отдельно с каждой
гранью куба и если да, то как нам к ним обращаться если мы сразу создавали
кубы. Решением к которому пришел автор стало создания своей функции
создания куба в которой будет возможно отдельно вызывать каждую грань. Это
возможно и просто требует немного расчетов и использование ООП.
Создать класс куба можно как и любой другой обозначив так
class ColorGUIHelper {
constructor(Width, Height, Depth, material) {
this. Width = Width;
this.Height = Height;
this.Depth = Depth;
this.material = material
}
}

Это не оптимально, так как в последствии сложно было бы реализовать весь

тот же функционал из three.js, поэтому логичнее всего будет переписать класс
некоторых геометрических фигур (отсеки) из three.js. Это можно сделать скачав
библиотеку себе на компьютер, изменить код классов в исходных файлах
библиотеки и в последствии залив новую версию библиотеки на облако откуда
уже сама программа и будет брать библиотеку с измененными классами.
В классах каждой геометрической фигуры теперь присутствует функция
обращения к каждой ее грани, а также, как бонус, у класса грань была
прописана функция обращения к ее вершинам.

2.2.3 Создание выбора

Этого достаточно чтобы реализовать функцию выбора и вместе с ней
функцию создания отсеков. Создаем в GUI кнопку создание отсека (с
параметрами этого отсека) и вызов в ней функции выбора. В коде прописываем
создание одного отсека сразу вместе со сценой. После нажатия на кнопку

23
активируется функция выбора, функция проходит по массиву, где сохранены все
созданные на данный момент отсеки и обращается через их встроенные
функции к граням, меняя их цвет и добавляя свечение. Также функция
увеличивает шаг между отсеками (отсеки изменяют шаг относительно самого
левого крайнего из-за чего он остается на месте).
Теперь вызывается функция создания отсека. Она ждет действий от
пользователя. После нажатия пользователя по грани, для определения что это
была за грань, из камеры выпускается луч под углом соответствующему
расстоянию мышки в момент нажатия от центра экрана. Попав в грань луч
вызывает встроенную функцию запоминающую положение вершин этой грани.
Строится отсек по заданным параметрам и грань стыка с выбранной до этого
гранью получает такие же координаты вершин как и выбранная, что приводит к
тому, что отсеки со стороны выглядят как одна фигура.

2.2.4 Концепт
Таким образом полученный пункт «Схема» из Booster становится отправной
точкой. Созданного кода хватит чтобы создать оставшиеся пункты.
Пункт «Компоновка» может быть создан дополнением классов фигур
связанных с отсеками и добавлением в них параметра «функционал» и
связанных с ним. Пользователь примерно так же, как и в выборе будет
обращаться к отсекам и менять их параметры.
Пункт «Носитель» реализовать можно достаточно просто. Определить
количество ступеней и их компоновку можно благодаря переходным отсекам,
всего лишь нужно взять срез массива до переходного отсека (начиная с
двигателя, так как он обязательно будет в самом конце одной из сторон ракеты).
Далее пользователь опять задает параметры с помощью функции выбора.
Пункт «траектория» не будет реализован на данном этапе.

24
 По итогу всего этого должна получиться хорошая основа для последующей
доработки и эксплуатации данной программы.

Иллюстрация 21: Примерный внешний вид интерфейса после всей работы

25
Заключение
Результаты работы
1) Были изучены базbcs JavaScript, html, three.js.
2) Были изучены принципы создания графики, использующиеся в three.js.
3) Был изучен и проанализирован Booster.
4) Создан прототип интерфейса Booster 2 на ранней стадии и концепция
основной части данного интерфейса, что позволит развить прототип до
уровня завершенной программы.

Выводы
1) JavaScript очень схож с другими современными языками
программирование, благодаря этому его просто понять бывалым
программистам.
2) Html имеет очень необычную структуру кода, хоть и используется во всех
сайтах.
3) Booster имеет сложную для освоения последовательность действий, но
при этом имеет простой и приятный интерфейс. Не лишним будет
добавить в новой версии подсказки или что-то вроде обучения.
4) Three.js имеет достаточный инструментарий чтобы создать на его основе
программу с качественным интерфейсом и возможностью пользователя
взаимодействовать с ним.

26
Список литературы
https://habr.com
https://threejs.org

Список иллюстраций
Иллюстрация 1: Пример примитива.................................................................................................4
Иллюстрация 2: Пример работы камеры в двумерном пространстве...........................................5
Иллюстрация 3: Пример композиции с использованием сложных моделей................................6
Иллюстрация 4: Окошко с параметрами и кнопками......................................................................7
Иллюстрация 5: Пример кода JavaScript........................................................................................10
Иллюстрация 6: MC-технологийDOS................................................................................................................11
Иллюстрация 7: Начальный интерфейс Booster............................................................................12
Иллюстрация 8: Меню выбора примитивов..................................................................................13
Иллюстрация 9: Окошко настроек примитива...............................................................................13
Иллюстрация 10: Интерфейс после создания каркаса ракеты.....................................................13
Иллюстрация 11: Меню Функция...................................................................................................14
Иллюстрация 12: После настройки функций отсеков..................................................................14
Иллюстрация 13: Меню Корпус (на примере топливного бака)..................................................14
Иллюстрация 14: Меню Груз (на примере топливного бака).......................................................14
Иллюстрация 15: Меню выбора типа топлива..............................................................................15
Иллюстрация 16: Результат анализа...............................................................................................15
Иллюстрация 17: Настройка в пункте Носитель 2-технологийй ступени......................................................15
Иллюстрация 18: Пункт Траектория...............................................................................................16
Иллюстрация 19: Настройка углов.................................................................................................16
Иллюстрация 20: Результат расчета траектории...........................................................................16
Иллюстрация 21: Примерный внешний вид интерфейса после всей работы............................25

27