P5.js | 灯()函数

在P5.js中，灯()函数用于指定光源的类型和位置。通过使用不同类型的灯光，可以添加更真实的光照效果。

语法

light(type [, color])

参数：

• type：灯光类型，可以是AMBIENT，DIRECTIONAL，POINT或SPOT。
• color（可选）：灯光的颜色，可以使用RGB或HSL色彩模式。

灯光类型

• AMBIENT：环境光，没有指定方向，影响整个场景。可以用来模拟光线从天空强烈反射的效果。

• DIRECTIONAL：平行光，有指定方向，但没有位置。可以用来模拟太阳光。

• POINT：点光源，有指定位置，光线向各个方向发散。可以用来模拟手电筒或火炬的效果。

• SPOT：聚光灯，有指定位置和方向，有一个锥形光束。可以用来模拟警车或舞台灯光的效果。

例子

环境光

function setup() {
  createCanvas(400, 400, WEBGL);
  background(200);
  noStroke();
  ambientLight(255, 255, 255);
  box(50);
}

上面的例子创建了一个400×400的画布，在3D模式下绘制一个白色立方体，并添加了一个环境光。ambientLight(255, 255, 255)指定了环境光为白色。

双色平行光

function setup() {
  createCanvas(400, 400, WEBGL);
  background(200);
  noStroke();
  directionalLight(255, 255, 255, -1, 0, 0);
  directionalLight(255, 0, 0, 1, 0, 0);
  box(50);
}

上面的例子创建了一个400×400的画布，在3D模式下绘制一个白色立方体，并添加了两个平行光，一个是白色的从左侧照射，一个是红色的从右侧照射。directionalLight(255, 255, 255, -1, 0, 0)指定了平行光为白色、从左侧照射。

点光源

function setup() {
  createCanvas(400, 400, WEBGL);
  background(200);
  noStroke();
  pointLight(255, 255, 255, 100, 0, 0);
  box(50);
}

上面的例子创建了一个400×400的画布，在3D模式下绘制一个白色立方体，并添加了一个点光源，位置在(100, 0, 0)。pointLight(255, 255, 255, 100, 0, 0)指定了点光源为白色、位置在(100, 0, 0)。

聚光灯

function setup() {
  createCanvas(400, 400, WEBGL);
  background(200);
  noStroke();
  spotLight(255, 255, 255, 100, 0, 0, -1, 0, 0, PI / 2, 2);
  box(50);
}

上面的例子创建了一个400×400的画布，在3D模式下绘制一个白色立方体，并添加了一个聚光灯，位置在(100, 0, 0)，方向向左，角度为90度，范围为2个单位长度。spotLight(255, 255, 255, 100, 0, 0, -1, 0, 0, PI / 2, 2)指定了聚光灯为白色、位置在(100, 0, 0)、方向向左、角度为90度、范围为2个单位长度。

结论

P5.js中的灯()函数可以用于指定光源的类型和位置，可以用来添加更真实的光照效果。不同类型的灯光可以模拟不同的场景，如太阳、手电筒、警车等。要了解更多，可以查看P5.js的官方文档。