glTF（GLB）形式の企業3Dロゴをサイトに実装

今回、合同会社キューブリックのサイトロゴを3Dで制作しました。

作ってくれたのは、同じプログラミングスクール出身の友人です。現在は3Dを専門に学んでいて、せっかく立体で作ってもらったので、静止画像に書き出すのではなく、そのままWeb上で表示する形にしました。

ロゴデータは glTF（GLB）形式を採用

ロゴデータは glTF（GLB）形式で書き出しています。

glTFはWeb向けに設計された3Dフォーマットで、軽量かつ扱いやすいのが特徴です。GLBはそのバイナリ版で、テクスチャなどを含めて1ファイルにまとまります。

Web配信を前提とするなら、有力な選択肢のひとつです。

GLBファイルのブログ実装方法

今回は実装コストを抑えるため、3Dビューアサービスの Sketchfab を利用しています。WebGLの実装やThree.jsのコードを書く必要がないため、検証や導入段階としては扱いやすい方法です。

手順はシンプルです。

1. GLBファイルをアップロード
2. 表示設定を調整
3. 発行されるiframeコードを取得
4. HTMLに貼り付け

Sketchfabのiframeを貼り付けるだけで、ブラウザ上に3Dモデルを表示できます。

まとめ

3Dロゴというと大げさに聞こえるかもしれませんが、glTF（GLB）形式と外部サービスを組み合わせれば、比較的手軽にWebへ組み込むことができます。

今回は実験的な取り組みですが、表現の幅としては面白い選択肢のひとつだと感じています。