3Dモデルを、360°回せるビューワーとしてWebサイトに埋め込む方法 【A-Frame】

3Dモデルを、360°回せるビューワーとしてWebサイトに埋め込む方法 【A-Frame】 電子工作など

作った3DデータをWebサイトに埋め込んで、マウスや指で操作し360°閲覧できるようにする方法を紹介します。
実現する方法はいくつかありますが、この記事ではA-FrameというWEBフレームワークを使いました。

スポンサーリンク

動作デモ

まずは動作デモです。マウスか指で、拡大したりグルグル回せます。
※FirefoxとChromeで動作確認しました。
※モバイルで”Set your browser to request……”というメッセージが表示されていたら、Closeボタンを押すと見られると思います。

自分の作品や製品のPRなんかに使うと、楽しげで良さそうです。

手段の候補

Webサイトに3Dを埋め込むには、複数の方法があります。
大まかにはwebサービスを使ってシェアするのと、今回のようにライブラリを使う方法です。

一番早くて便利なのは、前者です。しかし会員形体によって制限(月当たりのアップロード数など)がある事が多いので、今回は導入が若干大変そうですが自由度の高い後者の方法を試してみました。

さて、これから導入方法を書いていきます。

使ったフレームワーク、ツール

※私の使用OSは、Windows10 64bitです。

主に使うツールは下記の通りです。

A-FrameWeb用VRを開発するためのwebフレームワークです。
orbit-controlsA-Frameで軌道制御(今回のマウスグルグル)を行うためのライブラリ。
superframeというA-Frame向けコンポーネント群の内の一つです。
ブラウザFirefoxとChromeで確認。ローカルで開発するのに使う。
テキストエディタHtmlコードを書くのに使います。
Pythonローカルサーバを簡単にセットできます。
3D CGソフトobjもしくはglTFに出力できれば、ソフトは問いません。
私はBlender2.8を使いました。
レンタルサーバー最終的にWEBにアップする場合に必要です。

A-Frame

今回の要です。 Web用VRを開発するためのwebフレームワークです。これがないとこんなに簡単に実現できていません。基本的な表示なら、びっくりするぐらい手軽に扱うことができます。

A-Frame – Make WebVR
A web framework for building virtual reality experiences. Make WebVR with HTML and Entity-Component. Works on Vive, Rift, desktop, mobile platforms.

orbit-controls

こちらも、重要です。これはsuperframeというA-Frame向けのコンポーネント群の内の一つで、 フレームの視点制御(マウスでグルグル)を簡単に実現することができます。

supermedium/superframe
:package: A super collection of A-Frame components. - supermedium/superframe

最終的に実行するファイル

最終的に実行に必要なファイルは、下記の通りです。

  • Htmlファイル
  • 3Dデータ(形式:glTF)

コンポーネントはCDNから呼ぶこともできるので、最低限Htmlファイルと3Dモデルのファイルだけで実行できます。

では、これから詳細な手順を説明します。

まず、開発環境を作る。(ローカルサーバーを立てる)

最終的にはWebサイトに埋め込んで表示したいのですが、一発では成功しません。
そこでネットにアップロードする前に、ローカル環境で試行錯誤できる環境を作ります。

しかし普通にローカルに保存しただけでは正常に動作しませんので、ローカルサーバーを立てる必要があります。詳しくは、下記公式ドキュメントの”Use a Local Server”をご覧ください。

ローカルサーバーを立てるには様々な方法がありますが、私が試した方法は下記の通りです。

PCにpython 3がインストールされている前提です。

Windowsならコマンドプロンプトを立ち上げ、作業ファイル(html、3Dデータ)が入ったフォルダをカレントディレクトリにして、下記のコマンドを打ちます。

python -m http.server
カレントディレクトリに移動してから、ローカルサーバーを立ち上げた例

この後ブラウザでhttp://localhost:8000にアクセスすると、フォルダ内のhtmlファイルを開くことができます。

終了したい場合は、Ctrl+Breakで止まります。

3Dファイルを作る(Blender2.8の例)

Webサイトに埋め込む3Dデータを準備します。
A-FrameはobjとglTFをサポートしていますが、公式サイトではglTFが推奨されています。詳しく知りたい方は、公式ドキュメントをご覧ください。

モデリング

今回は、確認用にこんな3Dモデルを描いてみました。使ったソフトは、Blender2.8です。
浮かんでいる本とホットケーキとフライパンです。

表紙と、ページにテクスチャを貼っています。
デモでは、テクスチャは外しました。(サイズが重くなるので)

マテリアルの調整について

BlenderではglTFに容易にエクスポートできますが、思い通りの外観にするには色々とルールがあります。詳しくは、公式ドキュメントをご覧ください。

着色は「プリンシプルBSDF」で

3Dモデルに着色したい場合、マテリアルは「プリンシプルBSDF」を指定します。それ以外だとブラウザで見ても着色されず白いままになってしまいます。

シンプルに着色だけしたい場合は、これ。

テクスチャを当てたい場合は

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

UVマップとマッピングノードを、画像テクスチャに繋ぎます。

glTFへエクスポートする

モデリングやマテリアルの設定が済んだら、エクスポートします。

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

blender2.8で、glTFにエクスポート

Htmlファイルを作る

公式ドキュメントを読みながら、htmlファイルにコードを書いていきます。

詳しい書式やルールは、公式ドキュメントをご覧ください。

今回のデモのコードは、下記の通りです。

もうできた!

あとは、実行するだけです。冒頭で説明したローカルサーバーを立ち上げるのを忘れないで下さい。

下図は、ローカルサーバーにアクセスして、動作確認している様子です。

A-Frameで3Dモデルをビューワーのように表示した例

もしorbit-controlsを読み込まなかったら?

上記htmlファイルの7行目に” aframe-orbit-controls”を読み込んでいますが、このコンポーネントが無いと、3Dモデルをマウスでクルクル回せませんでした。

▼下図のようになります。太陽から見た地球のように、公転してしまいます。

iframeでWebページに埋め込む

冒頭のDEMOのようにwebサイトの一部分に埋め込むには、<iframe>タグを使います。

▼作った3Dモデルやhtmlファイルをサーバーへアップロードし、こんな感じで、作った個々のA-frame用htmlファイルを <iframe>内にリンクすれば表示できます。

3分動画

デモから動作確認までの一連作業を、3分弱の動画にまとめました。

How to embed 3D models within your website using A-Frame.

公式ドキュメントへのリンク

公式サイトへのリンクです。Examplesの事例を見ているだけでも、何か作りたくなって夢が膨らみます。また、とても丁寧に導入から解説されており、初めて触れる私のような初心者でも読みやすく助かりました。

A-Frame – Make WebVR
A web framework for building virtual reality experiences. Make WebVR with HTML and Entity-Component. Works on Vive, Rift, desktop, mobile platforms.
supermedium/superframe
:package: A super collection of A-Frame components. - supermedium/superframe
タイトルとURLをコピーしました