
学習時間 | 3時間 |
---|---|
難易度 | 初級 |
質問投稿 | 可 |
価格 ¥1,480
【WebAR】ARアプリを作ろう(WebViewAR+ARマーカー)
WebARはブラウザ上でAR体験できる技術。URLにアクセスするだけで楽しめるアプリインストール不要のAR開発を学ぶ。
non@nonnonkapibara
学習内容
アプリインストール不要でARが体験できるWebAR開発を学びます。
QRコード、ARマーカーを使って、画像表示や3Dモデル、アニメーションのAR表示ができるようになります。
この教材の対象者
ARに興味はあるけど、どうやって作ったらいいのか?わからない方や、初めてARやWebAR(WebViewAR+ARマーカー)を作る方向けです。
受講における必須条件
HTMLやJavaScriptの知識があると好ましいですが、全く分からなくても大丈夫です。サーバーにファイルをアップロードできる知識がある方。初めての方はNetlifyネットリファイ(無料) でのアップロードの方法を教材で説明しています。
この教材を学ぶことで身につくスキル
教材で学んだ技術を応用して、オリジナルのARを作る事ができます。例えば、QRコード付きの名刺にAR表示させたり、お友達のお誕生日にARマーカー付きのバースデーカードを送ることもできます。
この教材で学ばないこと
AR表示する3Dモデルの作り方については、この教材では説明しません。
教材で使用するpng画像や3Dモデルは、ダウンロードできます。
なぜこの教材を作ろうと思ったか
この教材で「ARって簡単に作れる!!とっても楽しい♪」という事を体験していただいて、自分だけのオリジナルなARをたくさん作っていただければと思います。
本教材で質問対応可能なOSや環境
- Mac OS
- Windows OS
カリキュラム
Section 0 はじめに
Section 1 ARマーカー上に、「にゃんこ」png画像を表示してみよう
Section 2 ARマーカー上に、3Dモデルを表示してみよう
- 2-1 2章の目標物
- 2-2 ARマーカーを準備する
- 2-3 3Dモデリングを用意する
- 2-4 ファイル構成
- 2-5 htmlのテンプレート
- 2-6 headエリアの説明
- 2-7 a-markerエリアの説明
- 2-8 a-obj-modelエリアの説明
- 2-9 カメラ位置
- 2-10 第2章で使用したソース
- 2-11 サーバーにアップロードしてみよう
- 2-12 AR表示してみよう
- 2-13 いろんな3DモデルをAR表示してみよう
講師のプロフィール
教材のレビュー
5.0
1件の評価
100%
0%
0%
0%
0%
横川 惠 6ヶ月以上前
AR名刺を作りたいと思っていましたが、YOUTUBE を見ても全くのAR初心者(web site は作ったことがあります。)には良い教材がなくどうしたもんかと思っていたところ、偶然この教材を見つけました。
プログラムは、最初はコピペすればいいと思っていたのですが、それでは覚えられないと思い1行ずつ書いていきました。
間違えながらサンプルコードと見比べ作っていきました。
おかげさまで、ウ もっと見る