m0_68324632的博客

Three.js 非常庞大，你可以用它做很多的事情。我们将学习所有基础知识，例如创建第一个场景、渲染、添加对象、选择正确的材料、添加纹理、为所有内容制作动画、添加光和阴影，甚至有些人可能会觉得这部分有点无聊，因为都是一些API的讲解。刚体（物理physic）很重要，可以看我之前发的文章还有blender帮助我们导入导出模型和自己建模（有些偏离three的课题，但是真的很酷）元神启动！！！！

顾名思义，Raycaster 可以向特定方向投射（或发射）一条射线，并测试与它相交的对象。您可以使用该技术来检测玩家前面是否有墙，测试激光枪是否击中了什么东西，测试当前鼠标下方是否有东西来模拟鼠标事件，以及许多其他事情。

粒子。它们非常受欢迎，可用于实现各种效果，如星星、烟、雨、灰尘、火和许多其他东西。粒子的好处是您可以在屏幕上以合理的帧速率显示数十万个粒子。缺点是每个粒子都由一个始终面向相机的平面（两个三角形）组成。

上节课我们学会了灯光，现在我们需要阴影。物体的背面应该在黑暗中，这就是阴影所谓的核心。我们缺少的是物体对象的投影，也就是根据被投影的对象在其他对象身上创建阴影。阴影渲染一直是实时 3D 渲染的一大挑战，开发人员必须找到技巧以合理的帧速率显示逼真的阴影。实现它们的方法有很多种，Three.js 有一个内置的解决方案。请注意，此解决方案很方便，但并非完美。

正如我们在上一课中看到的，添加灯光就像添加网格一样简单。您使用适当的类实例化一盏灯，然后将其添加到场景中。有多种类型的光，我们已经发现了和。在本课中，我们将详细了解所有不同的类以及如何使用它们。

我们已经了解足够的基础知识，现在可以创作一些好看的效果了。对于我们第一个正式的项目，我们将复刻一个开发者ilithya的作品，这个作品在场景中间有一个大的 3D 文本，很多几何体漂浮在文字的周围。这个作品是学习 Three.js 早期可以实现的一个很好的例子。它简单、高效，而且特效看起来很棒。

材质用于为几何体的每个可见像素着色。决定每个像素颜色的算法属于着色器中编写的。编写着色器是 WebGL 和 Three.js 最具挑战性的部分之一，但不要担心；Three.js 有许多带有预制着色器的内置材质。我们将在以后的课程中探索如何创建我们自己的着色器。现在，让我们使用 Three.js 自带材料。

您可能知道，纹理是覆盖几何体表面的图像。许多类型的纹理会对几何体的外观产生不同的影响。这不仅仅是关于颜色。以下是最常见的纹理类型，使用了João Paulo著名的门纹理。如果您喜欢他的作品，请给他买一个Ko-fi或成为Patreon。

每个创意项目的一个重要方面是使调试变得容易并调整您的代码。开发人员（您）和从事该项目的其他参与者（如设计师甚至客户）必须能够更改尽可能多的参数。你必须考虑到这一点，以便他们找到完美的等，以获得。您甚至可能会得到看起来很棒的意想不到的结果。首先，我们需要一个调试 UI。所有这些都可以实现我们想要的UI界面，但我们将使用最流行的一个，即。你也可以尝试其他的。

在 Three.js 中，几何图形由顶点（3D 空间中的点坐标）和面（连接这些顶点以创建表面的三角形）组成。我们使用几何体来创建网格，为了以后的课程做铺垫，您也可以使用几何体来形成粒子。每个顶点（单个顶点）将对应一个粒子。我们可以存储比顶点位置更多的数据。一个很好的例子是谈论 UV 坐标或法线。我们稍后会详细了解这些内容。

我们已经创建过了一个`PerspectiveCamera`，但还有其他类型的相机，如您在文档中所见。

我们创建了一个场景，我们在代码末尾渲染了一次。这已经是不错的进步了，但大多数时候，您会想要为您的作品制作一些动态效果动画。使用 Three.js 时，动画效果类似于定格动画。您移动对象，然后进行渲染。然后再移动对象一点，再做一次渲染。等等。在渲染之间移动对象越多，它们看起来移动得越快。您正在查看的屏幕以特定频率运行。我们称之为帧率。帧率主要取决于屏幕，但计算机本身有局限性。大多数屏幕以每秒 60 帧的速度运行。如果你算一下，这意味着大约每 16 毫秒一帧。

现在一切就绪，我们可以探索 Three.js 的功能。在为我们的场景设置动画之前，我们需要知道如何变换场景中的对象。我们已经通过使用camera.position.z = 3.有 4 个属性可以在我们的场景中转换对象- position（移动物体）- scale（调整对象大小）- rotation（旋转物体）- quaternion（同时旋转对象；稍后会详细介绍）

在我们的第一课中，我们将使Three.js以最直接的方式工作：没有捆绑器、没有依赖、没有模块，只有一个HTML文件和一些JavaScript。

上节课我们实现的加载Three.js的方式是最简单的。不幸的是，它有两个缺点及主要限制。首先，我们只能访问“核心”类。这个核心中有几十个类，我们可以用它们做很多事情，但我们并没有掌握所有的的类和属性。例如，在以后的课程中，我们将需要访问该类，这在核心类中是不可用的。

Three.js是一个3D JavaScript库，使开发人员能够为web创建3D体验它适用于WebGL，但您可以使其适用于SVG和CSS，但这两者非常有限，我们不会在本课程中介绍。WebGL是一种，可以以惊人的速度在画布中绘制三角形。它与大多数现代浏览器兼容，而且速度很快。