當前位置: 首頁>>編程示例 >>用法及示例精選 >>正文

p5.js emissiveMaterial()用法及代碼示例

p5.j​​s中的emissiveMaterial()函數用於為具有給定顏色的幾何圖形創建發光材料。物體的發射率使物體看起來像是發光的。與周圍或鏡麵材料不同，即使場景中不存在任何光，發光材料仍將以全強度顯示。

用法:

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

OR



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

輸出：
emissive-toggle

在線編輯： https://editor.p5js.org/

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

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




相關用法


注：本文由純淨天空篩選整理自sayantanm19大神的英文原創作品 p5.js | emissiveMaterial() Function。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。