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

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

如果你已经开始探索 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)

返回值：一个 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();
}

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

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

也可以➕我 green bubble 吹吹水咯

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

本作品采用《CC 协议》，转载必须注明作者和本文链接