ThreeJS中基于非多边形的3D模型（如HelloRacer.com）

Question

我目前正在使用ThreeJs开展项目。

现在我使用wavefront-obj来表示我的3D模型，但我想使用-IGES或-STEP之类的东西。 ThreeJS不支持这些格式，但我看到了http://helloracer.com/webgl/，对我来说，由于加载时间短，看起来这个模型不是基于多边形，正如您可以通过光滑表面看到的那样。该模型似乎是.js所以它是ThreeJS-JSON格式？

是否通过将IGES / STEP加载到例如Clara.io并将其导出为threejs-JSON来创建这样的模型？我没有机会亲自测试它，因为我现在没有IGES / STEP模型，但我会让某人创建一个。

使用wavefront，我无法在不增加大量加载时间和缓慢渲染的情况下创建这样光滑的表面。

如您所见，表面和闪电不像发布的示例那样平滑。

Answer 1

您链接的演示中的曲面不平滑，它们仍然是多边形。

我认为平滑的阴影是你正在寻找的。问题是，通常模型根据其法线进行着色。因此，我们设置为模型顶点的法线对于我们在屏幕上获得的内容至关重要。根据您的描述，您的模型中的每个三角形都有单独的法线。就像在这张图片上一样，每个三角形的每个顶点都与三角形本身具有相同的法线。因此，当我们在三角形上插入这个法线时，我们为三角形的每个点得到相同的值。着色计算会产生均匀照明，并且三角形在渲染图像上显得平坦。

为了达到平滑表面的效果，我们需要顶点法线的其他值，如此图像上的值：

如果我们将此球体保存为具有这些法线的任何格式并尝试渲染它，则插值法线将在包含球体的三角形表面上平滑地变化。因此，阴影计算产生平滑变化的照明，并且表面看起来光滑。

因此，回顾一下，您尝试渲染的模型需要“平滑”＃34;顶点法线在屏幕上显得平滑。

UPD。根据截图判断，您的模型使用折射材料。同样的想法适用于折射计算，因为它们也基于正常值。