點(diǎn)贊 + 關(guān)注 + 收藏 = 學(xué)會(huì)了
如果你已經(jīng)開(kāi)始探索 p5.js 的 3D 世界，那么createModel()這個(gè) API 絕對(duì)是你需要掌握的強(qiáng)大工具。它允許你創(chuàng)建自定義的 3D 幾何模型，為你的創(chuàng)意提供無(wú)限可能。
什么是 createModel ()？
createModel() 用于從一個(gè) OBJ 或 STL 格式的 字符串 中加載 3D 模型，并返回一個(gè) p5.Geometry 對(duì)象。它適用于已經(jīng)以文本形式（例如通過(guò) loadStrings() 讀取文件后拼接的字符串）拿到模型數(shù)據(jù)的場(chǎng)景。
為什么要用 createModel()？
- 當(dāng)你想在運(yùn)行時(shí)動(dòng)態(tài)獲取模型（比如用戶上傳、通過(guò)網(wǎng)絡(luò)接口拿到純文本 OBJ/STL）并立即生成幾何體時(shí)，
createModel()十分方便。 - 如果只是從本地或服務(wù)器文件直接加載，更常用的是
loadModel()，它會(huì)返回同樣的p5.Geometry。
語(yǔ)法
let geom = createModel(modelString, fileType, normalize, successCallback, failureCallback)
| 參數(shù)名 | 類型 | 說(shuō)明 |
|---|---|---|
modelString |
String |
必填，OBJ/STL 文件的文本內(nèi)容。通常通過(guò) loadStrings() 或者從服務(wù)器拉取后用 join('\n') 拼接。 |
fileType |
String |
必填，模型格式，'obj' 或 'stl'（不含點(diǎn)號(hào)）。 |
normalize |
Boolean |
可選，是否在加載時(shí)對(duì)模型做統(tǒng)一縮放。若 true，自動(dòng)根據(jù)模型最大邊長(zhǎng)進(jìn)行縮放，便于在畫(huà)布中展示。 |
success |
Function |
可選，加載成功后的回調(diào)，參數(shù)為得到的 p5.Geometry 對(duì)象。 |
failure |
Function |
可選，加載失敗后的回調(diào)，參數(shù)為事件錯(cuò)誤對(duì)象。 |
flipU, flipV
|
Boolean |
可選，是否翻轉(zhuǎn) U/V 紋理坐標(biāo)（OBJ/STL 若帶紋理時(shí)使用）。 |
返回值：一個(gè) p5.Geometry 實(shí)例，你可以直接用 model(geometry) 在 draw() 中渲染。
基礎(chǔ) Demo：加載并繪制一個(gè)立方體
寫(xiě)一個(gè)最簡(jiǎn)立方體的 OBJ 文本，然后用 createModel() 加載并畫(huà)出來(lái)。
let cubeGeo; // 存放 p5.Geometry
function setup() {
createCanvas(400, 400, WEBGL);
// 定義一個(gè)簡(jiǎn)單立方體的 OBJ 文本（8 個(gè)頂點(diǎn)，6 個(gè)面）
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,
// 加載成功回調(diào)（可選）
function(g) {
console.log('模型加載完成，共有頂點(diǎn)：', g.vertices.length);
},
// 加載失敗回調(diào)（可選）
function(err) {
console.error('模型加載失?。?, err);
}
);
}
function draw() {
background(30);
orbitControl(); // 支持拖拽旋轉(zhuǎn)視角
ambientLight(100);
directionalLight(255, 255, 255, 0.5, 1, -0.5);
push();
rotateY(frameCount * 0.01);
rotateX(frameCount * 0.008);
normalMaterial(); // 根據(jù)法線給模型著色
model(cubeGeo); // 渲染幾何體
pop();
}
一個(gè)可用鼠標(biāo)拖拽姿態(tài)的彩色旋轉(zhuǎn)立方體。
以上就是本文的全部?jī)?nèi)容啦，想了解更多 P5.js 用法歡迎關(guān)注 《P5.js中文教程》。
也可以?我 green bubble 吹吹水咯
點(diǎn)贊 + 關(guān)注 + 收藏 = 學(xué)會(huì)了
