https://shiroyuki2020.hatenablog.com/entry/p5js

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);
}