Dragon3DGraff_Blog — Creating 3D Editor

TertiusAxis

Легкая сборка (threejs)

Последние два месяца не было времени заниматься разработкой редактора, так как был приглашен в качестве разработчика компанией «Пермская деревянная игрушка» https://dolodom.com/, которая занимается изготовлением различных изделий из фанеры. Для сборки и визуализации макетов они развивают собственный редактор, созданный на базе стандартного редактора three.js. Сборка макета происходила примерно так, как на этом видео https://www.youtube.com/watch?v=yTAZi-5-EfA. Есть привязка по вершинам сетки, что удобно. Я предложил несколько усовершенствовать процесс сборки и сделать его более простым для пользователя. Вначале я хотел сделать просто выравнивание плоскости шипа по плоскости паза (и реализовал это). Но мы решили, что это тоже не так удобно и решили попробовать сделать инструмент, наиболее приближенный к реальности. А в реальности у нас шип вставляется в паз. То есть нужно определить, что является пазом, а что шипом. С учетом того, что геометрия формируется в Blender на стороне сервера из кривых, импортированных из векторных редакторов, в качестве исходных данных мы имеем мэш с двумя типами материала – лицевая сторона и торец. То есть никакой информации о том, что является шипом или пазом нет, только набор точек и треугольников. Для реализации инструмента мной был написан алгоритм анализа мэша. Во-первых, нужно было упростить модели для расчетов. Для этого все грани торца (лицевая часть отбрасывается, так как

Читать далее

Редактирование сетки: треугольники

Реализовал изменение сетки объекта перемещением грани. Но данное решение очень ресурсоёмкое, Это видно, когда в объекте довольно много треугольников. Причиной этому является то, что я создаю вспомогательный треугольник для каждого треугольника объекта, и при движении треугольника все их удаляю и создаю заново. В качестве решения решил делать вспомогательный треугольник только для того треугольника, который собираюсь двигать. Сейчас для этого реализовал создание такого треугольника при движении мыши. Так будет подсвечиваться треугольник, который можно выбрать

Читать далее

Редактирование сетки: вершины

Сегодня сделал, пожалуй, самый значимый для себя функционал. Мне было очень интересно сделать возможность редактирования сетки объекта. Пока реализовано только перемещение вершин по одной. На реализацию у меня ушло 2 дня, и еще больше на обдумывание и теоретическую подготовку. Редактирование реализовано для BufferGeometry. Сначала в места вершин расставляю маленькие сферы Так как координаты вершин хранятся в буфере, представляющем собой массив значений с шагом 3: [ x1, y1, z1, x2, y2, z2 … xn, yn, zn ], нужно получить координаты точек в виде векторов Но точки повторяются. Например, для куба (8 вершин)  — 24 точки, по 3 точки на вершину (одна точка для одной грани) Получим массив координат вершин: В каждую вершину помещаем сферу Редактирование геометрии я сделал статическим методом. Передаю в него объект, номер вершины, которая изменятся и её положение Теперь нужно сделать обратную процедуру. Находим в каких позициях массива points содержатся координаты вершин Меняем значение положения вершины и меняем массив points Который в свою очередь меняет значения в буфере объекта Изменение происходит  на событие

Читать далее

Выделение нескольких объектов, клонирование

Реализовано выделение нескольких объектов. При этом центр выделения устанавливается в геометрическом центре масс, так называемом барицентре, который определяется следующим образом Барицентр определяется сложением векторов положения точек, входящих с группу и делится на количество точек. Для реализации множественного выделения создана группа в объекте currentselection и добавлена в сцену момент инициализации сцены Для инициализации множественного выделения нужно удерживать нажатой клавишу Ctrl. Сначала проверяем, выделен ли какой-то объект. Если выделен, то добавляем его в группу multiselection. Создаем массив из объектов, входящих в группу multiselection и проверяем, есть выделяемый объект в этой группе. Если нет — то добавляем его в группу, если да — то удаляем его из выделения: Возвращаем все объекты из группы в сцену ,чтобы установить новое положение группы, переместив его в геометрический центр масс. Для этого определяем положение всех объектов выделения Возвращаем все объекты из сцены в группу При этом используем метод .attach, который, в отличие от .add, добавляет объекты в группу с учетом мировых координат. То есть, если у объекта координаты ( 0, 0, 0 ), а у группы ( 10, 10 , 10 ), то .add добавит в точку размещения группы, то есть в ( 10, 10 , 10 ), а .attach оставит объект в точке ( 0, 0,

Читать далее

Saving, Loading and Manipulating.

Доработал функцию сохранения сцены. Файл сцены, созданной в редакторе TertiusAxis, имеет расширение «.trxs». Сейчас это текстовый файл с данными в виде массива с элементами в формате JSON, представляющими собой объекты сцены. Сохраняются только объекты, созданные пользователем. Для этого осуществляется проверка элементов массива children сцены, в которых  userData = true. По этому же принципу сделана очистка сцены в модуле TA_Scene: Сохранение файла вынесено в отдельную функцию Добавлена функция «Merge with scene from disk», которая добавляет в существующую сцену объекты из другой сцены. При загрузке сцены проверяется только расширение файла “.trsx”, но в будущем, когда формат файла изменится, будет проверяться структура файла. Вся сцена может быть экспортирована в GLtf формат Реализовал функциональность кнопок манипуляции объектом: перемещения, вращения, масштабирования и перетаскивания, подключив соответствующие модули библиотеки three.js. Реализовано клонирование объекта нажатием на клавишу “с”, а также выбором соответствующего пункта меню вкладки Edit. При этом геометрия клонов независима, а материал один и тот же, то есть, меняя цвет одного объекта  — меняется цвет у всех. TODO: — Сделать выделение нескольких объектов и манипулирование ими, а так же клонирование всех выделенных объектов. Для этого в объекте currentSelection создать поле multiselect: new Group() и добавлять выделяемые объекты в группу. — реализовать или использовать существующую библиотеку по отслеживанию

Читать далее

Сохранение/Загрузка сцены

Сделал черновик функции сохранения сцены на диск и открытие сцены из файла. Сейчас загружаются только объекты, созданные пользователем. Для этого добавил в объект UserData:this.currentEntity.userData = { createdByUser: true, selectable: true }; TODO: Есть ошибки в консоли и много вопросов нужно проработать, такие как очистка сцены перед загрузкой, загрузка камер и установка позиции камеры, источников света, снятие выделения перед сохранением…

Читать далее

Создание примитивов.

Реализовал создание основных примитивов из библиотеки three.js. Изменил код создания геометрии. Вместо множества switch-case такой код: В настоящий момент изучаю IndexedDB. Созданную сцену необходимо сохранить и экспортировать. В editor three.js (https://threejs.org/editor/) это реализовано, возможно часть реализации возьму оттуда

Читать далее

Рефакторинг.

Добавил цифровое отображение значений компонент цвета. Изменения их взаимосвязаны. Провел большой рефакторинг кода.1. Cделал код модулями.2. Переместил большинство кода из TertiusAxis.js в TA_UI.js.Теперь в нем только функция start() 3. Разбил файл TA_UI.js на несколько модулей и переместил их в папку UI. Формирование каждого раздела меню теперь в отдельной функции в отдельном файле. Теперь функции формирования меню и его заполнения выглядит так: Был обнаружен баг в FireFox c отображением input, он убегал при скроллинге (fixed). Обнаружил, что в Edge input не скроллится и нет стрелочек для изменения значения. Нужно заняться проработкой кроссбраузерности. TODO. Рефакторинг TA_Entities.js, создание функционала всем кнопкам создания примитивов.

Читать далее

Работа над вкладкой Material. Изменение цвета.

Сделал изменение цвета объекта. Цвет можно изменить как выбором из меню Color Picker, так и путем изменения компонент цвета RGB. При этом изменение цвета и там и там связаны. TODO: сделать еще и цифровое отображение значений компонент цвета. Рефакторинг написанного за выходные. #threejs#JavaScript

Читать далее

Работа с меню параметров.

Сделал сворачивающиеся менюшки. Меню параметров разделил на три вкладки: Geometry, Material, General. Во вкладке General реализовал изменение положения, поворота и масштаба объекта, а также его имени. Работаю над вкладкой Material.

Читать далее