JavaScript实战3D建模软件开发 _3D建模

Subsurfer 是使用 html5 Canvas 控件和 WebGL 用 Ja?vaScript 编写的 3D 建模应用程序。它实现了 Catmull-Clark 细分曲面算法。该程序的一个独特功能是编辑窗口使用自定义 JAVAScript 代码在 2D 画布上下文中实现 3D 投影。视图窗口使用 WebGL 的 3D 画布上下文。Subsurfer 是用 Notepad++ 编写并在 Chrome 中调试的，源代码可以从这里下载。
1、介绍Subsurfer 中的建模基于立方体，每个模型都以立方体开始。顶部的按钮选择当前工具。使用实体工具，你可以右键单击实体并更改其某些属性，例如颜色。使用滑块工具完成模型的平移、缩放和旋转。上下文菜单和颜色选择器在Canvas控件中实现。此 3D 投影和所有模型编辑均在 2D 环境中完成。

文章插图

模型是通过将连续的细分曲面应用于实体，结合挤出和切面的分裂来开发的。该界面是按键命令和使用实体、小平面、边和顶点工具的右键单击菜单的组合。在这里，我们看到了立方体表面细分的连续应用。

文章插图

复选框控制查看选项。在这里，我们看到选中了清除和轮廓选项的相同模型。

文章插图

在这里，我们看到一个被挤压的刻面。挤压是一个右键菜单项和一个击键命令。使用 Facet 工具选择 Facet 。你可以单击一个构面，单击并滚动以选择多个构面，或拖动一个框以净选构面。
挤出刻面时的一件重要事情是避免有共同的内壁。当挤压法线指向同一方向的多个相邻面时，可能会发生这种情况。共享内墙会混淆 Catmull-Clark 算法，结果看起来不正确。为避免这种情况，在拉伸相邻面时，除非它们的法线朝向不同的方向，否则最好使用“挤出组”命令。

文章插图

边循环影响曲面细分将如何塑造模型。可以使用 Bevel 命令（Facet 工具）或使用 Split 命令（Edge 工具）添加循环边。可以使用边缘工具的右键单击菜单选项来选择边缘循环。
Subsurfer 中的每个面都是四边形。Catmull-Clark 算法可以很好地处理四边形，并且它们可以更容易地实现可以遍历模型以查找边缘循环和小平面循环的算法。