¿Cómo crear geometrías 3D en webGL y p5.js?

En este artículo, veremos cómo dibujar geometría 3D (que contiene largo, ancho y alto) en p5.js. La representación predeterminada en p5.js se usa para imágenes 2D, y para las imágenes 3D, usamos WEBGL que permite la representación 3D al introducir la dimensión Z en la geometría.

Sintaxis:

createCanvas( windowWidth, windowHeight, WEBGL )

Ejemplo 1: en este ejemplo, usaremos webGL y p5.js para crear una geometría 3D y rotarla en todas las direcciones.

// Create a canvas of given size
let angle = 0;
 
function setup() {
    createCanvas(600, 600, WEBGL);
}
 
// Create a draw function
function draw() {
    background(175);
    ambientLight(255);
    push();
 
    // Rotate the box in all dimensions
    translate(mouseX - width / 2,
            mouseY - width / 2);
             
    rotateX(angle);
    rotateZ(angle * 0.03);
    rotateY(angle * 0.06);
    noStroke();
    normalMaterial();
 
    // Create box of given size
    box(150, 150, 150);
    push();
    angle += .06
}

Producción: 

Ejemplo 2: En este ejemplo, usaremos webGL y p5.js para crear una geometría 3D usando la imagen como lado de la geometría y rotarla en todas las direcciones. 

// Create a canvas of given size
let angle = 0;
 
// Load the image in the
// preload function
function preload() {
    img = loadImage('gfg.jpg');
}
 
function setup() {
    createCanvas(600, 600, WEBGL);
}
 
// Create draw function
function draw() {
    background(175);
    ambientLight(255);
    push();
 
    // Rotate the box in all dimensions
    translate(10, 10, 10);
    rotateX(angle);
    rotateZ(angle * 0.03);
    rotateY(angle * 0.06);
    noStroke();
    normalMaterial();
 
    // Draw the texture
    texture(img);
 
    // Create box of given size
    box(150, 150, 150);
    push();
    angle += .06
}

Producción: