はじめに

この本ではA-Frameの使い方について、その手順をまとめていきます。
最低限のコードで動く事を優先させますので、機能の詳細について、説明を省いている箇所がありますのでご注意ください。

  1. 執筆時点でのバージョンは1.2.0になります。
  2. PCでの動作チェックには、Firefoxを使用します。
  3. VRデバイスでの動作チェックには、Oculus quest2を使用します。

最終的な完成イメージは下記の通りです。


オブジェクトの配置


動画の配置と制御

A-Frameとは!?

A-Frameは、Webブラウザで気軽にVRコンテンツを作る事ができる、大人気の定番ライブラリです。

A-Frame公式サイト

A-Frameでできる事

Three.jsの公式サイトにある、"Examples"では、様々な事例を確認する事ができます。
(なんだかすごい!!)

A-Frame:HelloWebVR

A-FrameでVR体験

A-Frameは、WebXRという技術を使っており、気軽にVRコンテンツを作る事ができます。
HTMLだけで構築することも可能であり、初学者さんにもとても理解しやすいフレームワークになっています。(JavaScriptを使うと更に凄いものが作れますよ)

更に、Oculus RiftHTC Vive等、WebXRに対応しているVRデバイスを用意すれば、そのままVR体験をする事ができます。

A-Frameをどう学ぶか

A-Frameを学ぶ手段として、A-Frame公式サイトやMDN公式サイトにあるドキュメントを参考にする事をオススメします。

A-Frame公式サイトで学ぶ

A-Frameの公式サイトにある、"GET STARTED"から、入門マニュアルにアクセスする事ができます。

A-Frame:Introduction

MDN公式サイトから学ぶ

MDN公式サイトから、入門マニュアルにアクセスする事ができます。
こちらは日本語になっています。

A-Frameを使った基本的なデモの作成

開発方法について

A-Frameの開発には、オンラインエディタを使う方法と、実際にPCにソフトウェアをインストールして開発をする方法の2種類があります。

  1. Glitch公式サイト(Webサービスです)
  2. VS-Code公式サイト(PCにインストールします)

特に、Oculus等のVRデバイスを使って作品を作りたい場合は、"https"でアクセスが出来るWebサイトを用意し、そこにコードをアップロードする必要があります。

Glitchは、オンラインにコードを公開しながら作品を作ることができるので、自前でサーバーを用意する必要がありません。(初学者さんにお勧めです)
対して、VS-Codeの場合は、自前のWebサイトを用意する必要があります。

次回は、Glitchを使った環境開発のお話になります。