p5.js | emissiveMaterial()函数

p5.js 中的emissiveMaterial()函数用于为具有给定颜色的几何体创建自发光材质。物体的发射率使其看起来物体正在发光。与环境或镜面反射材质不同，即使场景中不存在光，自发光材质仍会以全强度显示。

句法：

emissiveMaterial( v1, [v2], [v3], [a] )

或者

emissiveMaterial( color )

参数：此函数接受上面提到的四个参数，如下所述：

• v1：它是一个数字，它决定了灰度值，或者相对于当前颜色范围的红色或色调值。
• v2：它是一个数字，用于确定相对于当前颜色范围的绿色或饱和度值。它是一个可选参数。
• v3：它是一个数字，用于确定相对于当前颜色范围的蓝色或亮度值。它是一个可选参数。
• a：这是一个数字，表示材料的不透明度。它是一个可选参数。
• color：它是一个 p5.Color 或颜色字符串，用于定义材质的颜色。

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

示例：下面的示例显示，无论环境光如何，自发光材料始终显示。

let newFont;
let hasAmbientLight = true;
let currentEmissiveColor = "red";
  
function preload() {
  newFont = loadFont('fonts/Montserrat.otf');
}
  
function setup() {
  createCanvas(600, 300, WEBGL);
  textFont(newFont, 16);
  
  // Create checkbox to enable/disable ambient light
  redCheckbox = createCheckbox('Enable Ambient Light', true);
  redCheckbox.position(30, 250);
  redCheckbox.changed(() => hasAmbientLight = !hasAmbientLight);
  
  // Create a selector for selecting the directional light color
  lightColorSel = createSelect();
  lightColorSel.position(30, 80);
  lightColorSel.option('red');
  lightColorSel.option('green');
  lightColorSel.option('blue');
  lightColorSel.changed(() => {
    currentEmissiveColor = lightColorSel.value();
  });
}
  
function draw() {
  background('white');
  fill('black');
  
  text("Select an option below to set the emissive material color",
                                                        -285, -125);
  text("Select emissive material color", -285, -100);
  noStroke();
  
  // Enable ambient light if the checkbox is enabled
  if (hasAmbientLight)
    ambientLight(0, 0, 255);
  
  // Draw sphere which uses emissive material
  emissiveMaterial(currentEmissiveColor);
  translate(-100, 0, 0);
  sphere(50);
  translate(100, 0, 0);
  
  // Draw sphere which uses ambient material
  ambientMaterial(255);
  translate(100, 0, 0);
  sphere(50);
  translate(-100, 0, 0);
}

输出：

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

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

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