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