如何从 OBJ 模型正确渲染 Three.js 中的四边形线框？
How to Properly Render Quad Wireframe in Three.js from OBJ Model?
我想用 Three.js 渲染 OBJ 网格的实际线框。不幸的是，Three.js 只渲染三角形。因此，我的想法是为模型的每个边缘建立一条线。
我能够通过解析 OBJ 文件并循环遍历其 顶点 和 面 .
来让它工作
右边是带三角形的正常 LineSegments 模型，左边是我尝试渲染的实际线框。
代码：https://codepen.io/flolu/pen/zYrexyr
但是我的方法有些问题
1。性能
添加所有线条后视口滞后。考虑到这个模型不是很大，这尤其糟糕。
2。剪裁
在网格的某些部分，没有渲染线条。可能是因为内层网格渲染了三角形，导致裁剪？！
3。这行得通吗？
由于我没有太多处理 OBJ 文件的经验，我不确定这种方法是否适用于所有网格。而且我更喜欢也可以应用于其他文件格式的实现。
例如，如果您将 182 行从
const model = antler;
到
const model = test;
它将加载另一个模型，但该模型不起作用。一些边缘缺失。
如果有人能改进 CodePen 那就太棒了:)
问题一：
这种方法的性能非常差，因为您在每一帧上独立渲染 4370 行！如此多的绘制调用会降低大多数机器的帧率。我建议您创建一个包含所有必要顶点对的 LineSegments 对象，而不是四千个单独的 Line 对象。这样所有的行都在一次调用中呈现！
问题二：
您可以通过将 material 设置为 depthTest: false 并将 renderOrder 设置为比白色网格更大的数字来避免裁剪，以便它最后渲染，在它之上。
问题三：
我帮不了你，这取决于你的 OBJ 是如何构建的。我应该提一下，单个 post 中的多个问题在 Stack Overflow 中是不受欢迎的，因为它们 reduce the usefulness of the site. In the future, consider breaking it up into individual questions, or you may ask in a more open-ended forum, such as https://discourse.threejs.org
我想用 Three.js 渲染 OBJ 网格的实际线框。不幸的是，Three.js 只渲染三角形。因此，我的想法是为模型的每个边缘建立一条线。
我能够通过解析 OBJ 文件并循环遍历其 顶点 和 面 .
来让它工作右边是带三角形的正常 LineSegments 模型，左边是我尝试渲染的实际线框。
代码：https://codepen.io/flolu/pen/zYrexyr
但是我的方法有些问题
1。性能
添加所有线条后视口滞后。考虑到这个模型不是很大，这尤其糟糕。
2。剪裁
在网格的某些部分，没有渲染线条。可能是因为内层网格渲染了三角形，导致裁剪？！
3。这行得通吗？
由于我没有太多处理 OBJ 文件的经验，我不确定这种方法是否适用于所有网格。而且我更喜欢也可以应用于其他文件格式的实现。
例如，如果您将 182 行从
const model = antler;
到
const model = test;
它将加载另一个模型，但该模型不起作用。一些边缘缺失。
如果有人能改进 CodePen 那就太棒了:)
问题一：
这种方法的性能非常差，因为您在每一帧上独立渲染 4370 行！如此多的绘制调用会降低大多数机器的帧率。我建议您创建一个包含所有必要顶点对的 LineSegments 对象，而不是四千个单独的 Line 对象。这样所有的行都在一次调用中呈现！
问题二：
您可以通过将 material 设置为 depthTest: false 并将 renderOrder 设置为比白色网格更大的数字来避免裁剪，以便它最后渲染，在它之上。
问题三：
我帮不了你，这取决于你的 OBJ 是如何构建的。我应该提一下，单个 post 中的多个问题在 Stack Overflow 中是不受欢迎的，因为它们 reduce the usefulness of the site. In the future, consider breaking it up into individual questions, or you may ask in a more open-ended forum, such as https://discourse.threejs.org