当使用ThreeJS库在浏览器中显示时，第一个示例通常是多维数据集或其他一些基本对象，并使用预定义的特殊BoxGeometry或SphereGeometry类创建 。 然后通常考虑使用导入的现成模型并与之一起使用。
但是有时您需要创建一个三维对象以完全从头开始在浏览器中显示-仅使用解析几何。 本文讨论了一种构建交互式可定制模型及其在浏览器中的后续显示的方法。
如果在使用OpenGL和C / C ++在浏览器外部显示对象的情况下，已经有相应功能的现成库，那么在JavaScript中找到合适的库是非常困难的。 现有的库，例如glMatrix ，主要针对几何变换-模型的旋转，移动，缩放。 要使用解析几何方法从头开始构建三维对象，需要完全不同的功能，这些功能可以执行以下操作，例如，执行以下操作-在平面上找到线的交点，在平面上找到两个圆的交点，从其法向矢量和点创建平面，找到交点三架飞机之类的。 为此，已经制作了一个小的WebGeometry库。
一年半以前，我发表了一篇关于她的简短文章。 可以找到
在链接上 。
大约六个月前，我决定回到这一主题，并通过使用WebGeometry从头开始创建模型的许多示例，尽可能详细地讲述 。 起初我以为我可以管理大约三篇文章，但是在此过程中，我决定停止撰写文章并创建网站。 结果是一个包含三十个课程的网站（我称其为章节）：
Three.js和几何
使用ThreeJS显示的所有三维模型都尽可能地具有交互性，并直接包含在站点文本中。 如果要阅读有关该模型或模型的制作方法，则可以查看文本中提到的顶点编号，模型面的名称，面的倾斜角度，甚至是模型中任何点的坐标，而无需将站点立即留在模型上网站上的文字。
该站点上的前两章讨论了将ThreeJS库应用于将来的模型的某些方面。 假定读者已经熟悉如何创建基于ThreeJS的简单程序 。
接下来的两章介绍使用WebGeometry库的二维函数。 给出了许多相关的例子。 所有示例都是交互式的，并使用HTML5 Canvas显示其工作结果。 查看第14、18、20、23和28章中的交互图可能会很有趣。
从第五章开始，您可以看到WebGeometry库函数在构建复杂的三维模型中的应用。 选择多面体作为模型，更确切地说， 选择宝石的刻面 。 我认为，没有其他对象可以更好地显示实现解析几何方法的功能的应用。 做出此声明有几个原因。
- 所有这些多面体都是严格按照数学定律开发的。
- 这些多面体虽然具有对称性且非常漂亮，但它们并不具有完全规则的结构，例如柏拉图式固体（立方体，四面体等）。
- 由于这些多面体没有规则的结构，因此有必要使用各种几何计算来确定其顶点的坐标，而不是将自己局限在从各种来源获取的模型的顶点的坐标程序中的艰巨任务。
- 您不需要了解有关切割的任何初步信息。 只需要记住，这种多面体的上部称为冠，中间部分称为腰带，下部称为亭子。 最上面的脸称为平台，而最低的峰称为小et。
可以通过设置模型参数来更改站点上的所有多面体（和工程图）。 应该只提出一点。 假定几乎所有模型（少数例外）在参数值发生任何变化时都应保持凸面。 因此，一些多面体会在很小程度上改变其形状。 对于凸度验证，有一个特殊功能。 如果取消此检查，则可能会获得完全意外的对象形式（很难将其命名为多面体）。 其中一些形式可能是科幻绘画艺术家感兴趣的（请参阅第10和13章末的屏幕截图）。
WebGeometry库的大多数功能都是使用矩阵转换完成的。 但是要构建模型，最有可能不需要矩阵知识，因为矩阵隐藏在其他使用的函数中。 例如，定义三个平面的交点的函数。
我要说的一句话，乍一看似乎完全是多余的，而且太琐碎了，但也许将来对某人有用。 事实是，通过三个不在同一条线上的点，您只能绘制一个平面。 假设多面体的面是四边形。 该面所在的平面的方程式由三个点确定。 该四边形的第四点的坐标不包括在该方程式中，但是同一第四点属于多面体的另一个面，该面也被计算出来。 有时很难注意到第一（或第二）平面的四边形被破坏，这是因为从视觉上看，该第四点同时属于两个平面，但实际上并非如此。 考虑已构建的模型时，很难注意到此错误。 很长一段时间后，她突然爬出来，完全出乎意料。 我遇到了几次。
谢谢大家的关注！ 除了查看站点之外，您还可以访问
我的资料库 。