p5.js入门学习-基本形状(3D)

95 阅读1分钟

WebGL是一种基于OpenGL的3D绘图标准,它可以让你在浏览器中使用JavaScript API来呈现交互式3D和2D图形。在本示例中,我们将探索如何使用WebGL来创建3D形状。

function setup() {
  // 创建WEBGL画布:710 * 400
  createCanvas(710, 400, WEBGL);
  noLoop();
}
function draw() {
  background(100);
  noStroke();
  fill(50);
  // 使用转换函数之前,需要使用push以及pop函数包裹一下
  push();
  // 坐标移动
  translate(-275, 175);
  // 旋转
  rotateY(1.25);
  rotateX(-0.9);
  // 创建方块
  box(100);
  pop();
  noFill();
  stroke(255);
  push();
  // 坐标移动
  translate(500, height * 0.35, -200);
  // 创建球体
  sphere(300);
  pop();
}
new p5();

p5js 开源社区 - 乐述云享 (aleshu.com)