Javascript 在three.js中创建具有厚度和阴影的线条以可视化3D打印层

我一直在试图找到一种方法，使用Three.js为可以接收阴影并看起来像实体对象的线条添加厚度，但到目前为止，我获得的最佳效果是线条更厚，看起来不像3D几何体

该应用程序用于在线3D打印平台，因此我尝试可视化由线条组成的切片几何体，类似于其他切片软件（如cura）处理此问题的方式，如下图所示

从这些线生成网格几何体很可能会有问题，因为在某些情况下，单个模型中有数千条线，因此会太重

---

任何关于如何在three.js或其他javascript库中实现所需结果的建议都将不胜感激

因此，我们的想法是渲染覆盖粗线区域的基本体，并在片段中确定片段是在粗线的内部还是外部，计算3D位置和法线，然后渲染或

放弃如果没有

其想法是将用于渲染的多段线几何体传递给OpenGL，该几何体将只生成细线，并使用着色器完成其余工作

顶点着色器

只需将内容传递到几何体着色器


几何体着色器

将接收2个顶点（直线）并输出2个三角形（四边形），覆盖线BBOX（线的一半厚度放大的线）。这是相对容易的。只需通过垂直向量将线端点移动到大小等于一半厚度的线。这必须在与摄像机屏幕平面平行的平面上进行（使用从直接摄像机矩阵中提取的基向量）。不要忘记传递世界坐标和相机坐标中的两个顶点


片段着色器

简单地从世界坐标测试点是否在粗线内：


因此，只需计算
p'
，并计算
p，p'
之间的距离。这就是点和线之间的垂直距离。其可行的开发点产品IIRC：

 t = dot(P-P0,P1-P0)
 P' = P0 + t*(P1-P0)
 d = |P'-P0|

由此，您只需计算3D坐标（碎片的深度）、法线，并使用一些平行光进行渲染或
放弃


因此，我们的想法是渲染覆盖粗线区域的基本体，并在片段中确定片段是在粗线的内部还是外部，计算3D位置和法线，然后渲染或
放弃如果没有

其想法是将用于渲染的多段线几何体传递给OpenGL，该几何体将只生成细线，并使用着色器完成其余工作

顶点着色器

只需将内容传递到几何体着色器


几何体着色器

将接收2个顶点（直线）并输出2个三角形（四边形），覆盖线BBOX（线的一半厚度放大的线）。这是相对容易的。只需通过垂直向量将线端点移动到大小等于一半厚度的线。这必须在与摄像机屏幕平面平行的平面上进行（使用从直接摄像机矩阵中提取的基向量）。不要忘记传递世界坐标和相机坐标中的两个顶点


片段着色器

简单地从世界坐标测试点是否在粗线内：


因此，只需计算
p'
，并计算
p，p'
之间的距离。这就是点和线之间的垂直距离。其可行的开发点产品IIRC：

 t = dot(P-P0,P1-P0)
 P' = P0 + t*(P1-P0)
 d = |P'-P0|

由此，您只需计算3D坐标（碎片的深度）、法线，并使用一些平行光进行渲染或
放弃


值得一提的是，您共享的图像看起来像是使用了完全着色的几何体，而不是线条
Cura
是一个桌面应用程序，在这个领域，内存通常不太重要，所以你在比较苹果和橙子。如果您可以修改以在直线路径上创建较少的节点，您可能会发现它非常适合该作业。。。这只是一个使光线和通过表面正常的问题。但是，您可以创建非常慢的。相反，您可以渲染简单的多段线，在几何体着色器中转换为BBOX，并在基于距离的片段中渲染粗线。这与我尝试使用管状几何体时非常相似（但要容易得多），但在大多数情况下，它确实太重了，即使是顶点数量减少的简化多段线。目前，我使用的线几何体的厚度像这个例子，但它不是理想的。我不太清楚你建议的方法。你能解释一下这些步骤吗？谢谢值得一提的是，您共享的图像看起来像是使用了完全着色的几何体，而不是线条
Cura
是一个桌面应用程序，在这个领域，内存通常不太重要，所以你在比较苹果和橙子。如果您可以修改以在直线路径上创建较少的节点，您可能会发现它非常适合该作业。。。这只是一个使光线和通过表面正常的问题。但是，您可以创建非常慢的。相反，您可以渲染简单的多段线，在几何体着色器中转换为BBOX，并在基于距离的片段中渲染粗线。这与我尝试使用管状几何体时非常相似（但要容易得多），但在大多数情况下，它确实太重了，即使是顶点数量减少的简化多段线。目前，我使用的线几何体的厚度像这个例子，但它不是理想的。我不太清楚你建议的方法。你能解释一下这些步骤吗？谢谢