はじめに
この本ではA-Frameの使い方について、その手順をまとめていきます。
最低限のコードで動く事を優先させますので、機能の詳細について、説明を省いている箇所がありますのでご注意ください。
最終的な完成イメージは下記の通りです。
オブジェクトの配置
動画の配置と制御
A-Frameとは!?
A-Frameは、Webブラウザで気軽にVRコンテンツを作る事ができる、大人気の定番ライブラリです。
A-Frameでできる事
Three.jsの公式サイトにある、"Examples"では、様々な事例を確認する事ができます。
(なんだかすごい!!)
A-FrameでVR体験
A-Frameは、WebXRという技術を使っており、気軽にVRコンテンツを作る事ができます。
HTMLだけで構築することも可能であり、初学者さんにもとても理解しやすいフレームワークになっています。(JavaScriptを使うと更に凄いものが作れますよ)
更に、Oculus Rift、HTC Vive等、WebXRに対応しているVRデバイスを用意すれば、そのままVR体験をする事ができます。
A-Frameをどう学ぶか
A-Frameを学ぶ手段として、A-Frame公式サイトやMDN公式サイトにあるドキュメントを参考にする事をオススメします。
A-Frame公式サイトで学ぶ
A-Frameの公式サイトにある、"GET STARTED"から、入門マニュアルにアクセスする事ができます。
MDN公式サイトから学ぶ
MDN公式サイトから、入門マニュアルにアクセスする事ができます。
こちらは日本語になっています。
開発方法について
A-Frameの開発には、オンラインエディタを使う方法と、実際にPCにソフトウェアをインストールして開発をする方法の2種類があります。
- Glitch公式サイト(Webサービスです)
- VS-Code公式サイト(PCにインストールします)
特に、Oculus等のVRデバイスを使って作品を作りたい場合は、"https"でアクセスが出来るWebサイトを用意し、そこにコードをアップロードする必要があります。
Glitchは、オンラインにコードを公開しながら作品を作ることができるので、自前でサーバーを用意する必要がありません。(初学者さんにお勧めです)
対して、VS-Codeの場合は、自前のWebサイトを用意する必要があります。
次回は、Glitchを使った環境開発のお話になります。