3Dオブジェクトをサイトに表示する方法の一つにSketchfabを使用するという選択肢があります。
Sketchfabとは、3Dモデルの共有サイトで、ここで取得したコードをサイトて埋め込むことによって、サイト上に簡単に3Dデータを表示させることができます。
今回はBlenderで作成した3DオブジェクトをSketchfabで表示する方法について解説します。
1）Sketchfabのアカウント作成
サイトの右上にある「SIGN UP」のボタンをクリックすると、登録用フォームが表示されるのでメールアドレスとパスワードを入れるか、SNSアカウントでログインして新たにアカウントを作成します。
2）3Dオブジェクトを用意する
今回は、Blenderで作成した3Dオブジェクトを使用します。
使用したいオブジェクトのBlenderファイルを開いて、ファイルメニュー＞エクスポートから「fbx形式」を選択して任意の場所に3Dデータを格納します。
その他Sketchfabが対応している3Dモデルの対応形式は以下の通りです。
・3DC point cloud (.3dc)
・3DS (.3ds)
・ac3d (.ac)
・ASCII (.asc)
・Biovision Hierarchy (.bvh)
・Blender (.blend)
・Carbon Graphics Inc (.geo)
・Collada (.dae)
・Design Web Format (.dwf)
・Designer Workbench (.dw)
・DirectX (.x)
・FBX (.fbx)
・Generic Tagged Arrays (.gta)
・Kerbal Space Program (.mu)
・Keyhole Markup Language (.kmz)
・Lightwave (.lwo .lws)
・Open Flight (.flt)
・Open Inventor (.iv)
・OpenSceneGraph (.osg .osgt .osgb .ive)
・Polygon File Format (.ply)
・Shape (.shp)
・Standard Tessellation Language (.stl)
・Valve (.vpk)
・Virtual Reality Modeling Language – VRML (.wrl, .wrz)
・Wavefront (.obj)
【エクスポートする際の注意点】
①fbx以外の形式でエクスポートすると色情報が保存されない。
②Blender内で非表示にしているオブジェクトも書き出されてしまう（不要なデータは削除しておく）
③書き出し前にできるだけスムースシェードはかけておく。
④モディファイアやテクスチャはfbx形式で書き出したときに適用されないので、必ず適用させてから書き出す。
3）Sketchfabにデータをアップロードする
①右上の「UPLOAD」ボタンをクリックして、3Dデータを選択するかドラッグ＆ドロップでデータをアップロードします。
②ファイルのアップロードが完了すると掲載内容を記入するフォームが表示されるので、必要に応じて記入してください。
Model name：3Dモデルのタイトル
Description：3Dモデルについての説明
Categories：カテゴリー
Tags：タグ（コンマで区切りを入れ複数入力ができます）
Private mode：限定公開（有料プランのみ）
Allow Download：ダウンロードの許可（Yesにすると3Dモデルがダウンロードできるようになります）
SketchfabでBlenderモデルを編集する
編集画面でさまざまな調整を行うことができます。
一般設定
モデルの傾き加減やカメラの位置、背景色などを調整することができます。
ライティング設定
モデルがどんな環境に置かれているのかを選択して、ライティングの概要を選択することができ、その下のオプションでさらに細かい調整をしていきます。
モデルとともにアップロードした照明の位置を動かして調整したり、照明の数を増やしたりすることも可能です。影についての調整もこのタブで行います。
マテリアル設定
モデルをアップロードした際に、色など大まかなマテリアルはBlenderで作ったものに準じていますが、このマテリアルタブでは細かい調整をかけることができます。
一般設定タブで背景色を変えたり、ライティングタブで照明を変えたりしたのに合わせて、ガラスや金属などの質感を調整していきます。
アニメーション設定
アニメーションのついたモデルであれば、再生速度やループの設定などを行うことができます。
AR・VR設定
作ったモデルをARやVRとして見せる機能です。AR・VRタブをクリックすると、AR・VRとして見た際にどう見えるか、スケールなどの調整をすることができます。
4）埋め込みコードを取得して、サイトで表示させる
公開が完了すると、モデルの下に「Embed」というオプションが小さく出てきます。それをクリックすると、以下の画面が開きます。下図の赤枠で囲まれた箇所がHTMLコードになるので、サイズなどを設定してコピーします。
コピーしたコードをサイトの任意の場所に張り付ければ3Dオブジェクトを表示させることができます。