three.js 隐藏边缘以虚线呈现的仅线框形状

Question

我正在尝试在three.js中创建特定类型的3D对象。 例如，我想要一个线框模式下的立方体（只显示边缘）。 但是我希望背后的边缘是虚线。 示例: 我不知道这是否可行于three.js，或者我应该直接尝试使用webgl。 我应该在wireframe中使用THREE.Mesh还是使用LineDashedMaterial的THREE.Line，或者两者都叠加在一起？

- calude

Answer 1

我已经完成了。 您需要创建三个对象。

第一个对象：实心的3D对象（我指的是面而不是边缘）。

第二个对象：所有边缘，但是虚线。

第三个对象：所有边缘，但不是虚线。

对于第一个对象，请使用color: false, side: THREE.DoubleSide, depthTest: true设置材质。

第二个对象材料：color:(无论您喜欢什么), depthTest:false。

第三个对象材料：color:(无论您喜欢什么), depthTest:true。

我还将所有材料都设置为polygonOffset: true, polygonOffsetFactor: 1, polygonOffsetUnits: 1以消除z-fighting。

- calude

Answer 2

这是一个非常棒的想法。我已按照上述说明将你的答案实施在以下网址中：http://stemkoski.github.com/Three.js/Dashed-3D.html，如有需要可以前往查看效果。

- Stemkoski

---

看起来这个不再起作用了。如果我理解正确，“visible”（可见）的边缘应该是唯一显示的（作为实线），而如果立方体的材料被显示，那么被覆盖的边缘应该显示为虚线。是这样吗？在你的例子中，我看到一个实心立方体，有虚线和实线；然而，我只能看到前面的表面，因为这些面是实心的。three.js 是否有什么变化？或者这个渲染是预期的？鉴于 OP 的问题，我推测这个例子不再起作用了。 - dylnmc

此外，在查看了您的一些演示之后，我还注意到细分表面修改器示例有些奇怪。从截图来看，我猜想这些曾经是有效的。可能是因为 three.js 发生了什么变化？ - dylnmc

链接已损坏。 - Second Person Shooter