语言设定

样式和外观

创作 3D 作品不仅仅是关于几何形状。相机、灯光和材质是创建视觉上有趣的 3D 场景的重要组成部分。p5.js 提供了许多工具，使我们可以改变我们几何形状的外观。

目录

  1. 相机和视图
  2. 照明
  3. 材料和纹理
  4. 结论
  5. 词汇表

相机和视图

相机是 3D 场景的基本组成部分；它为我们提供 3D 所特有的空间和维度感。 在 p5.js 中，WebGL 模式默认提供透视相机，但我们可以使用 perspective() 或 ortho() 来更改这一点。 perspective() 或 ortho().

an illustration showing the difference between perspective and orthographic camera types

透视相机会使对象倾斜，因此它们随着远离视角点的距离而变小，在远处消失。 这与正交相机形成对比，后者的几何形状随着距离增加而保持相同大小，并且没有消失点。

我们可以使用透视相机更改的一个设置是视场（FOV）。这是用来描述我们相机看到的角度。 在简单的示例中，它可能会产生缩放效果，但它将改变形状在远处改变大小的方式。

在 3D 中使用相机时，另一个重要的术语是相机的视锥体frustum。 相机的视锥体是相机视图的形状，一个金字塔形状，其中可以显示几何形状。视锥体包括近平面和远平面。 近平面定义了几何形状与相机之间必须呈现的最小距离。远平面定义了几何形状与相机之间可以呈现的最大距离。 每个平面都可以更改，以影响相机可以看到多近和多远。有时将这种有选择地包含几何形状的过程称为“裁剪”。

an illustration showing the the camera frustum in purple, the near plane represented by a yellow rectangle near the camera, and far plane as a green rectangle on the opposite end of the frustum volume.

相机可以通过向 camera() 传递参数来移动， 但在代码中不断移动和调整相机可能会很繁琐，特别是当你在尝试各种想法时。 p5.js 有一个特殊的相机方法 orbitControl()，可以使用鼠标缩放、平移和定位相机。orbitControl()可以使用鼠标缩放、平移和定位相机。

一个场景可以有多个相机，但一次只能有一个相机处于活动状态。 在 p5.js 中，草图默认只有一个透视相机，但可以通过调用 perspective()（使用新参数）或 ortho() 来更改相机类型。 camera() 可以用于更改活动相机的位置和相机所看向的位置。在下面的草图中试试吧。

照明

照明是 3D 场景中的另一个重要组成部分。为了能够传达形状和深度，必须拥有光源。p5.js 中有一些不同类型的光源可供草图使用。

ambientLight()
在场景中使用环境光会使得所有物体都显示得更亮，不考虑光源的位置或方向。
directionalLight()
方向光从一个方向照射，这对于传达场景的深度或需要一个“太阳”光源时特别有用。该方法接受颜色和方向参数。
pointLight()
点光源从一个点向所有方向发射光线，类似于灯泡。该方法接受颜色和光源位置参数。
spotLight()
聚光灯从一个点向一个方向发射光线。该灯光发射成锥形，其半径和浓度可以调节。
noLights()
`noLights()` 函数可以使所有后续几何体呈现出无光照状态。当你想要平坦、未着色的几何体时，这很有用

这些灯光应该在draw()函数中使用。在一个场景中可以同时使用最多5个灯光， 从而使您能够组合具有多样化和复杂光源的场景。尝试勾选和取消下面交互示例中的复选框， 看看灯光如何混合在一起。对于每个活动光源，都有其位置或方向的视觉指示器，但这些仅用于说明目的！

在这个例子中，尝试注释或取消注释每个光源，并尝试调整它们的参数。


材料和纹理

物体的外观可以根据它们的材料而异。材料决定光如何与几何图形相互作用，以及如何将颜色（或纹理）应用于物体。材料可以各不相同， 使物体闪亮、粗糙，甚至贴上图像纹理。

在这个交互式示例中，尝试选择每种不同的材料，看看它们对几何图形外观的影响。您可以移动鼠标，看看定向光对材料的影响。

尝试在这个示例中注释或取消注释不同的光源：

通过使用texture()可以实现更多自定义材料。简而言之，这些是可以映射到几何图形表面的图像。 这些纹理可以从图像中导入，甚至可以使用着色器在代码中生成。 要将纹理映射到几何图形上，请在preload()中使用 loadImage()，然后在绘制形状之前调用texture()。

尽管着色器可以用于改变几何体的外观，但在本教程范围之外。因此，请确保在准备好时查看 着色器简介页面。 着色器简介 页面准备就绪时

结论

能够控制相机、灯光和材料将使你更有弹性地决定你的草图外观， 这将为你的 3D 草图引入自己的风格打开可能性。在"开始使用 WebGL"系列的以下教程中， 我们将向您介绍着色器，这将使您能够以更有趣的方式改变草图的外观。

其他教程

这个教程是关于使用 p5.js 中 WebGL 基础的系列之一。以下是其他教程：

词汇表

相机

3D 场景的视点。

透视

通过使远处的物体变小来给出深度感的投影方式。

正交

正交的投影方式不受深度影响，给出二维外观。

视野

表示相机可视范围的角度。

锥体

表示相机完整可视区域的几何形状。

近和远平面

近平面表示几何体必须距相机的最小距离才能被显示，而远平面则表示最大距离。

裁剪

有选择地显示某些几何体而不是其他几何体，例如当几何体超出相机锥体范围时。