Рубрика: Uncategorized

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+

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+

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

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

1+ При создании объекта появляется панель с отображением его параметров. Реализовал выделение объектов. TODO: сделать объект выделенным после создания, при выделении отображать панель с параметрами, при изменении значения в панели параметров менять геометрию выделенного объекта. 1+

1+ Решение этого вопроса заставило меня вспомнить тригонометрию и векторную алгебру. Постановка задачи: при создании изменять объект вслед за движением мыши. Что мы имеем: координаты курсора в экранных координатах, угол обзора камеры, соотношение сторон.Нужно определить: насколько отличается масштаб вида в мировых координатах в данный момент времени от масштаба экрана, найти расстояние от положения объекта в экранных координатах и умножить его на масштаб вида в текущий момент времени. Чтоб смотреть на камеру со стороны (сверху), я создал третий рендер и поместил его во второй канвас. При нажатии на канвас он увеличивается на весь экран. В последствии сделаю там ортогональную камеру. Первое, что мы сделаем – определим положение объекта в экранных координатах. Для этого спроецируем вектор положения объекта на экран. В three.js предусмотрена функция project(). Клонируем вектор положения объекта, иначе функция изменит положение объекта. Переводим в координаты экрана: На видео первый желтый шарик показывает положение создаваемого объекта. Теперь определим положение камеры в 3D пространстве и запишем его в новый вектор. Для этого также предусмотрена функция: Аналогично определим направление камеры, выраженный единичным вектором: Определим расстояние от камеры до объекта: Теперь из центра из камеры получим точку, отстоящую на расстояние равное расстоянию от камеры до объекта: На видео это второй желтый шарик и зеленая