AR-Frame x AR.js入門 vol.2
7.3K Views
April 17, 21
スライド概要
可視化技術や人間計測/空間計測技術を活用した問題解決に関する研究開発。 ARコンテンツ作成勉強会(tryAR)を主催。
関連スライド
各ページのテキスト
Web AR/VR開発入門 (1)オブジェクトのランダム表示 (2)ビデオ再生
前回の内容 https://www.slideshare.net/ssuserc0d7fb/arframe-x-arjs
素材のダウンロード http://arfukuoka.lolipop.jp/ARjs2021vol 2/sample.zip
今日のテーマ1: オブジェクトのランダム表示 https://arjs-random.glitch.me マーカーを認識する度に異なるオブジェクトが表示
テンプレートをダウンロード https://glitch.com/~arjs-random-template Remix Your Own
index.htmlの表示
index.htmlの表示 マーカー検出 に関する挙動 を記述 (今は空っぽ) A-Frameで ARを実現
動作確認 Ctrl+Alt+i マーカーの上にGCが表示されればOK。(実際は3つのオブジェクト)
初期状態ではCGを非表示にする ここを編集
初期状態ではCGを非表示にする <body> <a-scene embedded arjs> visible="false"を追加 <a-marker preset="hiro"> <a-sphere position="0 1.25 0" radius="1.25" color="#EF2D5E" shadow visible="false"> </a-sphere> <a-box position="0 0.625 0" scale="1.25 1.25 1.25" color="#00FFFF" shadow visible="false"></a-box> <a-cylinder position="0 0.75 0" radius="0.5" height="1.5" color="#FFC65D" shadow visible="false"></a-cylinder> </a-marker> <a-entity camera></a-entity> </a-scene> </body> Lesson01
javascriptで表示・非表示を切り替える準備 ここにデータ を渡す準備
javascriptで表示・非表示を切り替える準備 ここを編集
javascriptで表示・非表示を切り替える準備 <a-scene embedded arjs> randomObjectsという名前の親オブジェクト <a-marker preset="hiro"> <a-entity id="randomObjects"> <a-sphere position="0 1.25 0" radius="1.25" color="#EF2D5E" shadow visible="false"> </a-sphere> <a-box position="0 0.625 0" scale="1.25 1.25 1.25" color="#00FFFF" shadow visible="false"></a-box> <a-cylinder position="0 0.75 0" radius="0.5" height="1.5" color="#FFC65D" shadow visible="false"></a-cylinder> </a-entity> </a-marker> <a-entity camera></a-entity> </a-scene> Lesson02 親オブジェクトを作成することで子要素ごと一括してjavascript側に渡せる
javascriptで表示・非表示を切り替える準備 <a-scene embedded arjs> markerhandlerに.randomObjを渡す <a-marker markerhandler = "arobjects: #randomObjects" preset="hiro"> <a-entity id="randomObjects"> <a-sphere position="0 1.25 0" radius="1.25" color="#EF2D5E" shadow visible="false"> </a-sphere> <a-box position="0 0.625 0" scale="1.25 1.25 1.25" color="#00FFFF" shadow visible="false"></a-box> <a-cylinder position="0 0.75 0" radius="0.5" height="1.5" color="#FFC65D" shadow visible="false"></a-cylinder> </a-entity> </a-marker> <a-entity camera></a-entity> Lesson03 </a-scene> markerhandlerに親オブジェクトを渡し、javascriptで子要素を操作
マーカーの表示・非表示切り替え ここを編集
マーカーの表示・非表示切り替え
AFRAME.registerComponent('markerhandler', {
schema: {
arobjectsにはid randomObjects
arobjects: {type: 'selector '}
のオブジェクトが渡されている
},
init: function () {
まずはここでCGの取得や初期化
//markerFoundはマーカー検出時に呼ばれる
this.el.sceneEl.addEventListener('markerFound', () => {
});
//markerLostはロスト時に呼ばれる
this.el.sceneEl.addEventListener('markerLost', () => {
});
}
});
マーカーの表示・非表示切り替え
schema: {
arobjects: {type: 'string'}
},
init: function () {
//ランダム表示させるオブジェクトの親を取得
var parentObj = this.data.arobjects;
//ランダム表示させるオブジェクトの一覧を取得
this.objectList=parentObj.children;
//表示するオブジェクトを覚えておく変数
this.visibleObject;
//markerFoundはマーカー検出時に呼ばれる
this.el.sceneEl.addEventListener('markerFound', () => {
});
//markerLostはロスト時に呼ばれる
this.el.sceneEl.addEventListener('markerLost', () => {
});
}
Lesson04
マーカーの表示・非表示切り替え
init: function () {
//ランダム表示させるオブジェクトの親を取得
var parentObj = this.data.arobjects;
//ランダム表示させるオブジェクトの一覧を取得
this.objectList=parentObj.children;
//表示するオブジェクトを覚えておく変数
this.visibleObject;
//markerFoundはマーカー検出時に呼ばれる
this.el.sceneEl.addEventListener('markerFound', () => {
検出時にどれか一つをvisible onにする
});
//markerLostはロスト時に呼ばれる
this.el.sceneEl.addEventListener('markerLost', () => {
表示しているオブジェクトのvisible offにする
});
}
マーカーの表示・非表示切り替え
//markerFoundはマーカー検出時に呼ばれる
this.el.sceneEl.addEventListener('markerFound', () => {
//0~1の乱数にオブジェクト数をかけて0~nの乱数を生成
var index = Math.floor(Math.random() * this.objectList.length);
//確認用に番号を表示
console.log(index);
//index番目のオブジェクトを取得し、visibleObjectで覚えておく
this.visibleObject = this.objectList[index];
//index番目のオブジェクトのvisibleをon
this.visibleObject.setAttribute('visible','true');
});
//markerLostはロスト時に呼ばれる
this.el.sceneEl.addEventListener('markerLost', () => {
//表示中のオブジェクト(visibleObject)を非表示
this.visibleObject.setAttribute('visible','false');
});
Lesson05
完成 https://glitch.com/~arjs-random
今日のテーマ2: ビデオの再生 https://arjs-video-play.glitch.me
テンプレートをダウンロード https://glitch.com/~arjs-video-template Remix Your Own
index.htmlの表示 マーカー検出 に関する挙動 を記述 A-Frameで ARを実現
ビデオの準備 ここを編集
ビデオの準備 <body> <!--A-Frameを用いた描画--> <a-scene embedded arjs> <a-marker preset="hiro"></a-marker> <a-entity camera></a-entity> </a-scene> <!--ビデオの読み込み(非表示)--> <video id="video" loop muted crossorigin="anonymous" playsinline style="display:none"> <source src=" "> </video> </body> このあと、ここで指定するビデオのURLを取得 Lesson06
ビデオファイルのアップロード assets
ビデオファイルのアップロード Upload an Asset → ビデオをアップロード
ビデオファイルのアップロード ビデオファイルをクリック
ビデオファイルのアップロード copyをクリック
ビデオの読み込み index.htmlをクリック
ビデオの読み込み <body> <!--A-Frameを用いた描画--> <a-scene embedded arjs> <a-marker preset="hiro"></a-marker> <a-entity camera></a-entity> </a-scene> <!--ビデオの読み込み(非表示)--> <video id="video" loop muted crossorigin="anonymous" playsinline style="display:none"> <source src="ビデオのURL"> </video> </body> ここにURLを貼り付ける
ビデオをjavascriptで操作 <body> <!--A-Frameを用いた描画--> <a-scene embedded arjs> <a-marker markerhandler="arobject:#video" preset="hiro"></a-marker> <a-entity camera></a-entity> </a-scene> <!--ビデオの読み込み(非表示)--> <video id="video" loop muted crossorigin="anonymous" playsinline style="display:none"> <source src="ビデオのURL"> </video> </body> video要素をjavascript側に渡す Lesson07
ビデオをjavascriptで操作 ここを編集
ビデオをjavascriptで操作
var videoMesh; //ビデオのオブジェクトを扱う変数
var videoSrc: //ビデオ要素を扱う変数
//ビデオのオブジェクトを生成する関数
function createVideoObject( ){
}
AFRAME.registerComponent('markerhandler', {
schema: {
arobject: {type: 'selector'}
},
init: function () {
//video要素を取得
videoSrc = this.data.arobject;
//video要素を用いてビデオを表示するオブジェクトを作成
createVideoObject( );
//マーカー検出/ロストの状態を管理する変数を定義しfalseで初期化
this.isTracking=false;
this.el.sceneEl.addEventListener('markerFound', () => { /*マーカ検出*/ });
this.el.sceneEl.addEventListener('markerLost', () => {/*マーカロスト*/ });
},
Lesson08
ビデオをjavascriptで操作
//ビデオのオブジェクトを生成する関数
function createVideoObject( ){
//ビデオのテクスチャ
const texture = new THREE.VideoTexture(videoSrc);
texture.minFilter = THREE.NearestFilter;
//ビデオを四角形の板に貼り付ける
var videoMaterial = new THREE.MeshBasicMaterial({map: texture,
overdraw: true, side:THREE.DoubleSide});
var videoGeometry = new THREE.PlaneGeometry(1.66666, 1, 5, 5);
videoMesh= new THREE.Mesh(videoGeometry, videoMaterial);
var scene = document.querySelector('a-scene').object3D;
scene.add(videoMesh);
//ビデオを再生
videoSrc.play();
}
Lesson09
ビデオをマーカーに追従させる ここを編集
ビデオをマーカーに追従させる
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);
/*上記で取得したp,qを用いてビデオをマーカーに追従させる*/
videoMesh.quaternion.set ( q.x, q.y, q.z, q.w);
videoMesh.rotateX ( -3.14/2 ) ; //90度回転させて調整
videoMesh.position.set(p.x, p.y, p.z);
}
Lesson10
マーカーロスト時の挙動 ここを編集
マーカーロスト時の挙動
init: function () {
createVideoObject( this.data.arobject);
//マーカー検出/ロストの状態を管理する変数を定義し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);
/*マーカーを見失ったら画面にビデオを貼り付ける*/
videoMesh.position.set(0,0,-6); //z=-6
videoMesh.quaternion.set ( 0,0,0,1); //姿勢を初期状態に戻す
});
Lesson11
},
完成 https://glitch.com/~arjs-video-play
ビデオ再生フルバージョン • 画面タップによる再生 • 音声再生 [プロジェクト] https://glitch.com/~arjs-video-full [動作のみ確認] https://glitch.com/~arjs-video-full
参考 • javascriptによるビデオビデオ操作 https://cly7796.net/blog/javascript/m anipulate-the-video-in-javascript/ https://www.marukinad.co.jp/marulog/?p=2721