p5.js | pointLight()函数

pointLight()函数是p5.js中的灯光函数之一。灯光效果的实现是通过三维图形中的光照计算完成的，通过添加光照，可以使三维模型看起来更真实。

语法

pointLight(color, posX, posY, posZ)
pointLight(color, pos)

• color：灯光的颜色，可以使用rgb()、hsb()或color()函数。
• posX, posY, posZ：灯光的位置，使用三个参数指定。
• pos：灯光的位置，使用p5.Vector对象指定。

示例

function setup() {
  createCanvas(400, 400, WEBGL);
}

function draw() {
  background(0);
  rotateX(frameCount * 0.01);
  rotateY(frameCount * 0.01);
  noStroke();
  specularMaterial(250);
  pointLight(255, 255, 255, 0, 0, 200);
  sphere(100);
}

代码中定义了一个Canvas，并使用灰色背景。通过旋转来使球体转动。使用specularMaterial()函数设置光泽材质，使用pointLight()函数设置点光源。

运行结果

总结

pointLight()函数是p5.js中的光照函数，可以创建“点光源”效果，在三维模型中增加光照效果。同时，还有其他的光照函数可以选择。当然，要实现更棒的光照效果，我们还可以使用ambientLight、directionalLight、spotLight等函数结合使用。