More Related Content
Similar to A-Framで始めるWebAR (Blenderハンズオンの続きver.) (20)
More from Takashi Yoshinaga (20)
A-Framで始めるWebAR (Blenderハンズオンの続きver.)
- 17. 必要なもの
Webブラウザ → コンテンツの体験や動作確認
テキストエディタ → HTMLやjavascriptの記述
Webサーバー → コンテンツの公開
サーバーに関して今回は・・・
Glitchを利用 https://glitch.com/
◆ FacebookかGitHubのアカウントがあればOK
◆ サーバーとエディタの両方を無料で提供
この資料ではGlitch使用を前提に説明します
- 24. ソースの確認
<html>
<head>
<title>Hello, WebVR! - A-Frame</title>
<meta name="description" content="Hello, WebVR! - A-Frame">
<script src="https://aframe.io/releases/0.9.2/aframe.min.js">
</script>
</head>
<body>
<a-scene background="color: #FAFAFA">
表示するオブジェクトや視点の設定をここに記述
</a-scene>
</body>
</html>
ヘッダー部でA-Frameの機能を提供するライブラリを取り込む
<a-scene>と</a-scene>の間に描画に関する記述をする
- 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/0.9.0/primi
tives/a-box.html (例:a-boxの詳細)
位置 回転 色
- 30. <a-scene background="color: #FAFAFA ">
<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の編集に慣れよう
#AAAAAA
position="-1 0.5 -2" rotation="0 0 0"
position="0 1.25 -4" radius="0.7"
height="0.7"
- 33. <a-scene background="color: #AAAAAA">
<a-box position="-1 0.5 -2" rotation="0 0 0" color="#4CC3D9">
</a-box>
<a-sphere position="0 1.25 -4" radius="0.7" color="#EF2D5E">
</a-sphere>
<a-cylinder position="1 0.75 -3" radius="0.5" height="0.7"
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-sceneの内側のa-box, a-sphere, a-cylinder, a-plane
タグを削除してまっさらにしましょう
<a-box position="-1 0.5 -2" rotation="0 0 0" color="#4CC3D9">
</a-box>
<a-sphere position="0 1.25 -4" radius="0.7" color="#EF2D5E">
</a-sphere>
<a-cylinder position="1 0.75 -3" radius="0.5" height="0.7"
color="#FFC65D"></a-cylinder>
<a-plane position="0 0 -4" rotation="-90 0 0"
width="4" height="4" color="#7BC8A4"></a-plane>
- 43. ソースの書き換え
<head>
<title>Hello, WebVR! - A-Frame</title>
<meta name="description" content="Hello, WebVR! - A-Frame">
<script src="https://aframe.io/releases/0.7.0/aframe.min.js"></script>
</head>
<body>
<a-scene>
<a-obj-model></a-obj-model>
</a-scene>
</body>
<a-obj-model></a-obj-model>を追加
- 46. ソースの書き換え
<head>
<title>Hello, WebVR! - A-Frame</title>
<meta name="description" content="Hello, WebVR! - A-Frame">
<script src="https://aframe.io/releases/0.7.0/aframe.min.js"></script>
</head>
<body>
<a-scene>
<a-obj-model src="duck.objのURL" mtl="duck.mtlのURL"></a-obj-model>
</a-scene>
</body>
<a-obj-model>タグ内でmtlファイルのURLを指定
- 48. ソースの書き換え
<head>
<title>Hello, WebVR! - A-Frame</title>
<meta name="description" content="Hello, WebVR! - A-Frame">
<script src="https://aframe.io/releases/0.7.0/aframe.min.js"></script>
</head>
<body>
<a-scene>
<a-obj-model scale = "0.5 0.5 0.5 "
src="duck.objのURL" mtl="duck.mtlのURL"></a-obj-model>
</a-scene>
</body>
<a-obj-model>タグ内でmtlファイルのURLを指定
- 49. ソースの書き換え
<head>
<title>Hello, WebVR! - A-Frame</title>
<meta name="description" content="Hello, WebVR! - A-Frame">
<script src="https://aframe.io/releases/0.7.0/aframe.min.js"></script>
</head>
<body>
<a-scene>
<a-obj-model scale = "0.5 0.5 0.5 " rotation = "0 135 0"
src="duck.objのURL" mtl="duck.mtlのURL"></a-obj-model>
</a-scene>
</body>
<a-obj-model>タグ内でmtlファイルのURLを指定
- 52. AR.jsをインポート & カメラ画像の表示
<head>
<title>Hello, WebVR! - A-Frame</title>
<meta name="description" content="Hello, WebVR! - A-Frame">
<script src="https://aframe.io/releases/0.7.0/aframe.min.js"></script>
<script src="https://jeromeetienne.github.io/AR.js/aframe/build/
aframe-ar.js"></script>
</head>
<body>
<a-scene>
<a-obj-model scale = "0.5 0.5 0.5 " rotate = "0 135 0 "
src="duck.objのURL" mtl="duck.mtlのURL"></a-obj-model>
</a-scene>
</body>
AR.jsの読み込みをしたあと、a-sceneタグにembeddedを追加
追加
<a-scene embedded>
追加
- 53. マーカーを認識してその上にCGを表示
<body>
<a-scene embedded arjs>
<a-marker preset="hiro">
<a-obj-model scale = "0.5 0.5 0.5 " rotate = "0 135 0 "
src="duck.objのURL" mtl="duck.mtlのURL"></a-obj-model>
</a-marker>
</a-scene>
</body>
AR表示をするにはマーカーとCGとの関連付けが必要
A-Frameの場合<a-marker></a-marker>でCGを挟む
presetでマーカー名を指定 (付属マーカーのHiro使用)
正方形内のマーカーを独自に作ることも可能 (参考)
マーカーの上にこれを表示したい
追加
- 57. <head>
<title>Hello, WebVR! - A-Frame</title>
<meta name="description" content="Hello, WebVR! - A-Frame">
<script src="https://aframe.io/releases/0.7.0/aframe.min.js"></script>
<script src="https://jeromeetienne.github.io/AR.js/aframe/build/
aframe-ar.js"></script>
</head>
<body>
<a-scene embedded arjs="debugUIEnabled:false;">
<a-marker preset="hiro">
<a-obj-model scale = "0.5 0.5 0.5" rotation = "0 135 0"
src="URL" mtl="URL">
</a-obj-model>
</a-marker>
<a-entity camera> </a-entity>
</a-scene>
</body>
追加