新缸中之脑

本文介绍在 three.js 中将对象适配相机视野的解决方案。换句话说，将相机在 z 轴上拉回多远，才能在不裁剪的情况下尽可能大地显示对象。推荐：用快速搭建3D场景。

Speckle 中的 3D 数据具有各种形状和大小（范围从 1 毫米到 100 公里），并且与“世界”原点 (0, 0, 0) 的距离各不相同。大多数创作软件都有专门的显示管道来处理这个问题——取得了多方面的成功，但有明显的局限性（例如不能在月球上建模 😀）。当在 Web 浏览器中渲染内容时，我们常用的 WebGL 库 Three.js 并没有很好地处理这个问题：我们得到了我们亲切地称之为“速度需求”效果的显示伪影，通常称为空间抖动。

虽然目前没有太多关于如何在 Three.js 中编写您自己的自定义后处理通道的文档，但库中已有大量示例可供学习。自定义通道继承自通道类，具有三个方法：setSize、render 和dispose。正如您可能已经猜到的那样，我们将主要关注渲染方法。首先，我们将从创建自己的 PencilLinesPass 开始，它扩展了 Pass 类，稍后将实现我们自己的渲染逻辑。

我是一个游戏爱好者。我一直梦想创建一个交互式迷你城市，使用饱和的颜色，类似于 SimCity 等。挑战在于我既没有足够的 3D 知识也没有开发库。2021年底，我终于决定完成一个旧愿，我选修了Bruno Simon的课程——Three.js Journey。我是一个喜欢编程的设计师。由于这门课程，我最终发现自己是一名创意开发人员，在那里我能够使用我对已故 Macromedia Flash 的 ActionScript 2.0 的部分沉睡的知识。

受到一些很棒的 three.js 演示、与 covid 相关的旅行禁令以及可能在 pinterest 上花太多时间看美丽的旅行照片的启发——我开始看看我是否可以使用 three.js 和r3f在浏览器中渲染一个令人信服的风景场景。推荐：将加入你的3D开发工具链。在过去一个月左右的时间里，我一直在尝试不同的方法，并在互联网上搜索有关如何使用浏览器技术渲染半现实景观的技巧。我发现它很有价值，但也比我预期的要难得多。

在 three.js 中，可见对象由几何体和材质构成。我们已经了解了如何创建适用于点和线图元的简单几何图形，并且遇到了各种标准网格几何图形，例如 THREE.CylinderGeometry 和 THREE.IcosahedronGeometry。在本节中，我们将了解如何从头开始创建新的网格几何体。我们还将了解 three.js 为处理对象和材质提供的其他一些支持。推荐：使用快速搭建 3D场景。

Sketchfab 的 API 使你能够以编程方式访问网络上最大的 glTF 3D 模型集合。源代码可以从下载。推荐：使用快速搭建 3D场景。

最近，有人联系我，想要为他们要制作的游戏提供一些随机角色。我从来没有研究过程序化角色生成，关于如何这样做的信息很少，但我决定接受挑战并让它发挥作用。在这篇文章中，我将探讨我用来生成随机字符的几种方法。在这里我们考虑随机的头部，但这些技术也可以应用于其他身体部位。可以在此处的 GitHub 上找到。推荐：使用快速搭建 3D场景。

纹理贴图是 20世纪90 年代 CG 的主要创新之一。它允许我们在不添加大量几何基元（线、顶点、面）的情况下添加大量表面细节。想一想 Caroline 的 loadedDemo 的所有纹理映射是多么有趣：推荐：使用快速搭建 3D场景。

Three.js 应用程序以每秒 60 帧 (FPS) 的速度执行 3D 渲染是流畅和愉快体验的保证。然而，这是一个有时难以实现的目标！本文整理了优化 Three.js 应用程序和达到 60 FPS 的最佳提示和技巧！推荐：使用快速搭建 3D场景。

导航网格或 navmesh是一种用于虚拟环境中路线规划的数据结构，在游戏开发中特别有用。它由一组代表地图区域的凸多边形组成，多边形的边用额外的连接信息进行了注释，显示了游戏角色可以穿越的区域。正如你在下图中看到的，导航网格提供了世界上障碍物的简化表示，允许路线规划算法快速有效地计算出最佳路径。我不会在这篇文章中过多地谈论导航网格背后的理论，网络上有很多很好的资源；维基百科条目是一个很好的起点。相反，我将专注于构建导航网格的技术。