La función normalMaterial() en p5.js se usa para crear un material normal para un objeto. Un material normal no se ve afectado por ninguna luz y tampoco refleja ninguna luz. La superficie que mira hacia el eje x se vuelve roja, la superficie que mira hacia el eje y se vuelve verde y la superficie que mira hacia el eje z se vuelve azul. Por lo general, se utiliza como material de marcador de posición para la depuración.
Sintaxis:
normalMaterial()
Parámetros: Esta función no acepta ningún parámetro.
El siguiente ejemplo ilustra la función normalMaterial() en p5.js:
Ejemplo 1: Este ejemplo muestra que el material normal no se ve afectado por la luz.
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); }
Producción:
Ejemplo 2: Este ejemplo muestra los colores para los diferentes ejes del material normal.
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); }
Producción:
Editor en línea: https://editor.p5js.org/
Configuración del entorno: https://www.geeksforgeeks.org/p5-js-soundfile-object-installation-and-methods/
Referencia: https://p5js.org/reference/#/p5/normalMaterial
Publicación traducida automáticamente
Artículo escrito por sayantanm19 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA