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

p5.js中的directionalLight()函數用於創建具有指定顏色和方向的定向光。定向光線沿其穿過場景的路徑無限地傳播，因此光線的距離無關緊要。一個場景中最多可以激活5個定向燈。

用法:

directionalLight( v1, v2, v3, position )

directionalLight( color, x, y, z )

directionalLight( color, position )

directionalLight( v1, v2, v3, x, y, z )

參數：該函數接受上述和以下所述的八個參數：

v1:它是一個數字，用於確定相對於當前顏色範圍的紅色或色調值。
v2:它是一個數字，用於確定相對於當前顏色範圍的綠色或飽和度值。
v3:它是一個數字，用於確定相對於當前顏色範圍的藍色或亮度值。
position:它是p5.Vector，表示定向光的方向。
color:它是p5.Color或顏色字符串，用於定義定向光的顏色。
x:它是定義燈光x軸方向的數字。
y:它是定義光的y軸方向的數字。
z:它是定義燈光的z軸方向的數字。

以下示例說明了p5.js中的directionalLight()函數：

範例1：

let newFont; 
let directionalLightEnable = false; 
  
function preload() { 
  newFont = loadFont('fonts/Montserrat.otf'); 
} 
  
function setup() { 
  createCanvas(600, 300, WEBGL); 
  textFont(newFont, 18); 
  
  directionalLightCheck = createCheckbox( 
        "Enable Directional Lights", false); 
  
  directionalLightCheck.position(20, 80); 
  
  // Toggle point light 
  directionalLightCheck.changed(() => { 
    directionalLightEnable = !directionalLightEnable; 
  }); 
} 
  
function draw() { 
  background('green'); 
  text("Click on the checkbox to enable directional"
        + " lights in the scene.", -285, -125); 
  
  if (directionalLightEnable) { 
    directionalLight(255, 0, 0, height / 2, width / 2, -250); 
  } 
  noStroke(); 
  sphere(80); 
}

輸出：
dirLight-toggle

範例2：

let newFont; 
let directionalLightEnable = false; 
  
function preload() { 
  newFont = loadFont('fonts/Montserrat.otf'); 
} 
  
function setup() { 
  createCanvas(600, 300, WEBGL); 
  textFont(newFont, 18); 
} 
  
function draw() { 
  background('black'); 
  text("This sketch has 4 directional lights "
    + "from different directions", -285, -125); 
  
  directionalLight(255, 0, 0, height / 2, width / 2, -1); 
  directionalLight(0, 0, 255, -height / 2, -width / 2, -1); 
  directionalLight(0, 255, 0, -height / 2, width / 2, -1); 
  directionalLight(255, 255, 255, height / 2, -width / 2, -1); 
  
  noStroke(); 
  sphere(100); 
}

輸出：
four-directional-lights

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

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

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

相關用法

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