Three.js 使用自定义着色器渲染“硬”边

我想重现通过使用THREE.edgeHelper在硬对象边缘绘制边界创建的效果，但使用自定义着色器，而不是添加单独的THREE.Line对象。基本上，我想做在中所做的事情，但仅限于硬边界；e、 g.不在两个共面之间的边界

方法：对EdgeHelper应用类似的例程，但使用自定义属性（例如iEdge）标记硬边中的顶点；可能需要使用BufferGeometry，因为常规几何允许在多个面中重复使用顶点，但BufferGeometry复制顶点，使得每个顶点至少是一个面的一部分，这是我的理解；文档并不明确

迄今取得的进展：

复制线框材质示例中的效果，但使用缓冲几何体： 将EdgeHelper的逻辑移植到BufferEdgeHelper函数，该函数与BufferGeometry一起工作，但仍使用它创建三行。行： 尝试调整BufferedgeHelper以将其结果保存在自定义属性iEdge中，然后在决定是否渲染边缘时在自定义着色器中读取该属性： 前两个小提琴按预期工作，显示1着色器渲染的白色线框边，然后显示2着色器的白色边加上线的红色硬边。但是，3给出的结果与2相同，而不是使用isEdge属性来决定是否绘制直线；我不明白这是为什么

知道如何修复此问题，以便着色器仅渲染硬边（例如，红线和白线重叠）吗

---

谢谢

首先，边缘修剪算法需要稍微调整一下。您需要保存两个面的顶点，而不仅仅是第一个面，因为需要更改与边关联的两个三角形，以便使用重心坐标正确渲染

第二，我认为这不需要一个新的isEdge变量，只要改变中心就可以实现

重心坐标的正常设置是三个顶点为1,0,0,0,1,0,0,0,1。但是，如果不想在顶点0和1之间绘制边，可以将其更改为1,0,1,0,1,0,0,1，这样无论距离顶点2多远，vCenter.z始终为1。然后，我们可以从中心填充所有禁用的边开始，并在看到哪些边应该保留时逐个启用边

考虑到这一点，我对你的代码做了一些修改。我去掉了边缘物体，只留下重心的东西：

---

我发现计算法线的调用应该在转换到BufferGeometry之后完成。调用.fromGeometry确实会复制顶点，但如果您正在处理的对象具有共享顶点，则必须重新计算法线。

您是如何处理的？嘿，JSFIDLE似乎已损坏：