p5.js |定向光()函数

p5.js 中的directionalLight()函数用于创建具有指定颜色和方向的定向光。定向光的光线沿着它们穿过场景的路径无限传播，因此光的距离无关紧要。一个场景中最多可以有 5 个方向灯处于活动状态。

句法：

directionalLight( v1, v2, v3, position )

或者

directionalLight( color, x, y, z )

或者

directionalLight( color, position )

或者

directionalLight( v1, v2, v3, x, y, z )

参数：此函数接受上述八个参数，如下所述：

• v1：它是一个数字，用于确定相对于当前颜色范围的红色或色调值。
• v2：它是一个数字，用于确定相对于当前颜色范围的绿色或饱和度值。
• v3：它是一个数字，用于确定相对于当前颜色范围的蓝色或亮度值。
• position：它是一个 p5.Vector，表示定向光的方向。
• color：它是一个 p5.Color 或颜色字符串，用于定义定向光的颜色。
• x：它是定义光的 x 轴方向的数字。
• y：定义光的y轴方向的数字。
• z：它是定义光的 z 轴方向的数字。

下面的示例说明了 p5.js 中的directionalLight()函数：

示例 1：

let newFont;
let directionalLightEnable = false;
  
function preload() {
  newFont = loadFont('fonts/Montserrat.otf');
}
  
function setup() {
  createCanvas(600, 300, WEBGL);
  textFont(newFont, 18);
  
  directionalLightCheck = createCheckbox(
        "Enable Directional Lights", false);
  
  directionalLightCheck.position(20, 80);
  
  // Toggle point light
  directionalLightCheck.changed(() => {
    directionalLightEnable = !directionalLightEnable;
  });
}
  
function draw() {
  background('green');
  text("Click on the checkbox to enable directional"
        + " lights in the scene.", -285, -125);
  
  if (directionalLightEnable) {
    directionalLight(255, 0, 0, height / 2, width / 2, -250);
  }
  noStroke();
  sphere(80);
}

输出：

示例 2：

let newFont;
let directionalLightEnable = false;
  
function preload() {
  newFont = loadFont('fonts/Montserrat.otf');
}
  
function setup() {
  createCanvas(600, 300, WEBGL);
  textFont(newFont, 18);
}
  
function draw() {
  background('black');
  text("This sketch has 4 directional lights "
    + "from different directions", -285, -125);
  
  directionalLight(255, 0, 0, height / 2, width / 2, -1);
  directionalLight(0, 0, 255, -height / 2, -width / 2, -1);
  directionalLight(0, 255, 0, -height / 2, width / 2, -1);
  directionalLight(255, 255, 255, height / 2, -width / 2, -1);
  
  noStroke();
  sphere(100);
}

输出：

在线编辑器： https://editor.p5js.org/

环境设置： https://www.geeksforgeeks.org/p5-js-soundfile-object-installation-and-methods/

参考： https://p5js.org/reference/#/p5/directionalLight