Blenderで作成したモデルをp5.jsで読み込む

Blenderで作成したモデルをp5.jsで読み込む方法です。

Blenderでモデリング

今回、モデリングの詳細は省きます。 下の動画を参考に犬をモデリングしてみました。

blenderで犬をつくってみよう01 初期設定・モデリング - YouTube

Blender側でマテリアルの設定などは必要なく、純粋なモデルを作成するまでで良いです。

こちらが完成したモデルです。

Blenderでobjファイルでエクスポート

Blenderで作成したモデルは、p5.jsで読み込めるobjファイルとして保存します。

保存方法はメニューから

ファイル > エクスポート > Wavefront(.obj)

として名前をつけて保存します。

ここでは"dog.obj"として保存しておきます。

p5.jsでobjファイルを読み込む

p5.jsで先程保存したobjファイルを読み込みます。

loadModel()を使用して読み込みますが、画像などの読み込み同様preload()関数でロードします。

読み込んだモデルはmodel()で描画ができます。 このとき、scale()で適切な大きさに合わせる必要があります。 何もしないと、ものすごく小さいオブジェクトとして配置されてしまいます。

また、光源、マテリアルの設定をしないとのっぺりした描画になって、3Dに見えません。 下のサイトなどを参考に設定を行いました。

himco.jp

p5js.org

今回は、

• 環境光ambientLight()
• 点光源pointLight()
• スペキュラ(鏡面)マテリアルspecularMaterial()

を設定することで、3Dの質感を出しています。

点光源で水色の光を読み込んだモデルに当てて描画しました。 Blenderで作成したモデルをきちんと読み込んで、p5.jsで描画することができました。

以下がソースコードです。

function preload() {
    dog = loadModel('dog.obj');
}

function setup() {
   createCanvas(w, w, WEBGL);
   colorMode(HSB);
   noStroke();
   noLoop();
}

function draw(){
  background(0);

  ambientLight(10);
  pointLight(200, 100, 100, -w/2, -w/2, w);
  specularMaterial(100);

  translate(125,-50)
  rotateX(-PI/8);
  rotateY(PI/4);
  rotateZ(PI);
  scale(75);
  model(dog);
}