WebGL 和 p5.js 中的灯光

在 WebGL 和 p5.js 中，灯光是用于创建场景的重要元素之一。它可以使你的场景更加逼真，增加光影效果，使其更加真实。

WebGL 中的灯光

WebGL 是一种用于创建高性能的3D图形渲染的技术，支持多种类型的灯光。

点光源

点光源是最基本的灯光，在3D场景中表现为像一个光球，光源呈现无限远距离，并且光线在任意方向上发射。在WebGL中创建一个点光源需要用到以下步骤：

1. 定义光源位置。
2. 设置光的颜色和亮度。
3. 开启灯光并启用光源。

// 创建一个点光源
const pointLight = new THREE.PointLight(0xffffff, 1, 100);

// 设置其位置
pointLight.position.set(0, 10, 0);

// 启用该光源
scene.add(pointLight);

聚光灯

聚光灯是一种能够产生较强聚光效果的灯光，在角色进行关键动作时，通过对目标区域进行聚焦，来使角色显得更加引人注目或突出。在WebGL中创建一个聚光灯需要用到以下步骤：

1. 定义光源位置和方向。
2. 设置光的颜色和亮度。
3. 设置聚光灯内的扩散角度和聚光灯的角度大小。
4. 启用该光源。

// 创建一个聚光灯
const spotLight = new THREE.SpotLight(0xffffff);

// 设置聚光灯的位置和方向
spotLight.position.set(100, 200, 0);
spotLight.target.position.set(0, 0, 0);
spotLight.angle = Math.PI / 5;

// 设置聚光灯内的扩散角度和角度大小
spotLight.penumbra = 0.5;

// 设置光源的颜色和亮度
spotLight.color.setRGB(1, 1, 1);
spotLight.intensity = 2;

// 启用该光源
scene.add(spotLight);

p5.js 中的灯光

p5.js 是一种流行的 JavaScript 库，可用于创建动态的图形和交互式图像。它也支持多种类似的灯光。

点光源

在 p5.js 中，你可以使用 pointLight() 函数来创建点光源。

function setup() {
  createCanvas(400, 400, WEBGL);
  pointLight(250, 250, 250, 0, 0, 250);
}

function draw() {
  background(0);

  rotateX(frameCount * 0.01);
  rotateY(frameCount * 0.01);

  box(100);
}

方向光源

与 WebGL 中的聚光灯类似，p5.js 中的方向光源也被用于绘制具有视觉深度的场景。你可以使用 directionalLight() 函数来创建方向光源。

function setup() {
  createCanvas(400, 400, WEBGL);
  directionalLight(255, 255, 255, 0, 1, 0);
}

function draw() {
  background(0);

  rotateX(frameCount * 0.01);
  rotateY(frameCount * 0.01);

  box(100);
}

总结

灯光是创建高逼真度的3D场景的重要元素之一。在 WebGL 和 p5.js 中，你可以使用点光源和聚光灯来实现光照效果。这些函数提供了一个简单而有效的方法来创建逼真的场景，让你的3D模型更加真实。