HTMLで3Dモデルを描画する

iPhone12からカメラにLiDARスキャナが搭載されました。

これにより、誰にでも簡単に3Dモデルを搭載することが可能になりそうです。

ウェブサイトに3Dデモを表示するケースも今後増えていくと思います。

今回は、簡単にHTMLで3Dモデルを描画する方法を紹介します。

model-viewerとは？

model-viewerとは、googleによるプロジェクトで、WEBで簡単に3DモデルやARを描画することができます。

公式によると以下のように解説されています。
『Easily display interactive 3D models on the web & in AR』

HTMLに埋め込むだけで、簡単に3DモデルをWebサイトに表示することが可能です。

デモ

See the Pen Untitled by masahiro nomura (@masahiroview) on CodePen.

コードについて

基本的には下記をするだけです。
①CDNを読み込む
②srcでモデルファイルを指定する

//①CDNを読み込む
<script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js">
 </script>

//②srcでモデルファイルを指定する
<model-viewer alt="cat" src="https://dl.dropbox.com/s/wqcx9rl6gyov3pn/apple.glb?dl=0" camera-controls></model-viewer>

利用できる3Dモデルファイルの種類について

読み込める3Dモデルのファイル形式はglTFもしくはglbです。

これ以外のファイルについては上記のいずれかに変換して表示する必要があります。

下記のような無料のコンバータもあるようです。

GLTF OBJ 変換 フリー、 gltfをobjに変換 オンライン

GLTFファイルをOBJに変換するための最高のWebアプリ。 オンラインGLTFからOBJへのコンバーターは、Windo...

miconv.com

まとめ

3Dモデルファイルを表示するのは、画像を表示するのと同じくらい簡単にできます。

昨今はiOSのLiDARスキャナ等のカメラの進化により、誰でも簡単に3Dモデルを作れるようです。

機会があれば、3Dモデルについても学習してみてはいかがでしょうか。

参考

・model-viewer公式ページ