【问题标题】:How to remove wireframe diagonals?如何去除线框对角线?
【发布时间】:2015-02-04 12:03:52
【问题描述】:

我为 CAD 软件编写了一个自定义导出器,用于将几何数​​据导出到 ThreeJS 编辑器。现在,当然在 ThreeJS 中我写了一个正确的加载器,它正确地加载了所有的几何图形。

只有一个问题;在 ThreeJS 的线框视图中,每个顶点都有三角形。用什么技术可以去除三角剖分和对角线?如何显示没有对角线的线框?

源 3D:

ThreeJS 3D:(见三角形和对角线)

【问题讨论】:

  • 据我所知,您必须创建一个新的着色器。线框显示了沿面的所有线,四边形由 2 个面组成,总是产生一条对角线。老实说,我希望我能帮上忙,但我的 GLSL 充其量是蹩脚的。
  • 我不确定我在看什么,但根据第一张图片,我不希望在第二张图片中出现边缘(带有圆圈的框右上角连接到它旁边矩形的对角)。如果您查看 3D 线框,它看起来是否正确?可能是另一个问题。
  • 如果 ThreeJS 将 n 面转换为三角形(我怀疑它会这样),那么 Kevin 所说的。值得注意的是,如果两个相邻面的法线不相等,您只想绘制一条边(如果您想渲染没有线条的平滑曲面,则将其更改为足够不同。你只需要角度变化很大的边缘)。
  • 你试过THREE.EdgesHelper吗?但是,它还不适用于BufferGeometry

标签: javascript math 3d three.js


【解决方案1】:

看起来您正在将所有点/多边形绘制为单个折线

  • 这是不正确的,您应该将每个多边形作为线循环处理
  • 如果您的网格是三角形或四边形,那么您需要提取周边线

提取周界线

  1. 如果您的网格不是由多边形定义的,那么您需要将所有连接的图元分组为单个多边形
  2. 从列表中的单个多边形中获取所有线
  3. 找到重复的行并将它们全部删除
    • 所以所有使用相同点(以任何顺序)的线都是重复的
    • 连接的图元共享同一条边
    • 所以这对于正确的三角多边形来说已经足够了
  4. 一些三角剖分只能通过线连接,不能通过点连接
    • 对于这些,您需要比较所有剩余的行
    • 取所有平行线(角度相同或相反)
    • 并测试它们是否位于同一行
    • 如果是并且已连接(重叠)
    • 然后剪断线,删除重叠部分

三角测量错误

  • 如果基元重叠而不是连接
  • 然后将单个多边形绘制到已清除的缓冲区中
  • 然后处理所有行
  • 计算每个的中间点
  • 并测试坐标是否填充到缓冲区中
  • 如果是删除线
  • 这不是 100% 防弹
  • 您应该沿每条线测试更多点
  • 如果有的在里面,有的在外面,那么找到交叉点,只剪掉里面的部分
  • 您也可以使用矢量方法进行内部测试,但您必须处理多个重叠

【讨论】:

    猜你喜欢
    • 2014-12-15
    • 2018-06-20
    • 1970-01-01
    • 2010-09-21
    • 2014-12-09
    • 2017-07-15
    • 1970-01-01
    • 1970-01-01
    • 2020-03-13
    相关资源
    最近更新 更多