P5.js | 定向光() 函数

简介

定向光() 函数是 P5.js 的灯光函数之一，它表示的是平行于指定方向的无限远的光源。它的作用是控制场景中物体的阴影和高光。

在使用 定向光() 函数之前，需要先通过 createCanvas() 函数创建一个画布。然后，再使用 createGraphics() 函数创建一个内存画布作为灯光映射的纹理图像。

该函数的语法如下：

directionalLight(r, g, b, x, y, z)

参数说明：

• r：int，表示光源的红色分量。取值范围为 0 到 255。
• g：int，表示光源的绿色分量。取值范围为 0 到 255。
• b：int，表示光源的蓝色分量。取值范围为 0 到 255。
• x：float，表示光源的 x 轴方向。取值范围为 -1 到 1。
• y：float，表示光源的 y 轴方向。取值范围为 -1 到 1。
• z：float，表示光源的 z 轴方向。取值范围为 -1 到 1。

代码示例

function setup() {
  createCanvas(400, 400, WEBGL);
  myGraphics = createGraphics(400, 400);

  myGraphics.noStroke();
  myGraphics.background(255);
  myGraphics.fill(200);
  myGraphics.ellipse(200, 200, 200, 200);
}

function draw() {
  background(100);

  let dirX = (mouseX / width - 0.5) * 2;
  let dirY = (mouseY / height - 0.5) * 2;

  myGraphics.fill(0);
  myGraphics.ellipse(mouseX, mouseY, 50, 50);

  texture(myGraphics);
  directionalLight(255, 255, 255, dirX, dirY, -1);
  sphere(100, 24, 16);
}

上面的代码示例通过 createGraphics() 函数创建一个大小为 400x400 的内存画布，并在内存画布中绘制一个白色的圆形。然后，将内存画布作为灯光映射的纹理图像，通过 定向光() 函数控制光源的位置，最后绘制一个球体。

注意事项

1. 定向光() 函数会影响场景中所有的灯光，包括 点光() 和 环境光()。
2. 定向光() 函数所创建的灯光只会有平行于指定方向的光线，没有它们的投射效果。如果需要使用投射效果，可以考虑使用 点光() 或 聚光() 函数。
3. 如果有多个 定向光() 函数被调用，只有最后一个会起作用。
4. 在 P5.js 中使用灯光函数时，需要注意设置相机视角（使用 camera() 函数）和开启深度测试（使用 depth() 函数或者 WEBGL 参数）。

参考链接

• P5.js 定向光() 函数参考