ThreeJS Maya喜欢线框实现

Question

我正在尝试使用此代码实现显示四边形而不是tris的线框

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而不是四边形，但我想知道是否有办法解决这个问题？我也看到过一些提到使用像素着色器只显示网格的边缘，但我已经能够理解/得到它的工作。

我很乐意在这个方面提供一些帮助，无论是使用现有的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
            }
        }