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


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

p5.j​​s中的normalMaterial()函數用於為對象創建普通材質。普通材料不受任何光線影響,也不會反射任何光線。麵對x軸的表麵變為紅色,麵對y軸的表麵變為綠色,麵對z軸的表麵變為藍色。它通常用作調試的占位符材料。

用法:

normalMaterial()

參數:該函數不接受任何參數。



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

範例1:此示例表明普通材料不受光的影響。

let newFont; 
let hasLight = true; 
  
function preload() { 
  newFont = loadFont('fonts/Montserrat.otf'); 
} 
  
function setup() { 
  createCanvas(600, 300, WEBGL); 
  textFont(newFont, 16); 
  
  lightCheckbox = createCheckbox('Enable Light', true); 
  lightCheckbox.position(30, 250); 
  lightCheckbox.changed(() => hasLight = !hasLight); 
} 
  
function draw() { 
  background('white'); 
  fill('black'); 
  
  text("Use the mouse to rotate/move the scene", -285, -125); 
  noStroke(); 
  orbitControl(); 
  
  // Enable lights when the checkbox is checked 
  if (hasLight) 
    directionalLight(color('red'), height / 2, width / 2, -250); 
  
  // Draw the sphere which uses ambient material 
  ambientMaterial(255); 
  translate(-100, 0, 0); 
  sphere(80); 
  translate(100, 0, 0); 
  
  // Draw sphere which uses normal material 
  normalMaterial(); 
  translate(100, 0, 0); 
  sphere(80); 
  translate(-100, 0, 0); 
}

輸出:
normalMat-comparison

範例2:本示例顯示了普通材質不同軸的顏色。

let newFont; 
let hasNormalMaterial = true; 
  
function preload() { 
  newFont = loadFont('fonts/Montserrat.otf'); 
} 
  
function setup() { 
  createCanvas(600, 300, WEBGL); 
  textFont(newFont, 16); 
} 
  
function draw() { 
  background('white'); 
  fill('black'); 
  
  text("Use the mouse to rotate/move the scene", -285, -125); 
  // text("Select directional light color", -285, -100); 
  shininess(10); 
  noStroke(); 
  orbitControl(); 
  
  // Use the normal material 
  normalMaterial(); 
  
  // Create the box 
  rotateX(60) 
  rotateY(120) 
  rotateZ(60) 
  box(100); 
}

輸出:
normalMat-colors-movement

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

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

參考: https://p5js.org/reference/#/p5/normalMaterial




相關用法


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