p5.js 聚光灯() 方法

p5.js 中的spotLight()函数用于创建具有给定颜色、位置、光的方向、角度和浓度的聚光灯。一个场景一次最多可以激活 5 个聚光灯。聚光灯的坐标可以根据下图进行设置。

语法：此方法可以与多个参数一起使用，具体取决于语法。

spotLight(v1, v2, v3, x, y, z, rx, ry, rz, [angle], [conc])
spotLight(color, position, direction, [angle], [conc])
spotLight(v1, v2, v3, position, direction, [angle], [conc])
spotLight(color, x, y, z, direction, [angle], [conc])
spotLight(color, position, rx, ry, rz, [angle], [conc])
spotLight(v1, v2, v3, x, y, z, direction, [angle], [conc])
spotLight(v1, v2, v3, position, rx, ry, rz, [angle], [conc])
spotLight(color, x, y, z, rx, ry, rz, [angle], [conc])

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

• v1：它是一个数字，用于确定相对于当前颜色模式的红色或色调值。
• v2：它是一个数字，用于确定相对于当前颜色模式的绿色或饱和度值。
• v3：它是一个数字，用于确定相对于当前模式的蓝色或亮度值。
• x：是光在x轴上的位置。
• y：是光线在y轴上的位置。
• z：是光在z轴上的位置。
• rx：它是x轴上的光方向。
• ry：它是y轴上的光方向。
• rz：它是z轴上的光方向。
• 角度：提供光线的角度。默认值为 PI/3。
• conc：指定灯光的浓度值。默认值为 100。
• color：指定灯光的颜色。它可以是颜色数组、CSS 颜色字符串或 p5.Color 值。
• position：它是一个 p5.Vector，用于指定灯光的位置。
• 方向：它是一个 p5.Vector，它指定了光的方向。

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

示例 1：此示例显示一个特定位置的聚光灯。

Javascript

function setup() {
   
  // Creating canvas with width
  // and height of 100
  createCanvas(100, 100, WEBGL);
}
 
function draw() {
 
  // Setting background colour
  // to black
  background(0);
   
  // Setting the spotlight
  spotLight(0, 250, 0, 20, 20,
            100, 0, 0, -1, Math.PI );
  noStroke();
   
  // Drawing a sphere to show
  // the spotlight
  sphere(40);
}

输出：

示例 2：此示例说明如何根据鼠标移动更改聚光灯位置。

Javascript

function setup() {
   
  // Creating canvas with width
  // and height to 100
  createCanvas(100, 100, WEBGL);
}
 
function draw() {
  // Setting background colour
  // to black
  background(0);
   
  // Getting position based
  // on mouse movement
  let locX = mouseX - width / 2;
  let locY = mouseY - height / 2;
   
  // Setting the spotlight
  spotLight(0, 250, 0, locX, locY,
            100, 0, 0, -1, Math.PI );
  noStroke();
   
  // Drawing a sphere to show
  // the spotlight
  sphere(40);
}

输出：

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