作った3DデータをWebサイトに埋め込んで、マウスや指で操作し360°閲覧できるようにする方法を紹介します。
実現する方法はいくつかありますが、この記事ではA-Frameと<model-viewer>
、2種類のWEBコンポーネントを試しました。
動作デモ
まずは動作デモです。マウスか指で、拡大したりグルグル回せます。
※FirefoxとChromeで動作確認しました。
A-Frame
※モバイルで”Set your browser to request……”というメッセージが表示されていたら、Closeボタンを押すと見られると思います。
< model-viewer >
googleのプロジェクトとして開発されたWebコンポーネントです。
自分の作品や製品のPRなんかに使うと、楽しげで良さそうです。
手段の候補
Webサイトに3Dを埋め込むには、複数の方法があります。
大まかにはwebサービスを使ってシェアするのと、今回のようにライブラリを使う方法です。
一番早くて便利なのは、前者です。しかし会員形体によって制限(月当たりのアップロード数など)がある事が多いので、今回は導入が若干大変そうですが自由度の高い後者の方法を試してみました。
さて、これから導入方法を書いていきます。
使ったフレームワーク、ツール
※私の使用OSは、Windows10 64bitです。
主に使うツールは下記の通りです。
今回、A-Frameと<model-viewer>の2種類を試しました。
▼ A-Frame の場合
A-Frame | Web用VRを開発するためのwebフレームワークです。 |
orbit-controls | A-Frameで軌道制御(今回のマウスグルグル)を行うためのライブラリ。 superframeというA-Frame向けコンポーネント群の内の一つです。 |
▼ < model-viewer >の場合
<model-viewer> | 3Dモデルを簡単にレンダリングするためのWebコンポーネントです。 |
▼ 共通して使うツール
ブラウザ | FirefoxとChromeで確認。ローカルで開発するのに使う。 |
テキストエディタ | Htmlコードを書くのに使う。 |
Python | ローカルサーバを簡単にセットできる。 |
3D CGソフト | objもしくはglTFに出力できれば、ソフトは問わない。 ※ 私はBlender2.8を使いました。 |
レンタルサーバー | 最終的にWEBにアップする場合に必要。 |
A-Frame
今回の要です。 Web用VRを開発するためのwebフレームワークで、始めはMozilla内で開発され、後程一般にもリリースされたようです。
基本的な3D表示なら、びっくりするぐらい手軽に扱うことができます。
orbit-controls
これはsuperframeというA-Frame向けのコンポーネント群の内の一つで、 フレームの視点制御(マウスでグルグル)を簡単に実現することができます。
< model-viewer >
こちらは、Googleのプロジェクトとして開発されたWebコンポーネントです。
驚くほど簡単に3Dビューワーを作れます。
ビューワーとしての用途なら、VRがメインのA-Frameより、今回の目的に合致しているように感じます。

最終的に実行するファイル
最終的に実行に必要なファイルは、下記の通りです。
- Htmlファイル
- 3Dデータ(形式:glTF)
コンポーネントはCDNから呼ぶこともできるので、最低限Htmlファイルと3Dモデルのファイルだけで実行できます。
では、これから詳細な手順を説明します。
準備作業は、A-Frame、model-viewerのどちらを使う場合でも基本的には同じです。
別の作業が必要な場合は、その旨記載しています。
まず、開発環境を作る。(ローカルサーバーを立てる)
最終的にはWebサイトに埋め込んで表示したいのですが、一発では成功しません。
そこでネットにアップロードする前に、ローカル環境で試行錯誤できる環境を作ります。
しかし普通にローカルに保存しただけでは正常に動作しないので、ローカルサーバーを立てる必要があります。詳しくは、下記公式ドキュメントの”Use a Local Server”をご覧ください。
※ <model-viewer>
を使う場合でもローカルサーバーが必要です。
ローカルサーバーを立てるには様々な方法がありますが、私が試した方法は下記の通りです。
2023/3/5 追記
テキストエディタのVisual Studio Codeと拡張機能のLive Serverを使うとクリックするだけでローカルサーバーを立てられます。コマンドプロンプトを操作する必要はありません。

Python 3をインストールする
以下の公式サイトにて、”Download the latest version for Windows” と上に書かれたボタンからダウンロードができます。
あとは、実行してウィザードに沿ってインストールを進めます。

コマンドプロンプトを立ち上げ、カレントディレクトリにする
Windowsならコマンドプロンプトを使います。Windows10だったら、左下のWindowsマークをクリックし、cmdと打ち込めば、出てきます。
立ち上げたら、作業ファイル(html、3Dデータ)が入ったフォルダをカレントディレクトリにします。
例えば、作業ファイルの格納場所がEドライブ直下の”a-frame-test”だとします。
もし、コマンドプロンプトのデフォルトのカレントディレクトリがCドライブだったら、まずは以下のように入力し、カレントドライブを変更します。
E:
その後、カレントディレクトリを指定できます。
cd E:\a-frame-test

ローカルサーバーを立ち上げる
次は、ローカルサーバーを立ち上げます。以下のコマンドを打つと、実行可能です。
python -m http.server

ブラウザで、サーバにアクセスする
この後ブラウザのアドレスにhttp://localhost:8000
と打ち込み、アクセスします。
すると、フォルダ内に置いている、これから作るhtmlファイルを開くことができます。
終了したい場合は、コマンドプロンプト上で、Ctrl+Breakキーを押すと、止まります。
3Dファイルを作る(Blender2.8の例)
Webサイトに埋め込む3Dデータを準備します。
- A-Frameは、objとglTFをサポートしていますが、公式サイトではglTFが推奨されています。詳しく知りたい方は、公式ドキュメントをご覧ください。
- model-viewerは、glTF/GLBをサポートしています。詳しく知りたい方は、公式ドキュメントをご覧ください。
モデリング
今回は、確認用にこんな3Dモデルを描いてみました。使ったソフトは、Blenderです。
浮かんでいる本とフライパンとホットケーキです。



マテリアルの調整について
BlenderではglTFに容易にエクスポートできますが、思い通りの外観にするには色々とルールがあります。詳しくは、公式ドキュメントをご覧ください。
着色は「プリンシプルBSDF」で
3Dモデルに着色したい場合、マテリアルは「プリンシプルBSDF」を指定します。それ以外だとブラウザで見ても着色されず白いままになってしまいます。

テクスチャを当てたい場合は
今回のサンプルのように、表面に画像を貼りたい場合はUVマップとマッピングノードを、画像テクスチャに繋ぎます。
参考に、今回のノードは下図です。

透明にしたい場合は
透明にしたい場合は、以下のように設定するとWEBビューワー上でも再現されました。
- マテリアルプロパティのサーフェス→アルファを1.0未満にする。
- マテリアルプロパティの設定→ブレンドモードをアルファブレンドにする。
▼ 冒頭のデモでは、ホットケーキのシロップ部分を透明にしています。

glTFへエクスポートする
モデリングやマテリアルの設定が済んだら、エクスポートします。
ファイル→エクスポート→glTF2.0を選択。
開いた画面の左下の設定画面で「glTF」を選択します。もし選択したオブジェクトだけエクスポートしたいなら、gltfの下のチェックボックスをオンにしておいてください。

さて、これからHTMLファイルを作っていきます。以降はA-Frameとmodel-viewerで内容が変わります。
- A-frameの場合はこちら
- model-viewerの場合はこちら
A-Frame:Htmlファイルを作る
公式ドキュメントを読みながら、htmlファイルにコードを書いていきます。
詳しい書式やルールは、公式ドキュメントをご覧ください。
今回のデモのコードは、下記の通りです。
もうできた!
あとは、実行するだけです。冒頭で説明したローカルサーバーを立ち上げるのを忘れないで下さい。
下図は、ローカルサーバーにアクセスして、動作確認している様子です。

もしorbit-controlsを読み込まなかったら?
上記htmlファイルの7行目に” aframe-orbit-controls”を読み込んでいますが、このコンポーネントが無いと、3Dモデルをマウスでクルクル回せませんでした。
▼下図のようになります。太陽から見た地球のように、公転してしまいます。

iframeでWebページに埋め込む
冒頭のDEMOのようにwebサイトの一部分に埋め込むには、<iframe>
タグを使います。
▼作った3Dモデルやhtmlファイルをサーバーへアップロードし、こんな感じで、作った個々のA-frame用htmlファイルを <iframe>
内にリンクすれば表示できます。
3分動画
デモからA-Frameでの動作確認までの一連作業を、3分弱の動画にまとめました。
model-viewer:Htmlファイルを作る
こちらは、<model-viewer>
を使って3Dモデルを表示するためのHTMLファイルです。
公式ドキュメントを読みながら、htmlファイルにコードを書いていきます。
詳しい書式やルールは、公式ドキュメントをご覧ください。
動作の様子は、冒頭のデモをご覧ください。
公式ドキュメントへのリンク
公式サイトへのリンクです。Examplesの事例を見ているだけでも、何か作りたくなって夢が膨らみます。また、とても丁寧に導入から解説されており、初めて触れる私のような初心者でも読みやすく助かりました。
A-Frame
model-viewer

関連記事
▼「Babylon.js」というJavaScript フレームワークで、3Dモデルのビューワーを作る方法です。
JavaScriptのコードを書く必要がありますが、テンプレートが用意されていてドキュメントも詳しいので使いやすいです。