p5.js 從零開始創建 3D 模型，createModel入門指南詳情 - canvas,p5.js 德育處主任動態日志

點贊 + 關注 + 收藏 = 學會了

如果你已經開始探索 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();
}

一個可用鼠標拖拽姿態的彩色旋轉立方體。

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

也可以➕我 green bubble 吹吹水咯