PR

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

3D CG

作った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-FrameWeb用VRを開発するためのwebフレームワークです。
orbit-controlsA-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表示なら、びっくりするぐらい手軽に扱うことができます。

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

orbit-controls

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

superframe/components/orbit-controls at master · supermedium/superframe
:package: A super collection of A-Frame components. - supermedium/superframe

< model-viewer >

こちらは、Googleのプロジェクトとして開発されたWebコンポーネントです。
驚くほど簡単に3Dビューワーを作れます。

ビューワーとしての用途なら、VRがメインのA-Frameより、今回の目的に合致しているように感じます。

GitHub - google/model-viewer: Easily display interactive 3D models on the web and in AR!
Easily display interactive 3D models on the web and in AR! - GitHub - google/model-viewer: Easily display interactive 3D...
3D model-viewer embed
Neil Armstrong's Spacesuit from the Smithsonian Digitization Programs Office and National Air and Space Museum

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

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

  • 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を使うとクリックするだけでローカルサーバーを立てられます。コマンドプロンプトを操作する必要はありません。

VSCODEで、Live Serverを実行している様子
Go Liveボタンをクリックすると、ローカルサーバーを立てた状態でファイルが実行される

Python 3をインストールする

以下の公式サイトにて、”Download the latest version for Windows” と上に書かれたボタンからダウンロードができます。

あとは、実行してウィザードに沿ってインストールを進めます。

Download Python
The official home of the Python Programming Language

コマンドプロンプトを立ち上げ、カレントディレクトリにする

Windowsならコマンドプロンプトを使います。Windows10だったら、左下のWindowsマークをクリックし、cmdと打ち込めば、出てきます。

立ち上げたら、作業ファイル(html、3Dデータ)が入ったフォルダをカレントディレクトリにします。

例えば、作業ファイルの格納場所がEドライブ直下の”a-frame-test”だとします。

もし、コマンドプロンプトのデフォルトのカレントディレクトリがCドライブだったら、まずは以下のように入力し、カレントドライブを変更します。

E:

その後、カレントディレクトリを指定できます。

cd E:\a-frame-test
コマンドプロンプトで、カレントドライブとディレクトリを変更している様子
CMDで、カレントドライブとディレクトリを変更している様子

ローカルサーバーを立ち上げる

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

python -m http.server
CMDで、ローカルサーバーを立ち上げた様子

ブラウザで、サーバにアクセスする

この後ブラウザのアドレスにhttp://localhost:8000と打ち込み、アクセスします。
すると、フォルダ内に置いている、これから作るhtmlファイルを開くことができます。

必ず、上記のアドレスを入力ください。直接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マップとマッピングノードを、画像テクスチャに繋ぎます。
参考に、今回のノードは下図です。

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

透明にしたい場合は

透明にしたい場合は、以下のように設定するとWEBビューワー上でも再現されました。

  • マテリアルプロパティのサーフェス→アルファを1.0未満にする。
  • マテリアルプロパティの設定→ブレンドモードをアルファブレンドにする。

冒頭のデモでは、ホットケーキのシロップ部分を透明にしています。

blenderでgltf、透明なマテリアル設定
Blender 2.90での作業の様子

glTFへエクスポートする

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

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

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

さて、これからHTMLファイルを作っていきます。以降はA-Framemodel-viewerで内容が変わります。

A-Frame: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分動画

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

model-viewer:Htmlファイルを作る

こちらは、<model-viewer>を使って3Dモデルを表示するためのHTMLファイルです。
公式ドキュメントを読みながら、htmlファイルにコードを書いていきます。
詳しい書式やルールは、公式ドキュメントをご覧ください。

動作の様子は、冒頭のデモをご覧ください。

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

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

A-Frame

A-Frame – Make WebVR
A web framework for building virtual reality experiences. Make WebVR with HTML and Entity-Component. Works on Vive, Rift...
superframe/components/orbit-controls at master · supermedium/superframe
:package: A super collection of A-Frame components. - supermedium/superframe

model-viewer

3D model-viewer embed
Neil Armstrong's Spacesuit from the Smithsonian Digitization Programs Office and National Air and Space Museum
model-viewer/packages/model-viewer at master · google/model-viewer
Easily display interactive 3D models on the web and in AR! - google/model-viewer

関連記事

▼「Babylon.js」というJavaScript フレームワークで、3Dモデルのビューワーを作る方法です。

JavaScriptのコードを書く必要がありますが、テンプレートが用意されていてドキュメントも詳しいので使いやすいです。

タイトルとURLをコピーしました