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 );

当模型被渲染时，会产生以下效果：

从图中可以看出，它没有显示所有的边缘，并且仍然显示一些三角形。我需要它与 Maya 显示线框的方式类似。

我已经了解到 ThreeJS 不再支持 Face4，这就是为什么它总是显示三角形而不是四边形，但我想知道是否有办法绕过这个问题？我也看到有人提到使用像素着色器来仅显示网格的边缘，但我还无法理解/实现它。

我希望在这方面得到一些帮助，无论是使用现有的 ThreeJS 功能，还是通过某种方式使用像素着色器。

这是模型源代码（http://pastebin.com/21XUKYbw）

谢谢！

- Nexidian

---

EdgesGeometry 无法渲染共面边缘。三角形很可能不是共面的。 - WestLangley

@WestLangley 谢谢您的回复。我刚刚在 Github 的问题中读到了 mrdoobs 的回复。这是否意味着无法使用 Three.js 实现我想要的功能？如果必须转向其他工具，那将是一件遗憾的事情。 - Nexidian

抱歉，我不知道您想要什么，也没有尝试过您的模型，因此无法回答您的问题。 - WestLangley

@WestLangley 抱歉，我以为我的帖子已经涵盖了这个问题。我想要展示一个包含四边形信息的线框图，而不是三角形。我将模型导出为四边形网格，所以信息是存在的。我的问题是/曾经是在threejs中是否有可能实现这一点，如果不行，那么在着色器中能否实现？ - Nexidian

我能建议的是你学习 WireframeGeometry.js 和 EdgesGeometry.js，并想出一种方法来消除“对角线”边缘。 - WestLangley

@WestLangley 谢谢您的评论 :) 我最终设法解决了这个问题。这是一个可怕的黑客，但我希望将其作为可选选项。我注意到有相当多的人想要这个功能。 - Nexidian

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
            }
        }

- Nexidian