📜  p5.js 聚光灯() 方法

📅  最后修改于: 2022-05-13 01:58:10.662000             🧑  作者: Mango

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);
}


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);
}


输出:

示例 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