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

Non-polygon based 3D-Model in ThreeJS (like in HelloRacer.com)

我目前正在使用 ThreeJs 做一个项目。

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

这样的模型是通过加载一个IGES/STEP到例如Clara.io并导出到threejs-JSON创建的吗?我没有机会自己测试,因为我现在没有 IGES/STEP 模型,但我会让别人创建一个。

如果没有大量的加载时间和缓慢的渲染,我无法使用波前创建如此光滑的表面。

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

您链接的演示中的表面不光滑,它们仍然是多边形的。

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

为了达到光滑表面的效果,我们需要顶点法线的其他值,就像这张图片上的那样:

如果我们将此球体保存为具有这些法线的任何格式并尝试对其进行渲染,则插值法线将在构成该球体的三角形表面上平滑变化。因此,着色计算将产生平滑变化的照明,并且表面将显得光滑。

因此,回顾一下,您尝试渲染的模型需要 "smoothed" 顶点法线才能在屏幕上显示平滑。

更新。从您的屏幕截图来看,您的模型使用折射 material。同样的想法也适用于折射计算,因为它们也基于正常值。