今回はBlenderとthree.jsを用いて、ウェブサイトにスリッパの3Dモデルを表示してみました。
手順が少しややこしかったので、あメログ。
インストール
あまプロではUbuntuを使いますので、Ubuntuソフトウェアから簡単にBlenderをインストール出来ます。
日本語化
デフォルトではＵＩが英語表記になっているので、File -> User Preferences -> System -> International Fontsをオンにします。これだけでは文字化けするので、Interface fontに適当な（/usr/share/fonts/truetype/fonts-japanese-gothic.ttf等）日本語フォントを指定します。
アドオンのインストール
Blenderで作成したオブジェクトをthree.jsで表示するにはglTF（またはそのバイナリ形式のglb）形式に変換する必要が有ります。glTFはWebGLを用いて3D表示する為に策定されたファイル形式です。
Blenderの標準機能ではオブジェクトをglTF形式へエクスポートする機能が有りませんので、アドオンを別途追加します。
こちらからアドオンをダウンロードし、解凍して
Ubuntu（の１８．０４）の場合アドオンのパスは/usr/share/blender/scripts/addons/なので、
sudo cp -r glTF-Blender-Exporter-master/scripts/addons/io_scene_gltf2/ /usr/share/blender/scripts/addons/でコピーします。
ディストリビューションによってはパスが異なると思いますので、調べてみて下さい。
オブジェクトの作成
サイトに表示したいオブジェクトを作成します。デフォルトでは立方体が表示されているので、これを編集したり、新たにオブジェクトを増やすと良いでしょう。
今回は押し出しや細分割曲面を利用してスリッパのオブジェクトを作りしまた。
ＵＶマッピング
オブジェクトだけではちと寂しいですが、表面に画像を貼り付けてそれらしく見せる事が出来ます。対話モードを編集モードにして、スクリーンレイアウトをUV/Editingにします。
シェーディング/UVタブのUVマッピングをスマートUV投影にしてOKを押下します。
次にスクリーンレイアウトをDefaultに戻して、 プロパティのテクスチャの画像で先程の展開図を選択します。
何かこちょこちょやってたら偶に反映されます。方法は有るのでしょうが、判りませんでしたm( _ _)m。
エクスポート
作成したオブジェクトをエクスポートします。glTF形式でもglb形式でも構いませんが、今回はglb形式にしました。
ファイル -> エクスポート -> glTF 2.0(*.glb)をクリックします。
サイト組み込み
three.jsのサイトにサンプルが上がってますので、ここを参考に組み込む側のスクリプトを作成します。ローカルで動作さす場合はダウンロードしたライブラリを参照するだけで動きます。
ウェブで公開する場合は、glbファイルとライブラリファイルもアップする必要が有ります。
ライブラリの配置が難しい場合はライブラリのCDNを使うと良いでしょう。
別ドメインにglb（またはglTFファイル）を置く場合
3Dモデルを表示したいjimdoにはglbファイルをアップ出来ませんでしたので、別途GCPのバケットに置く事にしました。その場合、リソースのドメインが異なりますので、クロスオリジン リソース シェアリング（CORS）の制約に引っ掛かります。
なので、ここを参考にバケット側の設定を変更する必要が有ります。
レンタルサーバに選ってはglbファイルもアップ出来ますので、CORS対応は不要です。
Facebookの3D投稿
glb形式でエクスポートすると、facebookに3Dモデルを投稿出来ます。２０１８年７月現在glb形式のみで、glTF形式には対応してない様です。
ファイルサイズの制限等、詳しい方法はこちらをご覧下さい。
PCからの投稿方法は簡単で、投稿欄へglbファイルをドラッグ・アンド・ドロップするだけです。
画像や動画のファイル選択からglbファイルを指定しても表示されませんのでご注意を。
こんな感じでfacebookにスリッパを投稿出来ました。
ライブラリの配置もCORSの設定も不要なので、（表示するだけなら）めちゃ楽です〜。
まとめ
ざっとこんなもんで、サイトに3Dモデルを表示する事が出来また。みんなのサマーセミナーのサイトをWebGLに対応したブラウザで表示するとスリッパが表示されますので、楽しんでみて下さい。
0 件のコメント:
コメントを投稿
つっこみ