Найти тему
ΩTrueMagic

Проект "Редактор 3D-графов". Web-версия

Оглавление

Я доделал первую версию редактора, собрал web-версию и выложил на сайт. Теперь любой желающий может им пользоваться. Редактор работает прямо в браузере, а все данные сохраняются в локальном хранилище браузера.

О редакторе

О своем редакторе я уже писал в предыдущей статье. Web-версия редактора теперь доступна по ссылке.

Редактор предназначен для создания графов в трехмерном пространстве.

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

цилиндрическая система координат
цилиндрическая система координат

Функционал

Управление

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

вращение сцены
вращение сцены

Создание вершин

Вершины создаются с помощью кнопки "Create node" в левом верхнем углу.

После выбора позиции вершине можно присвоить следующие свойства:

  • размер
  • цвет
  • текст
вершины разных размеров и цветов
вершины разных размеров и цветов

Создание ребер

Любые две вершины можно соединить ребрами. Для этого нужно выбрать вершину (щелкнуть левой кнопкой мыши) и нажать кнопку "Create edge".

Ребрам можно присвоить следующие свойства:

  • ориентация стрелок
  • тип линии
  • цвет
  • текст
ребра разных типов и ориентаций
ребра разных типов и ориентаций

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

параллельные ребра
параллельные ребра

Отображение текста

Сцена, перегруженная текстом, может усложнить восприятие.

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

отключение отображения текста
отключение отображения текста

Так же включение/выключение текста можно осуществить с помощью комбинации "Alt+W".

Медитативный режим

В с помощью комбинации "Alt+R" можно включить медленное вращение сцены.

молекула метана CH4
молекула метана CH4

Мне нравится, когда оно просто вращается :).

Заключение

Надеюсь мой редактор будет кому-то полезен. Спасибо за внимание.