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

TertiusAxis

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

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

Читать далее

Выделение объектов

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

Читать далее

Изменение объекта вслед за движением мыши

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

Читать далее

Создание куба

Создание куба указанием мыши. Точка, в которой создаётся примитив, является пересечением курсора и одной из плоскостей, проходящих по осям координат. Пересечение определяется Raycaster. Изменение размера примитива осуществляется изменением размера на 0.1 при движении мыши. TODO: сделать так, чтобы примитив растягивался за указателем мыши.

Читать далее

Отображение координат

Чтобы лучше ориентироваться в пространстве я решил добавить координаты в точке, которая является проекцией курсора из камеры на координатные плоскости. Реализовано с помощью Raycaster. По осям добавлены невидимые плоскости, пересечение с которыми фиксируется. Из точки пересечения нарисовал пунктирные линии и повесил label с указанием координат. Для label запустил второй рендер CSS2DRenderer. Он рендерится поверх канваса, поэтому теперь события нужно отлавливать на нем, а не на канвасе, например

Читать далее

Создание простой сцены

Итак, начнем. Подключил библиотеку three.js, создал пустую сцену, добавил OrbitControls для вращения камеры, добавил сетку из хелперов библиотеки.Набросал примерно интерфейс как я его себе представлял. По плану левая панель будет иметь возможность прятаться.Добавил стандартные функции создания примитивов куба и шара. Создаются при нажатии на соответствующие кнопки в центре координат (что меня не устраивает). TODO: сделать так, чтобы создание примитива осуществлялось в указанной точке. Для начала привязка подразумевается к главным плоскостям координатной сетки.

Читать далее

Вступление

В этом блоге я буду выкладывать процесс создания 3d-редактора/игрового движка для браузера с использованием библиотеки three.js. Цель проекта — изучение программирования на языке JavaScript, приобретение необходимых навыков, отработка применения сопутствующих инструментов.Исходный код: https://github.com/Dragon3DGraff/TertiusAxisРедактор: https://dragon3dgraff.ru/TertiusAxis/

Читать далее