如何使用 three.js 绘制自定义 3d 表面？

Posted 2023-02-27

【中文标题】如何使用 three.js 绘制自定义 3d 表面？

【英文标题】：How do I draw a custom 3d surface using three.js?

【发布时间】：2014-08-09 06:08:57

【问题描述】：

我使用什么函数/数学来绘制 3d 表面？例如，如何生成 z = sin(x+y)？积分是如何计算和绘制的？我找不到任何示例。

【问题讨论】：

z=sin(x+y) 是隐式方程 f(x,y,z)=0 与 f(x,y,z)=z-sin(x+y)。要绘制一个隐式方程，您需要一个marching cubes algorithm。在我的博客上查看this article。

【参考方案1】：

https://threejs.org/docs/#api/en/geometries/PlaneGeometry

这样的东西包含顶点。如果一个顶点由 [x,y,z] 组成，您可以通过循环遍历所有顶点来应用您的函数。

http://aerotwist.com/tutorials/an-introduction-to-shaders-part-1/

本教程是一个示例，您可以如何使用着色器更快地完成相同的事情

我相信本教程是所有实时 3d 事物的一个很好的起点： http://www.opengl-tutorial.org/beginners-tutorials/tutorial-3-matrices/

【讨论】：

我不明白。如何从一组点生成曲面？

我会说这不是微不足道的。我不确定要给出什么建议。也许看看平面几何是如何构建的可能会有所帮助。我也会看一下 obj 文件，可以对网格的解剖结构有所了解。为什么不先创建一个简单的平面，让它在屏幕上渲染，然后查看它的属性，然后尝试更改顶点。

如果你想要直接的数学并且没有任何建模，另一种方法是查看 shadertoy 或 glsl.heroku，但我认为如果你不理解上面的概念，raymarching可能有点过头了:)

【参考方案2】：

以下示例链接自three.js网站：

http://stemkoski.github.io/Three.js/Graphulus-Function.html http://stemkoski.github.io/Three.js/Graphulus-Surface.html

这两个例子都使用THREE.ParametricGeometry

【讨论】：

我投了这个票，因为它似乎正是作者想要的，但这个 ParametricGeometry 似乎与平面没有什么不同？

在你的函数初始化每个顶点之前它不会创建法线，可能会节省时间和内存。

可能有更快的方法来做到这一点，但我相信用户在问题中要求的是 graphulus 函数。虽然对threejs不熟悉可能需要一段时间去整理code，但是方法还是比较直接的。