Dragon3DGraff_Blog — Creating 3D Editor

TertiusAxis

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

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

Читать далее

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

Сегодня сделал, пожалуй, самый значимый для себя функционал. Мне было очень интересно сделать возможность редактирования сетки объекта. Пока реализовано только перемещение вершин по одной. На реализацию у меня ушло 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.

Читать далее

Работа с интерфейсом

Добавил кнопки создания примитивов из библиотеки threejs, создание которых я планирую реализовать. Для этого я создал массив объектов с описанием моих кнопок, содержащим текст для кнопки, тип создаваемой геометрии для передaчи в TA_Enteties и ссылку на иконку: Через forEach добавляю их все в buttonsDiv: Добавил в меню параметров отображение параметров материала. Сделал Главное меню скрывающимся при нажатии на стрелочку: Реализовал создание круга. При этом столкнулся с проблемой. Threejs выдавал в консоли предупреждение при каждом рендере:three.js:2533 THREE.Matrix3: .getInverse() can’t invert matrix, determinant is 0.Оказалось, что нельзя, чтобы была нулевая величина у объекта (например высота) или scale. В моем случае предупреждение сработало на создании BoundingBox, так как круг — плоский объект и высота равна 0. Пришлось добавить проверку:

Читать далее