Почему-то в последние пару лет я упорно не замечал, что 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 (ссылка именно на сайт, потому что редактор не вечно будет на GitHub pages лежать).
Проект очень молодой, ещё куча мест, куда надо приложить руки. Несмотря на небольшой срок разработки, человеко-часов я в него вложил немало (меня девушка уже из дома хотела выгнать :D).

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

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

Новости, обзоры продуктов и конкурсы от команды Timeweb.Cloud — в нашем Telegram-канале ↩