3D関連

3Dデータをwebに公開する

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データを公開してみます。

  1. データ準備
    3Dデータはあることを前提としています。
    お手持ちの3DデータをBlenderで開き、適宜最適化してglTFをエクスポートします。
    (RealityCaptureからもエクスポートできます)

  2. WordPressへアップロード
    WordPressへglTFをアップロードします。

    通常の設定ですと、glTFの拡張子がアップロードできないとエラーが出ます。
    このあたりはgoogleで調べると色々と情報が出てきますので、
    wordpressの設定ファイルを編集して対応してみてください。
  3. 埋め込み
    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への埋め込みの支援もさせて頂きますので、お問い合わせ頂ければ幸いです。