如何使用 p5.js 设计平面着色图形？

平面着色是 3D 计算机图形学中使用的一种照明技术，根据多边形表面法线与光源方向之间的角度、它们各自的颜色和光源强度对对象的每个多边形进行着色。

• 为多边形的每个面计算一次颜色。
• 多边形中的所有像素都设置为相同的颜色
• 适用于由平面构成的对象。

例子：

Javascript

// Store the angle value in a variable
var angle = 0.1;
  
// Set the canvas size
function setup() {
    createCanvas(500, 500, WEBGL);
}
  
// Function to draw the Flat 
// Shading Graphics
function draw() {
  
    // Create a directional light with 
    // specified color and direction
    directionalLight(25, 250, 50, 101, 0, 0);
  
    // Set the background color
    background(50, 50, 200);
  
    // Set the rotation angle
    rotateX(angle);
    rotateY(angle * 0.3);
    rotateZ(angle * 1.2);
  
    // Set the fill color
    fill(0, 0, 205);
      
    noStroke();
    ambientMaterial(300);
    cone(100);
    angle += 0.03;
}

输出：