Dragon3DGraff — Dragon3DGraff_Blog

Автор: Dragon3DGraff

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

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

Читать далее

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

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

Читать далее

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

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

Читать далее

Saving, Loading and Manipulating.

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

Читать далее

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

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

Читать далее

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

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

Читать далее

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

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

Читать далее

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

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

Читать далее

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

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

Читать далее

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

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

Читать далее