Dragon3DGraff_Blog — Страница 2 — Creating 3D Editor

TertiusAxis

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

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

Читать далее

Переделал создание объекта.

При создании объекта при движении мыши меняется размер объекта. Ранее это было решено удалением старого объекта и созданием в этой же точке нового с новым размером.Сейчас меняется геометрия этого объекта. TA_Enteties.js Добавил иконки к кнопкам. Думаю оставить только иконки или все-таки с надписями. Сами изображения иконок надо б переделать, конечно. TA_UI.js TertuisAxis.js

Читать далее

Изменение параметров

Сделал изменение объекта при изменении значений в меню параметров. Для этого переделал механизм создания геометрии. Переданные параметры проверяю, если параметра нет или ему не задано значение, пишу предупреждение в консоль. Функция изменения параметров, на событии поля ввода «onInput». Здесь также применяется функция createGeometry ( entity.geometry.type, params );  Теперь можно добавить создание остальных примитивов, изменение параметров можно привязать к любому объекту.

Читать далее

В выходные было мало времени для кодинга, поэтому успел сделать не много (я моделил лого =) ). Переделал код из предыдущего поста.Во-первых, проверил, что переданные параметры являются объектом: Вместо того, чтобы руками забивать параметры для каждого стандартного объекта, я создаю его геометрию, беру список параметров, создаю новый объект с этими параметрами Для каждого ключа в этом объекте проверяю его наличие в переданном объекте с параметрами, если он есть, присваиваю значение, если нет — выкидываю предупреждение, значение остается undefined. Данная проверка для разработчика, а не для пользователя. В TA_UI добавил проверку, что объект пришел с параметрами …

Читать далее

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

При выделении отображается панель с параметрами. Добавил BoundingBox при выделении объекта. При изменении значения в панели параметров меняется геометрия выделенного объекта. Сделал пока для шара и то криво, просто проверить, что работает. Дело в том, что при изменении параметра в геометрии Object3D, геометрия не перестраивается. Чтобы перестроилась геометрия нужно вызвать new THREE.SphereGeometry. Для куба, соответственно, new THREE.BoxGeometry, и так далее для каждого объекта. Поэтому решено в классе Entity создать метод createGeometry(), в котором в зависимости от типа объекта буду генерировать новую геометрию: Соответственно изменю и функцию создания объектов. Сейчас при создании удаляется старый объект и в этой же точке создается новый, что сказывается на быстродействии. Я же буду менять только geometry с объекте Object3D. Примерно так:

Читать далее