three.jsで遊んでみる(43)

プログラミングMMD,three.js

 3Dプリンターでよく使われるデータにSTLというのがあります。
中身は3Dモデルを構成するポリゴンを列挙した感じになってます。
こちらにファイル形式の詳細が書かれています。
要するに、右手系の順に並んだ3角形の頂点値とその法線値の組が並んだものです。
法線は3つの頂点値から計算できるので、無くても構わないはずですが、
面の表裏を判定するためにあるようです。
(でも、裏面って必要なのだろうか?)

 3Dプリンタで使われるくらいだから、
もっと複雑な内容なのかと思っていたのですが、
意外にシンプルなのですね。
モデルを構成する3角形の頂点値を列挙し、
法線値を計算するだけなので、
割と簡単にやれそうです。

 そこで、
拙作の「MMD Viewer 改」でもやってみることにした次第です。
とは言っても、自分は3Dプリンターを持っていませんので、
実際に試して確認することが出来ません(^_^;)
また、モデルデータによっては表面が閉じていない場合もあるかもしれません。
つまり中身が詰まったような物体を構成できなかったりして、
3Dプリントするのに実用的でない可能性もあります。
また髪の毛の先とかが鋭く尖っていたりするので、
特に積層型プリンタの場合は無理な場合もありそうです。

 なので、
あくまで実験的な機能ということで作りました。
ご了承ください(^_^;)

 実装にあたっては、
シェーダーでやっていることを自前でやるような感じとなりました。
GLSLをJavaScriptで再現するだけなので、
簡単かと思っていたのですが、割と面倒でした(^_^;)
まぁ地道にやったらどうにかなりました。

 本来、
STLには面に対する色情報とかないのですが、
一応、色付きSTLというのがあるようです。
おそらく非公式な形式になるのだろうと思われます。
せっかくなので色付きをやってみることにしました。
MMDモデルデータのマテリアルにあるdiffuse色を使いました。
さすがにテクスチャマップまでは再現できないので、
実際の色と異なる場合があると思います。
なので、あくまで目安程度な感じになります。
色付きSTLについてはこちらを参考に実装しました。

 ということで、
STLファイルの出力結果は以下のような感じになりました。
STLの表示にはこちらのツールを使いました。

 ということで、
STLダウンロード機能を追加した「MMD Viewer 改」を試すにはこちらからどうぞ。
他の機能の説明とかも書いてあります。

Posted by 管理人