p5.js 3D模型（model）入门指南

德育处主任

发布于 2026-07-22 08:09:12

140

文章被收录于专栏：前端数据可视化前端数据可视化

什么是 model ()？为什么需要它？

在 p5.js 中，model()是专门用来绘制 3D 模型的 "画笔"。它的作用很简单：把一个提前准备好的 3D 几何对象（p5.Geometry）画到画布上。

但有个关键前提：必须在 WebGL 模式下使用。因为 3D 绘图需要 WebGL 的 3D 渲染能力，普通 2D 画布（默认模式）不支持！

核心概念：p5.Geometry 对象

model()的参数必须是p5.Geometry类型 —— 你可以把它理解为 "3D 模型的数字描述"（包含顶点、面、颜色等信息）。

怎么得到p5.Geometry？有两种方式：

自己创建：用buildGeometry()或beginGeometry()+endGeometry()手动定义形状；
加载外部文件：用loadModel()导入.obj 格式的 3D 模型文件（比如从 Blender 导出的模型）。

基础用法

步骤 1：创建 WebGL 画布

用createCanvas(width, height, WEBGL)开启 3D 模式：

function setup() {
  createCanvas(400, 400, WEBGL); // 最后一个参数WEBGL是关键！
}

步骤 2：准备 p5.Geometry 对象

可以自己画一个简单形状，比如圆锥：

let myModel; // 存储3D模型

function setup() {
  createCanvas(400, 400, WEBGL);
  // 用buildGeometry创建模型：传入一个画形状的函数
  myModel = buildGeometry(drawCone); 
}

// 定义要画的形状（这里画一个圆锥）
function drawCone() {
  cone(50, 100); // 圆锥：底面半径50，高100
}

步骤 3：用 model () 绘制

在draw()里调用model(你的模型)就能显示了：

function draw() {
  background(200); // 灰色背景
  model(myModel); // 画出准备好的模型
}

完整代码

let myModel; // 存储3D模型

function setup() {
  createCanvas(400, 400, WEBGL);
  // 用buildGeometry创建模型：传入一个画形状的函数
  myModel = buildGeometry(drawCone); 
}

// 定义要画的形状（这里画一个圆锥）
function drawCone() {
  cone(50, 100); // 圆锥：底面半径50，高100
}

function draw() {
  background(200); // 灰色背景
  model(myModel); // 画出准备好的模型
}

允许鼠标操作

orbitControl()是 3D 绘图的常用工具，让你能 360° 查看模型。

function draw() {
  background(200); // 灰色背景
  orbitControl(); // 允许鼠标拖拽旋转视角（3D必备交互）
  model(myModel); // 画出准备好的模型
}

采用前面的代码，然后在 draw() 里加入一句 orbitControl() 即可。

以上就是本文的全部内容啦，想了解更多 P5.js 用法欢迎关注《P5.js中文教程》。

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2026-07-22，如有侵权请联系 cloudcommunity@tencent.com 删除

入门

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

登录后参与评论

0 条评论

热度