Как улучшить слияние, вычисляя новые лица в ThreeJS

Я изучаю ThreeJS в течение 4 месяцев, применяя его в личном проекте. Вчера я добился строительства крепости, используя большинство геометрий ThreeJS и некоторые приемы CSG. Результат выглядит хорошо, но мне нравится точность, а моя геометрия - беспорядок (в основном после вычитаний CSG).

[Вопрос] Интересно, есть ли известный способ объединения двух геометрий и замены его старых граней новыми вычисленными гранями? Есть JSFiddle, чтобы проиллюстрировать мой вопрос.

[Редактировать: Обновил скрипку с четвертой и пятой сеткой]

// FIGURE 1 : Basic merged geometry
var figure1 = new THREE.Geometry();
figure1.merge(box1Geometry);
figure1.merge(box2Geometry);
figure1.merge(box3Geometry);
figure1.computeFaceNormals();
figure1.computeVertexNormals();

var mesh = new THREE.Mesh(figure1, material);
scene.add(mesh);

// FIGURE 2 : Merged geometry with merged vertices
var figure2 = figure1.clone();
figure2.mergeVertices();
figure2.computeFaceNormals();
figure2.computeVertexNormals();

mesh = new THREE.Mesh(figure2, material);

// FIGURE 3 : Expected merged geometry (less faces)
var figure3 = new THREE.Geometry();
figure3`.vertices.push(
    // manually create vertices here
);
figure3.faces.push(
    // manually create the faces here
);
figure3.computeBoundingSphere();
figure3.computeFaceNormals();
figure3.computeVertexNormals();

mesh = new THREE.Mesh(figure3, material);
scene.add(mesh);

Три способа получить ту же сетку

  1. Первая сетка слева - это базовая объединенная геометрия, состоящая из трех boxGeometry.
  2. Вторая сетка в середине точно такая же, после вызова функции mergeVertices(). В результате сохраняется 4 вершины. Но лица внутри сетки все еще там. Это приводит не только к плохому внешнему виду (для меня), но и к проблемам с текстурированием или освещением этих частей (нормальные лица не там, где они должны быть).
  3. Последняя сетка справа - это сетка, которую я ожидал бы после слияния. Посмотрите на лица под средней рамкой, они соответствуют только тому, что должны.

Тот факт, что это приводит к проблемам с текстурой и освещением (посмотрите на JSFiddle, он освещает внутренние части сетки), заставляет меня думать, что это должен быть простой и хорошо известный способ решить эту проблему, но я просто чувствую себя как большой нуб.

Эта проблема напрямую связана с другим вопросом, который я задам, если не найду (или не пойму) никакого ответа на вопрос SO (и, возможно, это поможет вам понять, почему я хочу это сделать): есть ли способ применить текстура этой объединенной геометрии без создания уникального материала для каждой грани каждой геометрии (из-за различий в УФ-картографии и размерах сетки)? Я не могу представить, чтобы сделать это вручную для каждого лица моей огромной крепости...

[EDIT] Написание моего вопроса, я только что понял, что ThreeCSG и его union() функция делает свое дело. Но мне не нравится беспорядок вершин, который он создает. Даже для базовой геометрии, такой как эти блоки, ThreeCSG будет создавать странные вершины и грани на участках геометрии, где все уже было хорошо.

Я обновил JSFiddle с четвертой сеткой (CSG). В этом простом сценарии использования мы видим, что на 2 вершины и на 2 грани больше, чем ожидалось. Кажется, что сохранились старые лица (посмотрите на каркас!).

Является ли ThreeCSG union лучшим вариантом на данный момент?

[РЕДАКТИРОВАТЬ 2] Fiddle обновлен с родной геометрией CSG. Это дает ожидаемый результат только с 20 вершинами и 32 гранями. Спасибо Уилту за эту идею. Проблема в том, что жесткое кодирование полигонов занимает слишком много времени (взгляните на код только для трех блоков). У меня нет файла JSON для загрузки и создания полигонов, у меня есть только геометрия ThreeJS. Поэтому я посмотрю на преобразование геометрий ThreeJS и ThreeCSG и надеюсь понять, почему при преобразовании это дает плохой результат.

0 ответов

Другие вопросы по тегам