ThreeJS - Wireframe для сетки в объектном формате

Я пытаюсь отобразить каркас объектного файла, загруженного с помощью OBJLoader(). Это часть кода, который я использую:

var loader = new THREE.OBJLoader();

loader.load( filePath, function ( object ) {

        object.traverse( function ( child ) {

        if ( child instanceof THREE.Mesh ){

        var  geometry = child.geometry;

        materialMesh = child.material;

        mesh = new THREE.Mesh(geometry, materialMesh);

        var useWireFrame = true;
          if (useWireFrame) {
              mesh.traverse(function (child) {
                    if (child instanceof THREE.Mesh) 
                      {
                        child.material.wireframe = true;
                        hild.material.color = new THREE.Color( 0xff0000 );
                      }
                });
              }

          }// end if

           scene.add( object );
        });

    });

На следующем рисунке результат, который я хотел бы получить:

введите здесь описание изображения

Однако вот что я получаю с моим кодом:

введите здесь описание изображения

В каждой клетке есть диагонали! Может ли кто-нибудь сказать мне, что я должен изменить, чтобы получить результат, эквивалентный первому изображению?

Благодарю вас!


object three.js mesh loader wireframe
person Sim81    schedule 31.03.2019    source источник
comment
Вам нужно нарисовать четырехугольник вместо треугольника в качестве примитива сетки, чтобы получить его в виде каркаса, который, я думаю, не поддерживается в ThreeJS. Поэтому я думаю, что невозможно получить желаемый результат с помощью каркаса. Вместо этого вы можете попробовать использовать GridHelper на своей сетке, чтобы получить аналогичный эффект.   -  person Rasheduzzaman Sourov    schedule 01.04.2019
comment
Привет, спасибо за ваш ответ, пожалуйста, смотрите мой комментарий ниже.   -  person Sim81    schedule 02.04.2019

Ответы (2)


arrow_upward
1
arrow_downward

Помощник каркаса обычно визуализирует фактическую модель каркаса вашего объекта, определяемую его примитивами. Четырехугольники не являются примитивами в WebGL. Только треугольники, линии и точки (см. спецификацию WebGL). Следовательно, в three.js также нет вспомогательного каркаса, который дает желаемый визуальный результат.

person Mugen87    schedule 01.04.2019
comment
Спасибо за ответ, но на картинках вы видите одни и те же файловые объекты. Один верхний визуализируется блендером, второй - сценой ThreeJS. Так что примитивы - это не треугольники! должен быть способ получить такую ​​же визуализацию. - person Sim81; 02.04.2019
comment
Знаете ли вы, что ваш объект Blender подвергается триангуляции при экспорте? - person Mugen87; 02.04.2019

arrow_upward
0
arrow_downward

Если вы хотите визуализировать каркас заданной геометрии, теперь вы можете использовать этот шаблон:

var geo = new THREE.EdgesGeometry( geometry ); // or WireframeGeometry( geometry )
var mat = new THREE.LineBasicMaterial( { color: 0xffffff, linewidth: 2 } );
var wireframe = new THREE.LineSegments( geo, mat );
scene.add( wireframe );

WireframeGeometry отобразит все ребра. EdgesGeometry будет отображать только жесткие края.

Также см. этот связанный ответ о том, как визуализировать как модель, так и ее каркас.

person Vu Tan    schedule 25.12.2020