P5.js 日本語リファレンス(loadModel)

このページでは[「P5.js 日本語リファレンス」] (https://qiita.com/bit0101/items/91818244dc26c767a0fe) の loadModel関数を説明します。

loadModel()

説明文

OBJファイル(頂点、法線などの情報が格納されているファイル)またはSTLファイル(3次元の立体形状を小さな三角形の集合体で表現しているファイル)から3Dモデルをロードします。

loadModel() は preload() 内に配置する必要があります。これによりそれ以降のコードが実行される前にモデルを完全にロードできます。

OBJおよびSTL形式の制限の1つは, 組み込みのスケール感がないことです。つまり, 異なるプログラムからエクスポートされたモデルは, サイズが大きく異なる可能性があります。モデルが表示されない場合は, 正規化されたパラメータを true に設定して loadModel() を呼び出してみてください。これにより、p5に適したスケールにモデルのサイズが変更されます。また、scale() を使用してモデルの最終的なサイズを変更することもできます。

カラーSTLファイルのサポートもありません。色付きのSTLファイルは、色のプロパティなしでレンダリングされます。

構文

loadModel(path, normalize, [successCallback], [failureCallback])

loadModel(path, [successCallback], [failureCallback])

パラメタ

• path
  String：ロードするモデルのパス

• normalize
  Boolean：trueの場合、ロード時にモデルを標準サイズにスケーリングします

• successCallback
  function(p5.Geometry)：モデルが読み込まれると呼び出される関数。 3Dモデルオブジェクトが渡されます(オプション)

• failureCallback
  function(Event)：モデルの読み込みに失敗した場合、イベントエラーで呼び出されます(オプション)

戻り値

p5.Geometry：p5.Geometryオブジェクト

例1

//回転するティーポットを描画します
function preload(){
  // normalizeパラメータをtrueに設定してモデルをロードします
  teapot = loadModel( 'https://dl.dropbox.com/s/29mn2slkvn3ojra/teapod.obj', true, loadingOk());
}

function setup(){
  createCanvas(100, 100, WEBGL);
}

function draw(){
  background(200);
  scale(0.4); //モデルをキャンバスに合わせるためにスケーリング
  rotateX(frameCount * 0.01);
  rotateY(frameCount * 0.01);
  
  // X軸に面するサーフェスは赤、Y軸に面するサーフェスは緑、
  // Z軸に面するサーフェスは青に設定
  normalMaterial();
  
  model(teapot); // 読み込んだモデルで描画
}

function loadingOk(loadModel){ 
  alert("モデルを読み込完了しました");
  return;
}

実行結果

著作権

p5.js was created by Lauren McCarthy and is developed by a community of collaborators, with support from the Processing Foundation and NYU ITP. Identity and graphic design by Jerel Johnson.

ライセンス

Creative Commons(CC BY-NC-SA 4.0) に従います。