3Dデータの活用方法
3Dデータをweb上に公開する方法をご紹介します。
3Dスキャナーや、ドローンを使い3Dデータを作り、それを製品のプロモーションや会社のプロモーションに使用したいと思っている方も多いと思います。
最近はweb上でもよく目にするようになりました。
glTFを使ってみる
3Dデータは様々な種類があります。
代表的なものとして STLやOBJ、VRML、3MFなど…ご存じの方も多いかと思います。
web上で上記の形式で公開する方法もありますが、今回はwebで公開するのに適しているglTFを使ってみようと思います。
glTFとは？
画像ファイルはjpg,png、音楽であればMP3、動画ならMP4が一般的です。
glTFとは、3Dデータの上記のような存在を目指しているものです。
webGLやOpenGLを始めとする3Dランタイム向けのファイルです。
glTF (GL Transmission Format) はJSONによって3Dモデルやシーンを表現するフォーマットである。「3DにおけるJPEG」と表現されることもある。Khronos Group 3D Formats Working Groupによって開発され、APIを問わないランタイムアセット配布フォーマットとしてHTML5DevConf 2016において発表された。glTFは3Dシーンを圧縮し、WebGLなどのAPIを利用するアプリケーションの実行時処理を最小化する、効率的で相互運用可能なアセット配布フォーマットとなることを意図している。glTFはまた、3Dコンテンツ作成ツールやサービスのための共通発行フォーマットを定義している。
https://ja.wikipedia.org/wiki/GlTF
使い方
当社のホームページはWordpressを使用しています。
ここに、先日撮った社屋の3Dデータを公開してみます。
- データ準備
3Dデータはあることを前提としています。
お手持ちの3DデータをBlenderで開き、適宜最適化してglTFをエクスポートします。
（RealityCaptureからもエクスポートできます）
- WordPressへアップロード
WordPressへglTFをアップロードします。
通常の設定ですと、glTFの拡張子がアップロードできないとエラーが出ます。
このあたりはgoogleで調べると色々と情報が出てきますので、
wordpressの設定ファイルを編集して対応してみてください。 - 埋め込み
wordpressのコードエディタでアップロードしたファイルを埋め込みます。
埋め込みたい箇所に下記のコードを入れます。
<script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"></script>
<model-viewer id="reveal" loading="lazy" camera-controls="" auto-rotate="" poster="Loading画面の画像URL" src="2.でアップロードしたgltfファイルのURL" exposure="0.6" alt="pancake" style="width: 100%; height: 400px;"></model-viewer><script・・・>はwordpressのヘッダーファイル内に入れるほうが良いかもしれません。
実際埋め込んだものがこちらです。
如何でしょうか？こちらは社屋の3Dデータです。
（34枚だけしか写真を撮っていませんので、荒くて申し訳ございません。。）
製品紹介や会社紹介のページのインパクトが変わってくると思います。
いろいろな方向から製品をじっくり見て頂き、
まるで店頭で商品を見ている感覚にもなると思います。
Arcana製作所ではFacTransというブランドで3Dスキャナーを開発・提供させていただいております。
3Dスキャナーの活用方法の一例を紹介させて頂きましたが、このようなwebへの埋め込みの支援もさせて頂きますので、お問い合わせ頂ければ幸いです。
