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

Question

我需要使用哪些函数/数学知识来绘制3d表面呢？比如，我该如何生成 z = sin(x+y)？这些点是如何计算和绘制的？我找不到相关示例。

- user3699912

---

z=sin(x+y)是隐式方程f(x,y,z)=0，其中f(x,y,z)=z-sin(x+y)。要绘制隐式方程，您需要使用marching cubes算法。请参阅我博客上的这篇文章。 - Stéphane Laurent

Answer 1

以下示例链接来自于three.js官网：

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

这两个示例都使用了THREE.ParametricGeometry。

- makc

---

我投票支持这个，因为它似乎正是作者想要的，但是这个 ParametricGeometry 看起来和平面没有什么区别？ - pailhead

它直到您的函数初始化每个顶点之前才创建法线，这可能节省时间和内存。 - makc

可能有更快的方法来完成这个任务，但我认为用户在问题中所要求的是graphulus函数。虽然如果你不熟悉threejs，去整理这段code可能需要一些时间，但这种方法相当直接简单。 - Joshua Foxworth

Answer 2

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/

- pailhead

---

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

我认为这并不是一件简单的事情。但我不确定该给什么建议。也许看看平面几何如何构建会有所帮助。我也会看一下obj文件，这可以让你了解网格的结构。为什么不先创建一个简单的平面，在屏幕上呈现它，然后查看它的属性，并尝试更改顶点呢？ - pailhead

如果你只想进行纯数学计算，而不涉及任何建模工作，那么另一种选择是使用shadertoy或glsl.heroku。但是我猜想，如果你还没有理解上面的概念，光线行进可能会有点难以理解 :) - pailhead