当前位置：首页 > news >正文

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

news 2025/7/30 6:06:10

点赞 + 关注 + 收藏 = 学会了

如果你已经开始探索 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.Geometryfunction 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`;// 加载几何体：传入字符串、格式、归一化为 truecubeGeo = 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();
}