three.js、テクスチャの貼り込み

什器にテクスチャを貼り込みました!
単一モデルとしてロードした場合の、
部分的なマテリアル変更方法が分からないので、
モデルを素材単位に小分けして再ロードしました。
テクスチャの貼り方はUVマップで指定してます。

http://www.subgrid.jp/texturetest/threetest-170312.html

アレレ? サーバーにアップした途端、
テクスチャを貼り込んだ部分が真っ黒になってます、、、
マップファイルとのリンクが切れちゃったようですね。

今回はOBJ形式の3Dモデルを読み込んでますが、
マテリアル情報はMTLという別ファイルから渡されています。
このファイルをコードエディターで開いてみると、、、

ありました!
マップファイルの指定パスがウチのPCになってます、苦笑
パスを修正して再アップ、、、
今度はテクスチャもきっちり表示されております!

http://www.subgrid.jp/threetexture/threetest-170313.html

MTLファイルには複数のマテリアル情報が格納できるので、
マテリアル設定はthree.js側ではなく、MTL側に実装して、
素材ごとに小分けしていたモデルを単一に戻して再ロード。

http://www.subgrid.jp/threetexture/threetest-170313_fix.html

同じ結果が得られました!
これでモデルの書き出し、three.jsの記述が楽になります。

MTLでマテリアルとポリゴンが紐付けされ、
three.jsがポリゴンのUV情報を使って、
MTLが指定するマップを描画するって感じですかね〜

余談になりますが、MTLの記述を直接編集して、
ケース内の布地の光沢をなくしています。

コメントを残す

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