p5.js | loadModel() 函数

简介

loadModel() 是 p5.js 中的一个函数，用于在 p5.js 的画布中加载 3D 模型。它可以加载格式为 OBJ、STL、JSON 的模型文件，让开发者能够在 p5.js 的环境中展示和操作这些模型。

语法

loadModel(path, [loadModelCallback], [texturePath])

• path：指定模型文件的路径。
• loadModelCallback (可选)：在模型加载完成后需要执行的回调函数。
• texturePath (可选)：指定贴图图片的路径。

用法示例

以下是 loadModel() 函数的一个简单示例：

let model;

function preload() {
  model = loadModel('model.obj', modelLoaded);
}

function setup() {
  createCanvas(windowWidth, windowHeight, WEBGL);
}

function draw() {
  background(220);
  
  if (model) {
    rotateX(frameCount * 0.01);
    rotateY(frameCount * 0.01);
    model(100); // 设置模型的缩放大小
  }
}

function modelLoaded() {
  console.log('模型加载完毕');
}

说明

• loadModel() 必须在 preload() 函数中进行调用。这是由于加载 3D 模型是一个异步的过程，需要在 setup() 函数之前完成加载。
• 可以通过回调函数 loadModelCallback 来在模型加载完成后执行一些操作。
• 使用 createCanvas(windowWidth, windowHeight, WEBGL); 可以创建一个支持 3D 渲染的画布。
• 在 draw() 函数中，使用 rotateX() 和 rotateY() 函数可实现模型的旋转效果。
• model() 函数用于在画布中绘制加载的模型，传入一个缩放大小的参数，使模型根据指定的尺寸进行绘制。

适用场景

• 在 p5.js 中展示和操作 3D 模型。
• 创建交互式的 3D 环境。
• 在网页中显示用户自定义的 3D 模型。

请注意，在使用 loadModel() 函数之前，确保已经正确引入了 p5.js 库和所需的模型文件。

了解更多关于 p5.js 文档

代码片段：