AR-Frame x AR.js入門 vol.1

インストールいらず! お手軽Web AR/VR開発入門

自己紹介氏名：吉永崇(Takashi Yoshinaga) 所属：Steampunk Digital株式会社九州先端科学技術研究所(ISIT) 専門：医療支援AR,運動計測,ホログラム

本題に入ります

A-Frameの概要  Webブラウザ上でVRなどの3D表現を簡単に実現するフレームワーク  HTMLのタグを書くだけで3Dオブジェクトを配置できる  Firefox、Chrome、Edgeなど主要なブラウザがWebVR対応を表明  Oculus QuestやHTC ViveなどのHMD、スマホVRにも対応  AR対応ライブラリも利用可能 (対応端末のみARモードもあり)

5.

まずは体験 A-Frameのページにアクセス (https://aframe.io/)

https://aframe.io/

6.

まずは体験ページの左側にサンプルがありますサンプル

7.

まずは体験基本サンプル Hello WebVRをクリック Hello WebVR

8.

まずは体験基本サンプル Hello WebVRをクリック画面をクリック  回転：マウスでドラッグ  左右：[A][D]キー  前後：[W][S]キー ※前後左右は自分がどちらに動くかで考える

9.

まずは体験 360°Imageをクリックして全天球コンテンツを表示 360°Image RICOH Theta

10.

スマートフォンでも A-Frameで検索または QRコード

11.

スマートフォンでも VRボタンをタップ

12.

VR用HMDでも

13.

AR開発は？

14.

A-Frame対応ARライブラリ AR.js  ARToolKitをベースに開発されたjavascriptライブラリ  正方形の枠と内側の絵を組み合わせたマーカーを使用画像の取得位置・姿勢計算・二値化等の画像処理・マーカの検出 CGを重畳 (D.Wagner et al. Computer Vision Winter Workshop, 2007) (引用元: http://www.youtube.com/watch?v=TqGAqAFlGg0)

http://www.youtube.com/watch?v=TqGAqAFlGg0

15.

本日のゴール https://arjs-seminar.glitch.me または QRコード

https://arjs-seminar.glitch.me/

16.

ハンズオン手順 Step1: サンプルを使ってA-Frameの基本操作を覚える Step2: CG見た目の調整やアニメーションの設定などを行い簡易VRコンテンツを作成 Step3: AR.jsを使ってARコンテンツを作成 Step4: マーカー認識On/Off時の表示切り替え

17.

必要なもの  Webブラウザ → コンテンツの体験や動作確認  テキストエディタ → HTMLやjavascriptの記述  Webサーバー → コンテンツの公開サーバーに関して今回は・・・  Glitchを利用 https://glitch.com/ ◆ FacebookかGitHubのアカウントがあればOK ◆ サーバーとエディタの両方を無料で提供この資料ではGlitch使用を前提に説明します

https://glitch.com/

18.

演習用サンプルこちらからダウンロード http://arfukuoka.lolipop.jp/ARjs2021/sa mple.zip

http://arfukuoka.lolipop.jp/ARjs2021/sample.zip

19.

基本サンプルのコード Hello WebVRのコードを取得 GET STARTED

20.

基本サンプルのコードの複製 Hello WebVR Hello WebVRに関する記述 (たったこれだけ！)

21.

基本サンプルのコードの複製 Glitchユーザーはremix the starter example on Glitchをクリック ※通常はHello WebVRの記述をコピーし、自作のHTMLファイルにペースト Click

22.

基本サンプルのコードの複製 Remix your ownをクリック Click

23.

基本サンプルのコードの確認 index.htmlをクリックし、コードが表示されることを確認 Click

24.

[beta]

ソースの確認
<html>
<head>
<title>Hello, WebVR! - A-Frame</title>
<meta name="description" content="Hello, WebVR! - A-Frame">
<script src="https://aframe.io/releases/1.2.0/aframe.min.js">
</script>
</head>
<body>
<a-scene background="color: #ECECEC">
表示するオブジェクトや背景の設定をここに記述
</a-scene>
</body>
</html>

 ヘッダー部でA-Frameの機能を提供するライブラリを取り込む
 <a-scene>と</a-scene>の間に描画に関する記述をする

https://aframe.io/releases/1.2.0/aframe.min.js

25.

ソースの確認 <a-scene background="color: #ECECEC"> 位置回転色 <a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"> </a-box> <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"> </a-sphere> <a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder> <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane> </a-scene>  基本図形はa-xxxタグで提供されている https://aframe.io/docs/1.2.0/primi tives/a-box.html (例：a-boxの詳細)

https://aframe.io/docs/1.2.0/primitives/a-box.html

26.

動作確認 Show

27.

動作確認 Next to The Code

28.

動作確認

29.

アレンジしよう (まだやらなくてOK) タグ内の各パラメータを編集してCGの見た目を調整  position(位置)：x y zの順にスペースで区切って指定位置 x y z座標 (0 1.25 -5) 回転色

30.

アレンジしよう (まだやらなくてOK) タグ内の各パラメータを編集してCGの見た目を調整  position(位置)：x y zの順にスペースで区切って指定  rotation(傾き)：各軸を中心とした回転で表現  color(色)：カラーコード等で指定  他にも図形によって各種設定項目がある (0 1.25 -5) Y Z 原点 X 【設定項目の例】 radius(半径) width(幅) height(高さ) depth(奥行) src (画像など)

31.

とりあえず習うより慣れろということで自由にいじってみましょう

32.

HTML編集に慣れよう [編集例] 色 <a-scene background="color: #0000FF"> 角度 <a-box position="-1 0.5 -3" rotation="0 45 45" color="#4CC3D9"> </a-box> <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"> </a-sphere> 高さ <a-cylinder position="1 0.75 -3" radius="0.5" height="0.2" color="#FFC65D"></a-cylinder> <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane> <a-text position="0 1.5 -2" align="center" color="#000000” value="AR Fukuoka"></a-text> </a-scene>

33.

ハンズオン手順 Step1: サンプルを使ってA-Frameの基本操作を覚える Step2: CG見た目の調整やアニメーションの設定などを行い簡易VRコンテンツを作成 Step3: AR.jsを使ってARコンテンツを作成 Step4: マーカー認識On/Off時の表示切り替え

34.

その前に

35.

現在のタブを閉じるタブを閉じる

36.

VRコンテンツ作りの準備 Hello WebVRのコードを取得 GET STARTED

37.

基本サンプルのコードの複製 Glitchユーザーはremix the starter example on Glitchをクリック ※通常はHello WebVRの記述をコピーし、自作のHTMLファイルにペースト Click

38.

基本サンプルのコードの複製 Remix your ownをクリック Click

39.

index.htmlの表示 Click

40.

不要なオブジェクトの削除 <a-scene background="color: #ECECEC"> <a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"> </a-box> <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"> </a-sphere> <a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder> <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane> </a-scene>  HTMLの記述の中からタグを削るだけ  この後の演習のため、a-sphereのみを残して削除してみましょう lesson01

41.

外見を整える単色で塗りつぶすのではなくテクスチャをオブジェクトの表面に表示

42.

外見を整えるテクスチャ画像を用意して、オブジェクトの表面に貼り付ける 3Dオブジェクトテクスチャ画像

43.

テクスチャ画像をアップロード Glitchのエディタページに戻り、画面左の[assets]をクリック続いて、画面上方の[Upload an Asset]をクリック ①assets ② Upload an Asset

44.

テクスチャ画像をアップロードサンプルとして用意したテクスチャ画像earth.jpgを開く sample¥earth.jpg

45.

テクスチャ画像をアップロード Click

46.

テクスチャ画像のURLを取得 Copyをクリック

47.

ソースの書き換え index.htmlクリック

48.

[beta]

ソースの書き換え
<head>

<title>Hello, WebVR! - A-Frame</title>
<meta name="description" content="Hello, WebVR! - A-Frame">
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
</head>

<body>

colorをsrcに変更

<a-scene background="color: #ECECEC">
<a-sphere position="0 1.25 -5" radius="1.25" src="コピーしたURL"
shadow> </a-sphere>
</a-scene>
</body>

 a-sphereの色をcolor(色)ではなくsrc(画像へのリンク)に変更
 srcの右辺に前の操作でコピーした“画像のURL”を貼り付ける

Lesson02

49.

[beta]

アニメーションの追加
<a-sphere position="0 1.25 -5" radius="1.25"
src="テクスチャのURL" shadow
animation = "
property :rotation; ←アニメーションの種類
dur : 10000; ←アニメーションにかける時間(ミリ秒)
from : 0␣0␣0;
←開始時の角度(0,0,0)
to: 0␣360␣0; ←終了時の角度(0,360,0)
loop : 0;
←繰り返し回数
Y
"
"を忘れずに！
>
X
</a-sphere>
Z
animationを用いてアニメーションに関する設定を行う

50.

[beta]

アニメーションを繰り返す
<a-sphere position="0 1.25 -5" radius="1.25"
src="テクスチャのURL" shadow
animation = "
property :rotation; ←アニメーションの種類
dur : 10000; ←アニメーションにかける時間(ミリ秒)
from : 0␣0␣0;
←開始時の角度(0,0,0)
to: 0␣360␣0; ←終了時の角度(0,360,0)
loop : -1;
←繰り返し回数
"
>
</a-sphere>
repeatを"-1"にするといつまでも繰り返し続ける

51.

同じ速度で回転させる animation = " property : rotation; ←アニメーションの種類 dur : 10000; ←アニメーションにかける時間(ミリ秒) from : 0␣0␣0; ←開始時の角度(0,0,0) to : 0␣360␣0; ←終了時の角度(0,360,0) loop : -1; ←繰り返し回数 easing : linear; ←速度の変化 lesson03 " easingを追加し、"linear"にすると同じ速度で動くようになる。ほかには最初がゆっくりなease-inや後半がゆっくりなease-outも。 → https://easings.net

https://easings.net/

52.

背景を変更しよう

53.

テクスチャ画像をアップロード ① 画面左の[assets]をクリック ② [Upload an Asset]をクリック ①assets ② Upload an Asset

54.

テクスチャ画像をアップロードサンプルとして用意した背景用画像space.jpgを開く sample¥space.jpg

55.

テクスチャ画像のURLを取得クリック

56.

テクスチャ画像のURLを取得 Copyをクリック

57.

ソースの書き換え index.htmlクリック

58.

[beta]

タグの追加
<head>
<title>Hello, WebVR! - A-Frame</title>
<meta name="description" content="Hello, WebVR! - A-Frame">
<script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>

</head>
<body>
<a-scene background="color: #FAFAFA">
<a-sphere position="0 1.25 -5" radius="1.25" src="URL" shadow

animation = "長いので割愛"
>
</a-sphere>
<a-sky src="さっきコピーした画像のURL"></a-sky>

</a-scene>
</body>

a-skyを追加

lesson04

a-skyタグを利用し、背景情報として画像のURLを指定すればOK

59.

名前を付けて保存文字列をクリックここを書き換える

60.

URLの確認 Change URL これ

61.

ほか、A-Frameで利用できるデータの例 • • • • 文字列 <a-text> 音 <a-sound> ビデオ <a-video> 3Dファイル obj <a-obj-model> glTF <a-gltf-model> • VRコントローラによる入力 HTC Vive <a-entity vive-controls="hand: left"> OculusQuest など <a-entity laser-controls="hand: left">

62.

ハンズオン手順 Step1: サンプルを使ってA-Frameの基本操作を覚える Step2: CG見た目の調整やアニメーションの設定などを行い簡易VRコンテンツを作成 Step3: AR.jsを使ってARコンテンツを作成 Step4: マーカー認識On/Off時の表示切り替え

63.

編集中のコードを複製画面右上のプロジェクト名が表示されている箇所からRemix This ①プロジェクト名 ②Remix Project

64.

準備プレビューを開きっぱなしだと、このあとカメラの使用許可確認が邪魔になる閉じる

65.

準備代わりに別のタブで実行画面を開いておく ①Show ②閉じる

66.

[beta]

AR.jsをインポート & カメラ画像の表示
<head>
<title>Hello, WebVR! - A-Frame</title>
<meta name="description" content="Hello, WebVR! - A-Frame">

<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/
build/aframe-ar.js"></script>
追加
</head>

背景色を削除してembeded

<body>

<a-scene
#FAFAFA">
<a-scene background="color:
embedded>
<a-sphere position="0 1.25 -5" radius="1.25" src="URL" shadow
animation = "中略"
>
</a-sphere>
<a-sky src="画像URL"></a-sky>
</a-scene>
</body>

a-sky削除

lesson05

AR.jsの読み込みをしたあと、a-sceneタグにembeddedを追加

67.

マーカーを認識してその上にCGを表示 <body> 追加 <a-scene embedded arjs> <a-marker preset="hiro"> <a-sphere position="0 1.25 -5" radius="1.25" src="URL" shadow animation = "中略" > </a-sphere> </a-marker> </a-scene> マーカーの上にこれを表示したい </body>     AR表示をするにはマーカーとCGとの関連付けが必要 A-Frameの場合<a-marker></a-marker>でCGを挟む presetでマーカー名を指定 (付属マーカーのHiro使用) 正方形内のマーカーを独自に作ることも可能 (参考) lesson06

https://medium.com/arjs/how-to-create-your-own-marker-44becbec1105

68.

動作確認表示されたけど位置がズレてる

69.

理由と解決方法(1) <a-marker> </a-marker>で挟まれたCGの原点はマーカーの中心となる <a-sphere position="0 1.25 -5" radius="1.25" src="URL" shadow> 0 1.25 0 1.25 y -5 000 x z

70.

動作確認下記のように変更して再度実行 <a-sphere position="0 1.25 0" radius="1.25" src="URL" shadow> まだちょっとズレてる

71.

理由と解決方法(2)  コンピュータで3D表現をする際に、本来は視点の位置を指定する必要がある  A-Frameでは「いい感じ」に表示される視点の位置をデフォルトで設定してくれる  マーカーの位置の計算はカメラが原点にあることを前提としているため要修正 <body> <a-scene embedded arjs> <a-marker preset="hiro"> <a-sphere position="0 1.25 0" radius="1.25" src="URL" shadow animation = "中略" > </a-sphere> </a-marker> Y <a-entity camera></a-entity> </a-scene> </body> カメラを明示的に追加する(位置は原点) Z X lesson07

72.

ハンズオン手順 Step1: サンプルを使ってA-Frameの基本操作を覚える Step2: CG見た目の調整やアニメーションの設定などを行い簡易VRコンテンツを作成 Step3: AR.jsを使ってARコンテンツを作成 Step4: マーカー認識On/Off時の表示切り替え

73.

現状の問題点と解決策 <body> <a-scene embedded arjs> <a-marker preset="hiro"> <a-sphere position="0 1.25 0" radius="1.25" src="URL" shadow animation = "中略" > </a-sphere> </a-marker> </a-scene> </body> 問題点  表示するCGがa-markerの子要素なのでマーカーが消えるとCGも消える解決策  a-markerの子要素としてではなく自前のjavascriptでCGの位置・姿勢を制御

74.

CG管理用のオブジェクト作成 <body> <a-scene embedded arjs> <a-marker preset="hiro"> <a-sphere position="0 1.25 0" radius="1.25" src="URL" shadow animation = "中略" > </a-sphere> </a-marker> id名は任意でOK <a-entity id="ar-objects"> ここで表示するCGに関する記述 </a-entity> </a-scene> </body> a-entityという空オブジェクトを作成。javascriptで利用するためidもつけておく

75.

CG管理用のオブジェクト作成 <body> <a-scene embedded arjs> <a-marker preset="hiro"> <a-sphere position="0 1.25 0" radius="1.25" src="URL" shadow animation = "中略" > CG管理用オブジェクトに移動 </a-sphere> </a-marker> <a-entity id="ar-objects"> ここで表示するCGに関する記述 </a-entity> </a-scene> </body> a-sphereを<a-entity id="ar-objects">と</a-entity>の間に移動

76.

CG管理用のオブジェクト作成 <body> <a-scene embedded arjs> <a-marker preset="hiro"> こっちは空っぽでOK </a-marker> <a-entity id="ar-objects"> <a-sphere position="0 1.25 0" radius="1.25" src="URL" shadow animation = "中略" > </a-sphere> </a-entity> </a-scene> </body> lesson08 親オブジェクト(id:ar-objects)を作ることで複数CGのAR表示も可能

77.

確認 CGが追従しなくなる

78.

確認 Ctrl + Alt (option) + i

79.

確認インスペクターで見るとちゃんとある Cameraの位置はココ

80.

[beta]

マーカー検出/ロストのタイミングを取得
<head>
<meta charset="utf-8">
<title>Hello, WebVR! • A-Frame</title>
<meta name="description" content="Hello, WebVR! • A-Frame">
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<script src="https://raw.githack.com/AR-jsorg/AR.js/master/aframe/build/aframe-ar.js"></script>
<script>

ここにスクリプトを記述(次のページ)
</script>

</head>
<body>
<a-scene embedded arjs>
スペースの都合上中略
</a-scene>
</body>

81.

[beta]

マーカー検出/ロストのタイミングを取得
<script>
AFRAME.registerComponent('markerhandler', {

schema: {
//引数
},

[schema]
マーカーに追従させるCGを登録

init: function () {
//初期化
},
tick: function (time, timeDelta) {

//一定周期で更新
}

[tick]
マーカーの位置・角度にCGを追従

});
</script>

lesson09

A-FrameではregisterComponentを使ってa-xxxに独自の機能を追加できる

82.

[beta]

マーカー検出/ロストのタイミングを取得
<script>
AFRAME.registerComponent('markerhandler', {

schema: {
arobject: {type: 'selector'}
},

init: function () {
//初期化
},
tick: function (time, timeDelta) {

//一定周期で更新
}
});
</script>

lesson10

マーカーに追従させるCGを表す変数をarobjectとする。

83.

[beta]

マーカー検出/ロストのタイミングを取得
<script>
AFRAME.registerComponent('markerhandler', {

schema: {
arobject: {type: 'selector’}
},

init: function () {

マーカ検出/ロスト時の挙動を定義(次のページ)
},
tick: function (time, timeDelta) {

//一定周期で更新
}
});
</script>

マーカー検出/ロストのイベントを登録する

84.

[beta]

マーカー検出/ロストのタイミングを取得
init: function () {
//マーカー検出/ロストの状態を管理する変数を定義しfalseで初期化
this.isTracking=false;
//markerFoundはマーカー検出時に呼ばれる

this.el.sceneEl.addEventListener('markerFound', () => {
this.isTracking=true;
console.log("tracking:"+ this. isTracking);
});
//markerLostはマーカーロスト時に呼ばれる
this.el.sceneEl.addEventListener('markerLost', () => {
this.isTracking=false;

console.log("tracking:"+ this. isTracking);
});
}

lesson11

85.

[beta]

自作機能(コンポーネント)を利用する
<head>
<meta charset="utf-8">
<title>Hello, WebVR! • A-Frame</title>
<meta name="description" content="Hello, WebVR! • A-Frame">
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<script src="https://raw.githack.com/AR-jsorg/AR.js/master/aframe/build/aframe-ar.js"></script>
<script>

先ほど記述したコンポーネント(markerhandler)
</script>
</head>

<body>

ここを編集。(次のページ)

<a-marker preset="hiro"> </a-marker>
<a-scene embedded arjs>
スペースの都合上中略
</a-scene>
</body>

86.

[beta]

自作機能(コンポーネント)を利用する
<head>
<meta charset="utf-8">
<title>Hello, WebVR! • A-Frame</title>
<meta name="description" content="Hello, WebVR! • A-Frame">
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<script src="https://raw.githack.com/AR-jsorg/AR.js/master/aframe/build/aframe-ar.js"></script>
<script>

自作コンポーネント(markerhandler)
</script>
</head>

<body>
<a-marker markerhandler preset="hiro"> </a-marker>
<a-scene embedded arjs>
スペースの都合上中略
</a-scene>
</body>

lesson12

87.

確認右クリックして要素を表示

88.

確認コンソール検出ステータスが表示される

89.

[beta]

CGをマーカーに追従させる
<script>
AFRAME.registerComponent('markerhandler', {

schema: {
arobject: {type: 'selector’}
},

init: function () {
//マーカー検出イベントの設定(スペースの都合により省略)
},
tick: function (time, timeDelta) {

CGをマーカーに追従させる(次のページ)
}
});
</script>

一定周期でマーカーの位置・姿勢を取得し、CGの位置・姿勢に反映

90.

CGをマーカーに追従させる tick: function (time, timeDelta) { //もしマーカー追跡中ならば if(this.isTracking){ //このスクリプトが適用されているオブジェクト(=マーカー)を取得 var marker=this.el.object3D; //マーカーの位置を取得 var p = new THREE.Vector3(); marker.getWorldPosition(p); //マーカーの姿勢(向き)を取得 var q = new THREE.Quaternion(); marker.getWorldQuaternion(q); //AR表示に用いるオブジェクトの位置・姿勢に反映 var obj =this.data.arobject.object3D; obj.position.set(p.x, p.y, p.z); obj.quaternion.set ( q.x, q.y, q.z, q.w); } } lesson13

91.

[beta]

CGをマーカーに追従させる
<script>
AFRAME.registerComponent('markerhandler', {

schema: {
arobject: {type: 'selector’}
},

これをHTML内で記述したCGと関連づける(次のページ)

init: function () {
//マーカー検出イベントの設定(スペースの都合により省略)
},
tick: function (time, timeDelta) {

// CGをマーカーに追従させる
}
});
</script>

スクリプトで定義したarobjectとHTML内のar-objectsを対応づける

92.

[beta]

CGをマーカーに追従させる
<head>
<meta charset="utf-8">
<title>Hello, WebVR! • A-Frame</title>
<meta name="description" content="Hello, WebVR! • A-Frame">
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<script src="https://raw.githack.com/AR-jsorg/AR.js/master/aframe/build/aframe-ar.js"></script>
<script>

<!-- 自作コンポーネントのmarkerhandler (スペースの都合時により省略) -->
</script>
</head>

ここを編集(次のページ)

<body>
<a-marker markerhandler preset="hiro"> </a-marker>
<a-scene embedded arjs>
スペースの都合により省略
</a-scene>
</body>

93.

[beta]

CGをマーカーに追従させる
<body>
<a-scene embedded arjs>
<a-marker markerhandler ="arobject:#ar-objects" preset="hiro">
</a-marker>
<a-entity id="ar-objects">
<a-sphere position="0 1.25 0" radius="1.25" src="画像のURL" shadow
animation="
property:rotation;
dur:10000;
from:0 0 0;
to:0 360 0;
loop:-1;
easing:linear;
">
</a-sphere>
</a-entity>
<a-entity camera></a-entity>
</a-scene>
lesson14
</body>

94.

確認マーカーに追従

95.

[beta]

マーカーを見失ったらCGを画面中央に置く
<script>
AFRAME.registerComponent('markerhandler', {

schema: {
arobject: {type: 'selector’}
},

次はここ

init: function () {

マーカー検出イベントの設定(スペースの都合により省略)
},
tick: function (time, timeDelta) {

// CGをマーカーに追従させる
}
});
</script>

マーカーロスト時のイベントの中でCGの位置を指定する。

96.

[beta]

マーカーを見失ったらCGを画面中央に置く
init: function () {
//マーカー検出/ロストの状態を管理する変数を定義しfalseで初期化
this.isTracking=false;
//markerFoundはマーカー検出時に呼ばれる
this.el.sceneEl.addEventListener('markerFound', () => {
this.isTracking=true;
console.log("tracking:"+ this. isTracking);
});

//markerLostはマーカーロスト時に呼ばれる
this.el.sceneEl.addEventListener('markerLost', () => {
this.isTracking=false;
console.log("tracking:"+ this. isTracking);

ここにコードを追加 (次のページ)
});
}

97.

[beta]

マーカーを見失ったらCGを画面中央に置く
this.el.sceneEl.addEventListener('markerLost', () => {
this.isTracking=false;
console.log("tracking:"+ this. isTracking);
var obj =this.data.arobject.object3D; //ARオブジェクトを取得
obj.position.set(0,0,-6); //z=-6 (画面置く方向に配置)

obj.quaternion.set ( 0,0,0,1); //姿勢を初期状態に戻す
obj.rotateX ( 3.14/2 ) ; //90度回転させて調整
});

lesson15

傾いたまま
ロスト

90度回転

初期姿勢

位置(0,0,-6)

初期姿勢

向きの調整

98.

完成

99.

おまけ

100.

画面をなぞってCGを回転

101.

地球のCGをjavascriptで制御する準備 <body> マーカーロスト時の位置・姿勢を微調整されてる <a-scene embedded arjs> <a-marker markerhandler="arobject:#ar-objects" preset="hiro"> </a-marker> <a-entity id="ar-objects"> <a-sphere position="0 1.25 0" radius="1.25" src=”URL" shadow animation="省略" > </a-sphere> </a-entity> <a-entity camera></a-entity> </a-scene> </body> アニメーションで勝手に値が変わる画面操作以外の要因で値が変わる部分はこれ以上、操作しない方が分かり易い

102.

地球のCGをjavascriptで制御する準備 <body> <a-scene embedded arjs> <a-marker markerhandler="arobject:#ar-objects" preset="hiro"> </a-marker> Earthという名前の空オブジェクト <a-entity id="ar-objects"> <a-entity id="earth"> <a-sphere position="0 1.25 0" radius="1.25" src=”URL" shadow animation="省略" > </a-sphere> </a-entity> </a-entity> 終了を忘れずに <a-entity camera></a-entity> </a-scene> lesson16 </body> 解決案：画面操作用の要素を一つ作りa-sphereの親にする

103.

[beta]

画面操作用スクリプトの追加
<head>
<meta name="description" content="Hello, WebVR! • A-Frame">
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<script src="https://raw.githack.com/AR-jsorg/AR.js/master/aframe/build/aframe-ar.js"></script>
<script>

画面操作用スクリプトを追加(次のページ)
自作コンポーネント(markerhandler)
</script>
</head>
<body>
<a-marker markerhandler preset="hiro"> </a-marker>
<a-scene embedded arjs>
スペースの都合上中略
</a-scene>
</body>

104.

[beta]

画面操作用スクリプトの追加
<script>
window.onload = function() {
//マウス操作に対応
window.addEventListener('mousedown', touchDownHandler);
window.addEventListener('mousemove', touchMoveHandler);
window.addEventListener('mouseup', touchEndHandler);
//スマホ画面操作に対応
window.addEventListener('touchstart', touchDownHandler);
window.addEventListener('touchmove', touchMoveHandler);
window.addEventListener('touchend', touchEndHandler);
};
AFRAME.registerComponent('markerhandler', {
schema: { /*省略*/ },
init: function () {{ /*省略*/ },
tick: function (time, timeDelta) {{ /*省略*/ }
});
</script>

lesson17

105.

画面操作用スクリプトの追加 window.onload = function() { //マウス操作に対応 window.addEventListener('mousedown', touchDownHandler); window.addEventListener('mousemove', touchMoveHandler); window.addEventListener('mouseup', touchEndHandler); //スマホ画面操作に対応 window.addEventListener('touchstart', touchDownHandler); window.addEventListener('touchmove', touchMoveHandler); window.addEventListener('touchend', touchEndHandler); }; var touchDownHandler= function(e) { }; var touchEndHandler= function(e) { }; var touchMoveHandler = function(e) { }; lesson18

106.

画面操作用スクリプトの追加 var startX; //画面タッチorクリック開始位置 var pressed=false; //現在画面を触っているか否か var touchDownHandler= function(e) { pressed=true; //画面操作開始 if (e.touches && e.touches[0]) {//スマホ画面をタッチしたなら startX = e.touches[0].clientX; } else if (e.clientX) {//PC画面をクリックしたなら startX = e.clientX; } }; var touchEndHandler= function(e) { pressed=false; //画面操作終了 }; var touchMoveHandler = function(e) { //指移動時に回転させる(次のページで解説) }; lesson19

107.

画面操作用スクリプトの追加 var startX; //画面タッチorクリック開始位置 var pressed=false; //現在画面を触っているか否か var touchDownHandler= function(e) { /*中略*/ }; var touchEndHandler= function(e) { /*中略*/ }; var touchMoveHandler = function(e) { if(pressed){ //画面操作中なら var x = 0; if (e.touches && e.touches[0]) { x = e.touches[0].clientX; } else if (e.clientX) { x = e.clientX; } var obj =document.getElementById("earth").object3D; obj.rotateZ((x-startX)*0.001); //Z軸回転 } }; lesson20

108.

完成

109.

参考 • AR.js [概要] https://ar-js-org.github.io/AR.js-Docs/ [イベント取得] https://ar-js-org.github.io/AR.js-Docs/ui-events/ [マーカー作成] https://jeromeetienne.github.io/AR.js/three.js/example s/marker-training/examples/generator.html • A-Frame [javascriptで制御] https://aframe.io/docs/1.2.0/introduction/javascriptevents-dom-apis.html [コンポーネント作成] https://aframe.io/docs/1.2.0/introduction/writing-acomponent.html

110.

AR-Frame x AR.js入門 vol.1

Takashi Yoshinaga

関連スライド

ARCore Geospatial API x Unityハンズオン by AR Fukuoka

Unityで始めるWebAR with ZapWorks

Getting Started with ARCore Geospatial API & Unity

AR.jsとA-Frameではじめるお手軽WebAR/VR

はじめようShader Graph: クロマキー処理

MRTKではじめるPortal表現

各ページのテキスト