ThreeJS Maya像線框實現

Question

我正在嘗試使用此代碼實現顯示四邊形而不是三邊形的線框

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

渲染模型時會產生以下內容

從圖像中可以看到，它沒有顯示所有邊緣，並且仍然顯示一些Tris。 我需要它類似於Maya顯示線框的方式。

我讀過ThreeJS不再支持Face4，這就是為什么它總是顯示tris而不是quads的原因，但是我想知道是否有解決方法？ 我也看到過有人提到使用像素着色器僅顯示網格的邊緣，但是我一直無法理解/獲得這種效果。

我希望在此方面有所幫助，可以使用現有的threejs功能，也可以通過某種方式使用像素着色器。

這是模型源（ http://pastebin.com/21XUKYbw ）

干杯

Answer 1

為將來在此問題上迷路的任何人提供答案。

根據WestLangley的評論，我修改了WireframeGeometry.js中的代碼，以忽略呈現線框時呈現的內部對角線，從而呈現四邊形外觀。 3d藝術家對此更為熟悉。

這是我對WireframeGeometry.js底部所做的更改。 誠然，這是一個非常棘手的修復程序。 替代方法是在threejs執行三角剖分之前計算要顯示的行。 您可以將預三角剖分的面存儲在單獨的緩沖區中。

        // non-indexed BufferGeometry
        position = geometry.attributes.position;

        var _i = 0;
        for ( i = 0, l = ( position.count / 3 ); i < l; i ++ ) {

            for ( j = 0; j < 3; j ++ )
                // three edges per triangle, an edge is represented as (index1, index2)
                // e.g. the first triangle has the following edges: (0,1),(1,2),(2,0)

                // Added a simple check here to only push the vertices that are not diagonal lines
                if(!(j == 2 && _i == 1) || !(j == 1 && _i == 0)){
                    index1 = 3 * i + j;
                    vertex.fromBufferAttribute(position, index1);
                    vertices.push(vertex.x, vertex.y, vertex.z);

                    index2 = 3 * i + ( ( j + 1 ) % 3 );
                    vertex.fromBufferAttribute(position, index2);
                    vertices.push(vertex.x, vertex.y, vertex.z);
                }
            }

            _i++;
            if(_i == 2){
                _i = 0
            }
        }