如何从 OBJ 模型中正确渲染 Three.js 中的四线框？

Question

我想用 Three.js 渲染 OBJ 网格的实际线框。不幸的是，Three.js 只渲染三角形。因此我的想法是为模型的每个边缘建立一条线。

我能够通过解析 OBJ 文件并遍历其 vertices 和 faces 来使其工作。

---

右侧是带有三角形的普通LineSegments 模型，左侧是我尝试渲染实际的线框。

代码：https://codepen.io/flolu/pen/zYrexyr

但是我的方法有一些问题

1。性能

添加所有线条后视口滞后。考虑到这个模型并不是很大，这尤其糟糕。

2。剪辑

在网格的某些部分，没有渲染线条。可能是因为内部网格是用三角形渲染的，导致裁剪？！

3。这行得通吗？

由于我没有太多使用 OBJ 文件的经验，我不确定这种方法是否适用于所有网格。而且我更喜欢一个也可以应用于其他文件格式的实现。

例如，如果您将行 182 从

const model = antler;

到

const model = test;

它将加载另一个不起作用的模型。缺少一些边缘。

---

如果有人能改进 CodePen 那就太棒了:)

Answer 1

问题 1：

这种方法的性能很差，因为您在每一帧上独立渲染4370 行！这么多的drawcall会降低大多数机器的帧率。我建议您使用所有必要的顶点对创建一个 LineSegments 对象，而不是创建四千个单独的 Line 对象。这样，所有行都在一次调用中呈现！

问题 2：

您可以通过将材质设置为depthTest: false 并将renderOrder 设置为比白色网格更高的数字来避免剪裁，以便它最后渲染，在它之上。

问题 3：

我在这里帮不了你，这取决于你的 OBJ 是如何构建的。我应该提一下，一个帖子中的多个问题在 Stack Overflow 中是不受欢迎的，因为它们 reduce the usefulness of the site。以后可以考虑将其分解成单独的问题，或者您可以在更开放的论坛中提问，例如https://discourse.threejs.org