在Three.js中生成带有折角角度的顶点法线以实现平滑着色

5

我在Three.js的JSON模型格式中有几个对象。它指定了顶点位置和面,有时是三角形,有时是四边形,有时有材质索引,有时没有。

然而,这些文件都没有指定顶点法线。

我想要一个算法,可以在一组网格面上计算出这些法线。我希望能够指定一个角度限制,超过这个限制就会显示折痕(法线不被相邻面共享)。

在自己编写代码之前,我想知道这个功能是否已经存在于Three.js或其他可用的地方。


你最终编写了折痕角度算法吗?这是你愿意分享的东西吗? - gaitat
@gaitat,是的,我已经打算将它作为一个pull-request提交给Three.js了。但是我想制作一个漂亮的演示来展示它可能如何使用以及为什么它很有用。如果你想测试一下,我可以与你分享。你的个人资料上没有电子邮件地址。 - Drew Noakes
gaitat at yahoo dot com。非常感谢。 - gaitat
市民要求演示! - meetar
1个回答

5
唯一可用的东西是:
geometry.computeFaceNormals();
geometry.computeVertexNormals();

请查看算法源代码。
three.js r.55

谢谢这个。看起来是一个不错的开始。但是生成的对象在网格中失去了一些边缘。我会尝试修改computeVertexNormals()的实现,以达到我想要的效果。 - Drew Noakes
同时,将true作为参数传递给computeVertexNormals(表示将面积视为法线的权重)可以使其看起来不那么奇怪,但仍然缺少锐利的边缘,这对于至少这个网格来说是一个问题。 - Drew Noakes
是的,这个算法确实会失去一些锐利的边缘。 - WestLangley
2
我真的在寻找一种方法,可以控制折痕角度以保持锐利的边缘。我已经编写了这样的解决方案,并在稍微整理后,在此回答中提供。我还将查看它是否可以整洁地适用于Three.js库本身,并提交一个拉取请求。 - Drew Noakes
嘿,我也遇到了同样的问题,并得出了相同的结论 :) 我在计算顶点法线时卡住了;加权计算对我来说也不起作用,正如Drew所提到的原因一样:这是一个低多边形网格,平滑组对于锐利边缘至关重要。 Drew,你能分享一下你的解决方案吗?或者只是指点我正确的方向。谢谢 - nicoptere
经过一些休息,我意识到问题来自于3DSMax中的导入/导出;两者都翻转了ZY坐标...话虽如此,我非常好奇你是如何执行“拓扑感知”平滑的 :) - nicoptere

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接