素材データを用意する
今回はVR空間に動画を配置し、それを制御するボタンを作ってみます。
映像データ
mp4形式の映像データは、NHKクリエイティブライブラリから借りる事ができます。(利用規約を確認しておきましょう)
ダウンロードしたデータは"video_namahage.mp4"という名前にして、"assets"フォルダに格納しておきます。
画像データ
次に、再生ボタンと停止ボタンで使う画像ファイルを用意します。
再生ボタン(img_play.png)
停止ボタン(img_pause.png)
これらも動画と同じく、"assets"フォルダに格納しておきます。
素材データの読み込み
A-Frameで利用するデータの読み込みをしていきましょう。
素材の読み込みには専用のタグが用意されています。
a-assetsタグ
A-Frameで利用する画像や動画、サウンド等のデータは"a-assets"タグの中に記述します。
<a-assets timeout="10000"></a-assets>
imgタグ
"a-assets"タグの中に、"img"タグを記述する事で画像データを読み込む事ができます。
アトリビュートの"id"を使って読み込んだデータにアクセスする事ができます。
"src"にはファイルへのパスを記述します。
<img id="img_play" src="./assets/img_play.png"></img>
videoタグ
"a-assets"タグの中に、"video"タグを記述する事で映像データを読み込む事ができます。
アトリビュートの"id"を使って読み込んだデータにアクセスする事ができます。
"src"にはファイルへのパス、"loop"は連続再生の設定です。
<video id="video_namahage" src="./assets/video_namahage.mp4" loop="true"></video>
カメラ正面にカーソルを配置する
カメラの方向(画面に写っている正面ですね)に対してカーソルを配置します。
a-cameraタグとa-cursorタグ
"a-camera"タグは、文字通りカメラを表します。
アトリビュートとして"id"を付け、この"id"を使ってプログラムからカメラにアクセスします。
カメラからは、ユーザーが立っている位置や向いている方向等を取得する事ができます。(具体的な処理はプログラムに記述します)
"a-cursor"タグは、カメラ正面に現れる小さい円の事です。
このカーソルにオブジェクトを合わせてクリックする事で、様々な処理をさせる事が可能になります。(具体的な処理はプログラムに記述します)
<a-camera id="my_camera">
<a-cursor></a-cursor>
</a-camera>
動画ファイルを配置する
動画の配置もとても簡単です。
立方体や球を配置した要領で記述するイメージです。
a-videoタグ
"a-video"タグは、動画を配置するタグです。
アトリビュートである"src"には、先ほど"a-assets"タグで読み込んだ映像データの"id"を指定します。
他のアトリビュートは次の表を参考にしてください。
| アトリビュート名 | 記述例 | 意味 |
|---|---|---|
| src | #video_namahage | 動画素材のid(#を忘れずに!!) |
| position | 0 2.5 -3 | 動画の座標 |
| rotation | -90 0 0 | 動画の回転角度 |
| width | 4 | 動画の横幅 |
| height | 2.25 | 動画の高さ |
<a-video src="#video_namahage" position="0 2.5 -3" rotation="0 0 0" width="4" height="2.25"></a-video>
ボタンを配置する
"a-image"タグは、画像を配置するタグです。
アトリビュートにある"id"には、この画像に対してidをつけています。
これは、ボタンに対するアクションを後ほどJavaScriptで制御する為につけています。
そして"src"には、先ほど"a-assets"タグで読み込んだ画像データの"id"を指定します。
他のアトリビュートは次の表を参考にしてください。
| アトリビュート名 | 記述例 | 意味 |
|---|---|---|
| id | my_btn01 | 画像オブジェクトにつけるid(プログラムで制御します) |
| src | #img_pause | 画像素材のid(#を忘れずに!!) |
| position | 0 1.2 -3 | 画像の座標 |
| scale | 0.3 0.3 0.3 | 画像の拡大率 |
<a-image id="my_btn01" src="#img_pause" position="0 1.2 -3" scale="0.3 0.3 0.3"></a-image>
動作確認をしてみる
ここまでのコードを載せておきますね。(コピペで使えますよ!!)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<script src="https://unpkg.com/aframe-environment-component/dist/aframe-environment-component.min.js"></script>
<script src="./main.js"></script>
</head>
<body>
<a-scene stats loading-screen="dotsColor: gray; backgroundColor: lightgray">
<a-sky color="#ECECEC"></a-sky>
<a-entity environment="preset: default;"></a-entity>
<a-plane position="0 0.05 -5" rotation="-90 0 0" width="6" height="6" color="#7BC8A4"></a-plane>
<a-camera id="my_camera">
<a-cursor></a-cursor>
</a-camera>
<a-assets timeout="30000">
<video id="video_namahage" src="./assets/video_namahage.mp4" loop="true"></video>
<img id="img_play" src="./assets/img_play.png"></img>
<img id="img_pause" src="./assets/img_pause.png"></img>
</a-assets>
<a-video src="#video_namahage" position="0 2.5 -3" rotation="0 0 0" width="4" height="2.25"></a-video>
<a-image id="my_btn01" src="#img_pause" position="0 1.2 -3" scale="0.3 0.3 0.3"></a-image>
</a-scene>
</body>
</html>
これだけの記述で、動画とボタンがをVR画面に配置する事ができます。(やりました!!)
次回は、ボタンを使った動画の制御についてのお話です。