Subsurfer 是使用 HTML5 Canvas 控件和 WebGL 用 Ja??vaScript 编写的 3D 建模应用程序。它实现了 Catmull-Clark 细分曲面算法。该程序的一个独特功能是编辑窗口使用自定义 JavaScript 代码在 2D 画布上下文中实现 3D 投影。视图窗口使用 WebGL 的 3D 画布上下文。Subsurfer 是用 Notepad++ 编写并在 Chrome 中调试的，源代码可以从这里下载。
1、介绍
Subsurfer 中的建模基于立方体，每个模型都以立方体开始。顶部的按钮选择当前工具。使用实体工具，你可以右键单击实体并更改其某些属性，例如颜色。使用滑块工具完成模型的平移、缩放和旋转。上下文菜单和颜色选择器在Canvas控件中实现。此 3D 投影和所有模型编辑均在 2D 环境中完成。
复选框控制查看选项。在这里，我们看到选中了清除和轮廓选项的相同模型。
边循环影响曲面细分将如何塑造模型。可以使用 Bevel 命令（Facet 工具）或使用 Split 命令（Edge 工具）添加循环边。可以使用边缘工具的右键单击菜单选项来选择边缘循环。
Subsurfer 中的每个面都是四边形。Catmull-Clark 算法可以很好地处理四边形，并且它们可以更容易地实现可以遍历模型以查找边缘循环和小平面循环的算法。
Subsurfer 有一个编辑窗口（2D 画布上下文）和一个查看窗口（3D 画布上下文）。它们由“编辑”和“查看”复选框控制。在这里，我们在“编辑”窗口中看到了一个模型，在“视图”窗口中看到了它的 WebGL 等效模型。
这是编辑窗口中 spacepig 模型的网格视图。像所有 Subsurfer 模型一样，它最初是一个立方体。
包括各种纹理，包括下面看到的 mod 佩斯利。有一个挤压系列命令可以自动连续挤压刻面，这有助于创造幻觉的洛夫克拉夫特式噩梦。
Save、Open和Delete按钮是使用 AJAX 调用实现和测试的，以将模型存储在服务器上并按名称检索它们。但是，出于本文的目的，我不想在我的服务器上进行任何点击，因此我更改了路径和名称，因此按钮不会做任何事情。你仍然可以使用提供的 AJAX 代码，但你必须实现自己的 SOAP Web 服务并更改客户端代码以匹配。
但是，你仍然可以通过复制 Source 命令中的文本将模型保存在本地文件中，如上所示。如果想将本地保存的模型输入到 Subsurfer 中，请使用输入按钮。这是左侧的命令之一，但未在这些图片中显示。输入命令会弹出一个表单，你只需将网格文本粘贴到字段中，如下所示。即使对于大型模型，这似乎也很有效。你可能会遇到浏览器安全设置的问题，但对我来说效果很好。
由于各种原因，程序中的所有编辑都是在 2D 上下文中完成的，因为我似乎更容易解决与 2D 上下文中的命中检测和用户交互相关的问题。在 2D 上下文中绘图也比在 WebGL 中绘图简单得多。
为了在 2D 中创建 3D 投影，只需要发生一些事情。这是将 3D 点映射到二维的投影代码。为了实现这一点，只需要想象一个位于模型和观察者眼睛之间的沿 Z 轴的 X/Y 平面。然后计算从眼睛到每个 3D 模型顶点的光线与该平面相交的位置。
请注意，上述函数所做的第一件事是将点从其实际位置旋转到当前查看位置。这是为用户提供一种旋转作品并从各个角度查看的方式。这也是一件小事，如下所示。每当用户输入鼠标输入来旋转视图时，变量radiansX、 radiansY和radiansZ都会更新并重新绘制投影。
模型由方面组成。面由边组成，边由点组成。以下是保存模型的基本数据结构。请注意，就本程序而言，立方体仍然是立方体，无论它有多少面。每个模型都以具有 6 个面的立方体开始，但随着挤压、分割和平滑算法的应用，将向立方体添加更多面。
来源：新缸中之脑
声明：本站部分文章及图片转载于互联网，内容版权归原作者所有，如本站任何资料有侵权请您尽早请联系jinwei@zod.com.cn进行处理,非常感谢！