![[kaneko lab.]](https://www.kkaneko.jp/info/logo_png.png){kind=logo}
A-Frameを活用したVR・AR開発
【概要】
WebベースのVR・AR開発フレームワークであるA-Frameの基本的な使い方と応用技術を紹介する。動作確認から始まり，３次元オブジェクトの表示，アニメーションの実装，360度パノラマ表示を説明する。さらに，AR.jsと組み合わせたマーカーベースのARシステムの試作と稼働方法についても説明する。パソコン上での動作確認だけでなく，Webサーバを利用したARシステムの構築方法，およびPythonを使用した開発環境の設定も説明する。【サイト内の関連情報】
- 3次元のページ
- A-Frame を使ってみる
ブラウザで手軽にVRを扱える「A-Frame」の基本を紹介し、HTMLファイル内に立方体や球などの3Dオブジェクトを配置してブラウザ上で表示・操作する手順を学ぶ。
- A-Frame で３次元オブジェクト表示，アニメーション，パノラマ表示，クリッカブルに設定
A-Frameの拡張機能を利用し、パーティクルやアニメーション、波の動き、空のグラデーション、360度パノラマ画像、クリック操作への反応を実装する手順を解説する。
- パソコンで，マーカーベースの AR システムを動かしてみる（A-Frame, AR.js を使用）
A-FrameとAR.jsを利用し、PCのカメラで所定のマーカー（hiro）を読み取り、ブラウザ上に3Dオブジェクトを表示するマーカーベースのARシステムを構築する。
- パソコンで，Web サーバを立ち上げ，Web でマーカーベースの AR システムを動かしてみる（A-Frame, AR.js, Python を使用）
PythonでローカルWebサーバーを立ち上げ、AR.jsとA-Frameを用いて、Blenderで作成した3Dモデル（.obj形式）をマーカー上にAR表示するWebアプリの作成手順。