p5.js | 模型()函数

p5.js是一款用于创意编程的JavaScript库，它提供了一系列的API，可以让开发者创建各种交互式的图形、动画和媒体应用。其中，模型()函数就是p5.js中用于创建3D模型的一个重要函数。

实现方法

调用createModel()函数可以创建一个3D模型，该函数返回一个p5.Geometry对象，然后我们就可以在这个对象上进行一系列的操作，比如添加顶点、添加面、设置纹理等。最后，调用createModel()函数的返回值即可生成模型。

function setup() {
  createCanvas(400, 400, WEBGL);
}

function draw() {
  background(220);
  
  // 创建一个新的模型
  let model = createModel();
  
  // 添加顶点
  model.vertex(0, 0, 0);
  model.vertex(50, 0, 0);
  model.vertex(50, 50, 0);
  
  // 添加面，并设置纹理
  for (let i = 0; i < 3; i++) {
    let v1 = (i + 0) % 3;
    let v2 = (i + 1) % 3;
    let v3 = (i + 2) % 3;
    let tex1 = createVector(0, 0);
    let tex2 = createVector(1, 0);
    let tex3 = createVector(1, 1);
    let face = [v1, v2, v3, tex1, tex2, tex3];
    model.addFace(face);
  }
  
  // 生成模型
  let pg = createGraphics(100, 100);
  let texture = pg.get();
  let m = createModel(texture);
  m.addGeometry(model);
  
  // 绘制模型
  rotateX(frameCount * 0.01);
  rotateY(frameCount * 0.01);
  model(m);
}

参数说明

p5.Geometry对象有以下一些方法:

• vertex(x, y, z): 添加一个顶点，参数分别为x、y、z坐标
• addFace(face): 添加一个面，face参数为一个包含6个元素的数组，分别为三个顶点的索引和三个纹理坐标的向量。
• noFill(): 不填充面
• noStroke(): 不描边面
• texture(texture): 设置纹理
• m(material): 设置材质
• drawMode(mode): 设置绘制模式，常用选项有TRIANGLES（三角形）、TRIANGLE_STRIP（三角形条）和QUADS（四边形）等等。

示例

以下是一个使用vertex()方法绘制一个方体的例子。

let model;

function setup() {
  createCanvas(400, 400, WEBGL);
  model = createModel();
  
  // 上表面
  model.vertex(-50, -50, 50);
  model.vertex(50, -50, 50);
  model.vertex(50, 50, 50);
  model.vertex(-50, 50, 50);
  
  // 下表面
  model.vertex(-50, -50, -50);
  model.vertex(50, -50, -50);
  model.vertex(50, 50, -50);
  model.vertex(-50, 50, -50);
  
  // 左侧面
  model.vertex(-50, -50, 50);
  model.vertex(-50, -50, -50);
  model.vertex(-50, 50, -50);
  model.vertex(-50, 50, 50);
  
  // 右侧面
  model.vertex(50, -50, 50);
  model.vertex(50, -50, -50);
  model.vertex(50, 50, -50);
  model.vertex(50, 50, 50);
  
  // 前侧面
  model.vertex(-50, -50, 50);
  model.vertex(50, -50, 50);
  model.vertex(50, -50, -50);
  model.vertex(-50, -50, -50);
  
  // 后侧面
  model.vertex(-50, 50, 50);
  model.vertex(50, 50, 50);
  model.vertex(50, 50, -50);
  model.vertex(-50, 50, -50);
}

function draw() {
  background(220);
  noStroke();
  fill(255, 0, 0);
  model(model);
  rotateX(frameCount * 0.01);
  rotateY(frameCount * 0.01);
}

总结

通过使用createModel()函数和p5.Geometry对象，我们可以轻松地在p5.js中创建3D模型。在使用过程中需要记住各种方法的参数和使用方法，这是创建高质量、复杂的模型的关键。