【p5.js】3Dモデルの表示:preload(),loadModel(),model()

p5.jsは、3Dモデルを表示することができます。preload()内で予め3Dモデルを読み込みます。その後、setup()やdraw()内で適宜処理します。preload()内では、3Dモデルの他に画像や音楽、動画、JSONデータなどが読み込めます。

3Dモデルの読み込みと表示:preload(),loadModel(),image()

• preload():3Dモデルなどを読み込んでおく場所
• loadModel():3Dモデルの読み込み
• model():3Dモデルの表示

※3Dモデル読み込み時の注意点。p5.jsでは、同じドメイン内からしか3Dモデルを読み込めません。そのため、ローカル環境などを用意しないと3Dモデルの表示を確認できません。

サンプル

ティーポッドの3Dモデルを表示してみます。モデルデータは、各自で用意してください。

let teapot;

function preload(){
  //3Dモデルの読み込み
   teapot = loadModel('./teapot.obj');
}

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

function draw(){
  background(255, 255, 255);
  scale(30.0);
  rotateX(frameCount * 0.01);
  rotateY(frameCount * 0.01);
  //3Dモデルの表示
  model(teapot);
}

ここで、httpサーバを⽴てて表示を確認します。

python3 -m http.server 8000

ブラウザで「http://localhost:8000」にアクセスして、表⽰を確認します。以下はデモ画像です。

まとめ

• preload():3Dモデルなどを読み込んでおく場所
• loadModel():3Dモデルの読み込み
• model():3Dモデルの表示
• ローカル環境などで表示を確認する