Mais conteúdo relacionado
Semelhante a OSC2020 Fukuoka: インストールいらず、WebAR入門 (20)
Mais de Takashi Yoshinaga (19)
OSC2020 Fukuoka: インストールいらず、WebAR入門
- 17. 必要なもの
Webブラウザ → コンテンツの体験や動作確認
テキストエディタ → HTMLやjavascriptの記述
Webサーバー → コンテンツの公開
サーバーに関して今回は・・・
Glitchを利用 https://glitch.com/
FacebookかGitHubのアカウントがあればOK
サーバーとエディタの両方を無料で提供
この資料ではGlitch使用を前提に説明します
- 23. ソースの確認
<html>
<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-scene>
</body>
</html>
ヘッダー部でA-Frameの機能を提供するライブラリを取り込む
<a-scene>と</a-scene>の間に描画に関する記述をする
- 24. ソースの確認
<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>
基本図形はa-xxxタグで提供されている
https://aframe.io/docs/1.0.0/primi
tives/a-box.html (例：a-boxの詳細)
位置 回転 色
- 32. <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の記述の中からタグを削るだけ
この後の演習のため、a-sphereのみを
残して削除してみましょう
<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>
lesson01
- 40. ソースの書き換え
<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-sphere position="0 1.25 -5" radius="1.25" src="コピーしたURL"
shadow> </a-sphere>
</a-scene>
</body>
a-sphereの色をcolor(色)ではなくsrc(画像へのリンク)に変更
srcの右辺に前操作でコピーした画像のURLを貼り付ける
colorをsrcに変更
lesson02
- 47. AR.jsをインポート & カメラ画像の表示
<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>
<script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/
build/aframe-ar.js"></script>
</head>
<body>
<a-scene background="color: #FAFAFA">
<a-sphere position="0 1.25 -5" radius="1.25" src="URL" shadow>
</a-sphere>
</a-scene>
</body>
AR.jsの読み込みをしたあと、a-sceneタグにembeddedを追加
追加
<a-scene embedded>
背景色を削除してembeded
lesson03
- 48. マーカーを認識してその上にCGを表示
<body>
<a-scene embedded arjs>
<a-marker preset="hiro">
<a-sphere position="0 1.25 -5" radius="1.25" src="URL" shadow>
</a-sphere>
</a-marker>
</a-scene>
</body>
AR表示をするにはマーカーとCGとの関連付けが必要
A-Frameの場合<a-marker></a-marker>でCGを挟む
presetでマーカー名を指定 (付属マーカーのHiro使用)
正方形内のマーカーを独自に作ることも可能 (参考)
マーカーの上にこれを表示したい
追加
lesson04
- 54. おまけ：アニメーションの追加
<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; ←繰り返し回数
easing : linear;
"
>
</a-sphere>
animationを用いてアニメーションに関する設定を行う
Z
X
Y
"を忘れずに！
lesson07
