3Dコンテンツの幅が広がる！model-viewerに表示した3Dモデルを画像として取得する方法

こんにちは、もしくはこんばんは。シロです！

model-viewerは、Web上で簡単に3Dモデルを表示できるJavaScriptライブラリです。

model-viewerには多くのオプションが用意されており、JavaScriptを使えば3Dモデルを画像として描画・取得することも可能です。

この記事では、model-viewerの機能を使って3Dモデルをimgタグに描画する方法をご紹介します。

できるようになること

この記事を読むと、model-viewerで表示した3Dモデルを画像として描画・取得できるようになります。

前提条件

• 3Dモデルをもっていること
• Blenderの基本操作ができること
• HTML,CSS,JavaScriptの基礎知識

ソースコードを解説

<model-viewer id="image" camera-controls="" touch-action="pan-y" interaction-prompt="none" src="path/to/gltf" ar="" alt="A 3D model of an astronaut">
  <button id="image-view">View</button>
</model-viewer>
<img id="model-image"src="path/to/image" width="512" height="512" style="border:1px solid #000; margin:auto; display:block;"></img>
<script>
const modelViewer = document.querySelector("model-viewer#image");
document.querySelector('#image-view').addEventListener('click', (event) => {
    var dataURL = modelViewer.toDataURL();
    document.querySelector('#model-image').src = dataURL;
});
</script>

ポイントは8行目のtoDataURL()メソッドです。

toDataURL()メソッドでmodel-viewerにレンダリングされている3Dモデルのスクリーンショットを取得することが可能です。

取得したスクリーンショットはdataURLという形式のフォーマットで、簡単に言うと画像データをテキストデータに変換したフォーマットです。

このテキストデータをimgタグのsrcに指定することで、画像データに復元できます。

また、aタグ(リンク)のsrcに指定することで、画像ファイルとしてダウンロードすることもできます。

補足

toDataURL()メソッドはHTML Canvas API のメソッドとしても実装されており、同じ使いかたができます。

デフォルトはPNG形式ですが、JPEGやWEBPも指定できます。

また、JPEGやWEBPの場合は圧縮率も指定できます。

参考：HTMLCanvasElement.toDataURL()

まとめ

この記事では、model-viewerに表示した3Dモデルの画像を取得する方法について解説しました。

Webページ上に表示した3Dモデルの画像を取得できると、まわすいらすとのような画像コンテンツも作成できます。

ぜひこの記事を参考にして、より魅力的なコンテンツを自分のウェブサイトやブログに追加してみてください！

以上、「model-viewerに表示した3Dモデルを画像として取得する方法」についての紹介でした。