如何在 webGL 和 p5.js 中创建 3D 几何？

在本文中，我们将了解如何在 p5.js 中绘制 3D 几何图形（包含长度、宽度和高度）。 p5.js 中的默认渲染用于 2D 图像，对于 3D 图像，我们使用WEBGL ，它通过将 Z 维度引入几何图形来启用 3D 渲染。

句法：

createCanvas( windowWidth, windowHeight, WEBGL )

示例 1：在本示例中，我们将使用 webGL 和 p5.js 创建一个 3D 几何图形并在各个方向上旋转它。

Javascript

// 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
}

输出：

示例 2：在此示例中，我们将使用 webGL 和 p5.js 创建一个 3D 几何图形，使用图像作为几何图形的一侧，并将其向各个方向旋转。

Javascript

// 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
}

输出：