p5.js 从零开始创建 3D 模型，createModel入门指南

德育处主任

发布于 2026-05-20 08:06:07

620

如果你已经开始探索 p5.js 的 3D 世界，那么createModel()这个 API 绝对是你需要掌握的强大工具。它允许你创建自定义的 3D 几何模型，为你的创意提供无限可能。

什么是 createModel ()？

createModel() 用于从一个 OBJ 或 STL 格式的 字符串 中加载 3D 模型，并返回一个 p5.Geometry 对象。它适用于已经以文本形式（例如通过 loadStrings() 读取文件后拼接的字符串）拿到模型数据的场景。

为什么要用 createModel()？

当你想在运行时动态获取模型（比如用户上传、通过网络接口拿到纯文本 OBJ/STL）并立即生成几何体时，createModel() 十分方便。
如果只是从本地或服务器文件直接加载，更常用的是 loadModel()，它会返回同样的 p5.Geometry。

语法

let geom = createModel(modelString, fileType, normalize, successCallback, failureCallback)

参数名	类型	说明
modelString	String	必填，OBJ/STL 文件的文本内容。通常通过 loadStrings() 或者从服务器拉取后用 join('\n') 拼接。
fileType	String	必填，模型格式，'obj' 或 'stl'（不含点号）。
normalize	Boolean	可选，是否在加载时对模型做统一缩放。若 true，自动根据模型最大边长进行缩放，便于在画布中展示。
success	Function	可选，加载成功后的回调，参数为得到的 p5.Geometry 对象。
failure	Function	可选，加载失败后的回调，参数为事件错误对象。
flipU, flipV	Boolean	可选，是否翻转 U/V 纹理坐标（OBJ/STL 若带纹理时使用）。

返回值：一个 p5.Geometry 实例，你可以直接用 model(geometry) 在 draw() 中渲染。

基础 Demo：加载并绘制一个立方体

写一个最简立方体的 OBJ 文本，然后用 createModel() 加载并画出来。

let cubeGeo;  // 存放 p5.Geometry

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

  // 定义一个简单立方体的 OBJ 文本（8 个顶点，6 个面）
  const cubeObj = `
v -1 -1  1
v  1 -1  1
v  1  1  1
v -1  1  1
v -1 -1 -1
v  1 -1 -1
v  1  1 -1
v -1  1 -1
f 1 2 3 4
f 5 6 7 8
f 1 5 8 4
f 2 6 7 3
f 1 2 6 5
f 4 3 7 8`;

  // 加载几何体：传入字符串、格式、归一化为 true
  cubeGeo = createModel(cubeObj, '.obj', true, 
    // 加载成功回调（可选）
    function(g) {
      console.log('模型加载完成，共有顶点：', g.vertices.length);
    },
    // 加载失败回调（可选）
    function(err) {
      console.error('模型加载失败：', err);
    }
  );
}

function draw() {
  background(30);
  orbitControl();              // 支持拖拽旋转视角
  ambientLight(100);
  directionalLight(255, 255, 255, 0.5, 1, -0.5);

  push();
    rotateY(frameCount * 0.01);
    rotateX(frameCount * 0.008);
    normalMaterial();          // 根据法线给模型着色
    model(cubeGeo);            // 渲染几何体
  pop();
}

一个可用鼠标拖拽姿态的彩色旋转立方体。

以上就是本文的全部内容啦。

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

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

对象