Cвой Fusion 360! Как я делал свою САПР за новогодние выходные

Почему-то в последние пару лет я упорно не замечал, что Autodesk ушел из России (шутка), но постоянно обновлял свой любимый Fusion 360 через боль и страдания. Параллельно со мной страдали некоторые мои товарищи, практически все мои обучающиеся, да и много кто ещё. Дополнительной проблемой стал перевод пары учебных аудитории на Ubuntu, а Fusion 360 существует исключительно для Windows, и костыли через wine работают криво. Даже младшие классы пострадали, т.к. разрабатывали у нас модели в Tinkercad. Единственная бюджетная (бесплатная) альтернатива, это FreeCAD, но интерфейс у него не самый дружелюбный, особенно для школьников.

Идея появилась совершенно случайно, за разговором с коллегами. А почему бы на коленке не набросать простенький 3D-редактор для моделирования под 3D-печать. С простым интерфейсом и работой прямо в браузере. Естественно, это будет не полноценная САПР, но для обучения и простенького проектирования функционала должно хватать.

Целился я в нечто среднее между Tinkercad и Fusion360. Одной из задач было обойтись без сервера, т.е. работа на стороне клиента. В качестве основы я выбрал популярную библиотеку 3D графики Three.js.

Первым делом накидал интерфейс и добавление примитивов.

Изначально примитивы были в панели инструментов, но потом мне пришла идея сделать также, как и в Tinkercad — список сбоку с возможностью перетаскивания. Туда же я закинул и встроенные stl-модели. Также добавил импорт stl.

И тут заметил неприятный нюанс. В Three.js ось Y смотрит вверх, тогда как обычно в САПР вверх смотрит ось Z.

Недолго думая повернул мировую систему координат, сетку и ориентацию камеры (спойлер: это оказалось очень тупым решением).

Дальше занялся операциями трансформации. Сделал перемещение, и тут оказалось, что оси перепутаны (кто бы знал :) ).

Потом изменение размера. Но в Three это операция масштабирования (в процентах), мне же нужно было редактирование размеров в мм. С использованием некоторой математики получилось решить этот вопрос). Оси, естественно, тоже были перепутаны.

С поворотом уже известная проблема с осями, и бонусом — перепутанное направление поворота из-за положения камеры.

На самом деле вылезло ещё куча косяков из-за поворота мировых осей, поэтому я решил забить на их правильное направление и вернуть все как было. А чтобы модели смотрели в правильную сторону, просто поворачивать их при импорте и экспорте.

Самое важное в подобном редакторе — это бинарные операции. Без операции объединения и вычитания не обойтись. Для этого используется довольно крутая библиотека three-bvh-csg.

Дальше добавил рабочие плоскости и скетчи. Скетч — это главное преимущество этого редактора. К счастью, Three.js поддерживает 2D геометрию в 3D пространстве. Поэтому режим чертежей у меня работает практически также, как и во Fusion 360.

Также добавил операцию extrude (тут как раз пригодилась библиотека three-bvh-csg, для операций «объединить» и «вырезать»). С этим пришлось повозиться, вытянуть обычную замкнутую фигуру не сложно, а вот если фигуры вложены или пересекаются, уже начинаются проблемы.

Я долго бился над этой задачей, и в итоге нашёл библиотеку clipper.js (которая как раз используется в большинстве CAD).

Все это я накидал за три дня :D (кроме интеграции clipper.js), а на четвертый уже залил на github pages. Постоянно удивляюсь, насколько ИИ позволяет экономить время.

Естественно, все работало криво-косо, с кучей багов, не работала история (а это уже недостатки использования ИИ), но все равно мой ученик смог собрать самую первую модельку, которая до сих пол лежит в библиотеке.

К концу новогодних выходных я гордо объявил, что выпускаю beta-версию :D. Хотя режим чертежей и вытягивание ещё были максимально сырые, но самые неприятные баги я поправил. Логика моя была проста: редактор обеспечивает базовый функционал, ориентировочно близкий к Tinkercad, остальное добавлю позже.

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

Пофиксить большинство багов и доработать этот режим получилось обновлением первого дня. В чертеже появились привязки к особым точкам (центры окружностей, центры и края линий и т.д). Добавил вытягивание фигур из линий (да, до этого можно было вытянуть только из готовой фигуры). Но пока оставались проблемы с объединением нескольких фигур при вытягивании, и определением пересечений. Clipper.js я внедрил позже.

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

Ещё спустя пару недель я в итоге добавил привязки к границам фигур, к 90 и 180 градусам в чертежах, внедрил clipper.js, появилось определение вложенных фигур, пересечений и т.д. (хотя это ещё допиливаю). Кроме операции «extrude» появилась «revolve», 3d текст, вставка изображений и куча других изменений.

Я все ещё активно занят допиливанием этого редактора, а пока небольшой обзор:

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

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

Следующая вкладка — это список объектов. Здесь можно управлять видимостью объектов, удалять их и открывать чертежи на редактирование (это уже подсмотрено у fusion). При двойном клике камера наводится на объект.

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

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

Не буду описывать работу всех инструментов (хотя их пока не очень много), пройдусь по основным:

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

• Пересечение оставляет только общую часть двух моделей (честно говоря не знаю, где её использовать, но пусть будет).

Рабочая плоскость:

Она нужна для операции разрезания и отражения. А также для построения на ней чертежа.
Рабочую плоскость можно построить на любой грани объекта или на 3х базовых плоскостях (XY, XZ, ZY).

Для построения чертежа, как я уже сказал, нужна рабочая плоскость. Он создается просто на выделенной плоскости (возможно логику ещё доработаю).

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

Фигуры пока только самые основные, но большинство задач они закрывают (напомню, это не профессиональная САПР, а простой online-редактор).

Для имеющихся чертежей можно применить операции выдавливания и вращения.

Вращение поддерживает в качестве оси вращения глобальные оси и линии на чертеже.

Операции трансформации (перемещение, поворот, масштабирование) в целом вышли неплохие.

Также есть пара генераторов, симметрия и разрезание.

Редактор доступен online у меня на сайте: https://www.контрбагтех.рф/контрбагcad ^[1] (ссылка именно на сайт, потому что редактор не вечно будет на GitHub pages лежать).
Проект очень молодой, ещё куча мест, куда надо приложить руки. Несмотря на небольшой срок разработки, человеко-часов я в него вложил немало (меня девушка уже из дома хотела выгнать :D).

Как я уже написал, мои обучающие в нем уже работают, и активно тестируют :)
На мой взгляд получилась отличная штука для несложного проектирования под 3D-печать и обучения твердотельному моделированию, этот редактор проще и понятнее, чем fusion, но при этом намного функциональнее чем Tinkercad. А учитывая, что все это работает без установки, прямо в браузере, аналогов я не припомню.

Обратите внимание! Редактор находится на стадии активной разработки, не все функции работают в полной мере. Но ваше тестирование поможет улучшить его работу. Буду благодарен за рекламку, обратную связь, сообщения об ошибках и предложения по развитию :)