Everyday Pieces ::
  • Webサービス
  • ブログパーツ
  1. ホーム
  2. プログラミング

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

2020年10月9日 プログラミング 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 改」を試すにはこちらからどうぞ。
他の機能の説明とかも書いてあります。

関連記事
three.jsで遊んでみる(46) three.jsで遊んでみる(45) three.jsで遊んでみる(44) three.jsで遊んでみる(42) three.jsで遊んでみる(41) three.jsで遊んでみる(40) three.jsで遊んでみる(39) three.jsで遊んでみる(38) three.jsで遊んでみる(37) three.jsで遊んでみる(36) three.jsで遊んでみる(35) three.jsで遊んでみる(34) three.jsで遊んでみる(33) three.jsで遊んでみる(32) three.jsで遊んでみる(31) three.jsで遊んでみる(30) three.jsで遊んでみる(29) three.jsで遊んでみる(28) three.jsで遊んでみる(27) three.jsで遊んでみる(26) three.jsで遊んでみる(25) three.jsで遊んでみる(24) three.jsで遊んでみる(23) three.jsで遊んでみる(22) three.jsで遊んでみる(21) three.jsで遊んでみる(20) three.jsで遊んでみる(19) three.jsで遊んでみる(18) three.jsで遊んでみる(17) three.jsで遊んでみる(16) three.jsで遊んでみる(15) three.jsで遊んでみる(14) three.jsで遊んでみる(13) three.jsで遊んでみる(12) three.jsで遊んでみる(11) three.jsで遊んでみる(10) three.jsで遊んでみる(9) three.jsで遊んでみる(8) three.jsで遊んでみる(7) three.jsで遊んでみる(6) three.jsで遊んでみる(5) three.jsで遊んでみる(4) three.jsで遊んでみる(3) three.jsで遊んでみる(2) three.jsで遊んでみる

コメントする キャンセル

アドレスが公開されることはありません。が付いている欄は必須項目です。

投稿ナビゲーション

three.jsで遊んでみる(42)
家計簿ならぬ支出簿なサービスを作ってみた(8)

カテゴリー

WordPress つぶやき トピック プログラミング

タグ

AS3 enchant.js FamilyTreeVis Flash Geolocation gif.js kinect Linux MMD MoneyTrackNote notifier.js OpenCV PDFカレンダー RISC-V three.js セキュリティ テーマ自作 ブログパーツ 動物 動画 麻雀

アーカイブ

© Everyday Pieces ::