前回の続きです。
3 VR空間に画像や図形を置く
A-Frameにはいくつかあらかじめ用意された図形があります。
用意された図形の例は、公式ドキュメントを見てもらうとわかりやすいかもしれません。リンク先の画像を見てみてください。
例えば次のように記述すると、VR空間内に立方体を配置することができます。好きな色を設定することもできますよ。立方体を配置するために追加した記述は赤色で示してあります。
blog02.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ブログ用</title>
<script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
//外部ライブラリを読み込む場合
<script src="../js/aframe.min.js"></script>
//同じサーバーにアップロードする場合
<!-- 使用したライブラリ等の情報およびライセンスは次を参照 https://da.lib.shimane-u.ac.jp/virtual_tour/about.html#used -->
</head>
<body>
<a-scene vr-mode-ui="enabled: false" device-orientation-permission-ui="enabled: false" cursor="fuse: false; rayOrigin: mouse">
<a-sky src="../img/background/1F_outside.JPG" rotation="0 0 1" position="0 0 0"></a-sky>
<a-box color="#E3916E" rotation="0 0 0" position="0 0 -10" width="2" height="2" depth="2"></a-box>
</a-scene>
</body>
</html>
positionを0 0 0にしておくと見えにくいので、z軸方向に-10移動させることで少し奥の方に配置しました。
実際のページ
あらかじめ用意した画像を表示させたい場合は、a-boxでなくa-imageを使います。書き換えたところを赤字で示しています。
blog03.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ブログ用</title>
<script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
//外部ライブラリを読み込む場合
<script src="../js/aframe.min.js"></script>
//同じサーバーにアップロードする場合
<!-- 使用したライブラリ等の情報およびライセンスは次を参照 https://da.lib.shimane-u.ac.jp/virtual_tour/about.html#used -->
</head>
<body>
<a-scene vr-mode-ui="enabled: false" device-orientation-permission-ui="enabled: false" cursor="fuse: false; rayOrigin: mouse">
<a-sky src="../img/background/1F_outside.JPG" rotation="0 0 1" position="0 0 0"></a-sky>
<a-image width="2" height="2" rotation="0 0 0" position="0 0 -10" src="../img/icon/arrow_red.png"></a-image>
</a-scene>
</body>
</html>
実際のページ
上の例では赤い矢印が正面に表示されていると思います。赤い矢印の画像ファイルはあらかじめアップロードしておく必要があります。例えば下のような構成でフォルダなどを作り、アップロードします。
├─blog
│ └─blog03.html
└─img
├─background
│ └─1F_outside.JPG
└─icon
└─arrow_red.png
4 画像にリンクを貼ってクリックすると別ページへ飛ぶようにする
A-Frameにはa-linkという、リンクを貼るための機能があるのですが、これを使うと、リンク用の画像以外にも（A-Frameデフォルトの？）画像が表示されてしまったり、視点を動かすだけでもリンク先に飛んでしまったりしたので、別の方法を使います。
以下のvirutal_tour.jsの書き方は基本的に公式ドキュメントのWriting a ComponentとComponent、そしてstackoverflowに投稿された質問への回答を参考にしました。（末尾の「参考情報」参照）
今回は、htmlファイル以外にJavaScriptファイルを作ります。
virtual_tour.js
//同窓で開く用
AFRAME.registerComponent('same_window', {
schema: {
link: {type: 'asset', default: ''}
},
init: function () {
let data = this.data;
this.el.addEventListener('click', function () {
location.href = data.link;
});
}
});
//別窓で開く用
AFRAME.registerComponent('new_window', {
schema: {
link: {type: 'asset', default: ''}
},
init: function () {
let data = this.data;
this.el.addEventListener('click', function () {
open(data.link);
});
}
});
htmlファイルも以下のように赤字の部分を追加したり書き換えたりします。<a-text></a-text>の部分は、サンプルページで見たときにわかりやすいようにつけているだけなので、なくてもいいです。
blog04.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ブログ用</title>
<script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
//外部ライブラリを読み込む場合
<script src="../js/aframe.min.js"></script>
//同じサーバーにアップロードする場合
<!-- 使用したライブラリ等の情報およびライセンスは次を参照 https://da.lib.shimane-u.ac.jp/virtual_tour/about.html#used -->
<script src="../js/virtual_tour.js"></script>
</head>
<body>
<a-scene vr-mode-ui="enabled: false" device-orientation-permission-ui="enabled: false" cursor="fuse: false; rayOrigin: mouse">
<a-sky src="../img/background/1F_outside.JPG" rotation="0 0 1" position="0 0 0"></a-sky>
<a-text value="same_window" position="-3.5 1.5 -10" width="10" height="10"></a-text>
<a-image width="2" height="2" rotation="0 0 0" position="0 0 -10" src="../img/icon/arrow_red.png" same_window="link: https://www.lib.shimane-u.ac.jp/"></a-image>
<a-text value="new_window" position="0 1.5 -10" width="10" height="10"></a-text>
<a-image width="2" height="2" rotation="0 0 0" position="1.2 0 -10" src="../img/icon/arrow_red.png" new_window="link: https://www.lib.shimane-u.ac.jp/"></a-image>
</a-scene>
</body>
</html>virtual_tour.jsは下のような感じでアップロードしておきます。
├─blog
│ └─blog04.html
├─img
│ ├─background
│ │ └─1F_outside.JPG
│ └─icon
│ └─arrow_red.png
└─js
└─virtual_tour.js
公式ドキュメント等を読んだなんとなくの解釈を書いていきますが、飛ばしていただいてもかまいません。
1) コンポーネントの追加
AFRAME.registerComponent('same_window', {
schema: {
link: {type: 'asset', default: ''}
},
AFRAME.registerComponent() でコンポーネントを登録することを宣言し、same_windowという名前を付けます。same_windowの部分は好きな名前に変えることができます。
same_windowのプロパティ（リンク先）を追加するためにスキーマを記述します。schema: {} の中にlink: {type: 'asset', default: ''} を書いていくのですが、linkの部分は好きな名前に変えることができます。リンク先のアドレスを指すことがわかれば何でもいいと思います。プロパティタイプはassetにし、デフォルトは空欄にしました。プロパティタイプの説明で、assetの欄にurlと書いてあったのでassetにしてみましたが、手探りなので正解かわかりません。デフォルトの値（アドレス）を設定すると、そのアドレスにしか飛ばなくなるので値を書かずに''にしておきます。
2) initハンドラの追加
init: function () {
let data = this.data;
コンポ―ネントを動かすときの最初にinitハンドラを呼び出すらしいのでこれを書き、次にこれを見るとコンポーネントプロパティの値を設定する？のにthis.dataを、エンティティへの参照にthis.elを使うみたいなので、公式ドキュメントと同じように変数を宣言して格納します。公式ドキュメントでは変数宣言にvarを使っているのですが、この前読んだJavaScriptのテキストではletを使うとあったのでletを使ってみました。
clickイベントが使えるようにするためにイベントリスナーを追加しますが、initハンドラの項目の例にある書き方が参考になります。
3) イベントリスナーの追加
this.el.addEventListener('click', function () {
location.href = data.link;
});
}
});
クリックしたときに特定のアドレスに飛んで欲しいので、イベントのタイプとしてclickを指定して、functionにjavaScriptで同窓リンクさせるときに使うlocation.href（またはwidow.location.href）を書いてリンク先としてdata.linkを指定します。リンク先（data.link）の書き方で少しこんがらがったのですが、上記の回答やHandling Property Updatesの項目を見ると宣言した変数dataとスキーマのところで設定した項目（上の例だとlink）を連結させるとうまくいくようです。（ちなみに前述の回答を見るとスキーマのところはデフォルト値（空文字）だけでも動くようです。）
これでhtml内のコンポーネントsame_windowでlinkに指定したURLに飛ぶはずです。別窓で開くときはopen()（またはwindow.open()）を使います。実際のページは下のようになります。
かなり長くなってしまいました。また余裕ができたら追加の記事（日本語のテキストを表示させるときのやりかたとか）を書くかもしれません。必要に応じて公式ドキュメントやMDNなどを調べながらやってはいますが、見落としていたり理解が間違っていたりしたら申し訳ございません。また、A-FrameではJavaScriptを使うので、わからないところがあったらJavaScriptのテキストなどが役に立つかもしれません。
VR図書館ツアーや関連のWebページを作るときに使った機器、ライブラリ等はVR図書館ツアーについての「使用したもの」に書いてあります。ここに各ライブラリの名前、著作権表示、ライセンス、各ライブラリのライセンス文へのリンクを示すとともに、VR図書館ツアーの各ページ<head></head>内に<!-- 使用したライブラリ等の情報およびライセンスは次を参照 https://da.lib.shimane-u.ac.jp/virtual_tour/about.html#used -->という文を入れています。OSSを使用するときは個別にライセンスを確認の上、著作権表示等を行ってください。
参考情報
1) A-Frame. https://aframe.io/, (参照 2020-12-16).
2) "Need Help Creating Links To Other Web Pages In Aframe". Stack Overflow. 2018-2-27. https://stackoverflow.com/questions/49018866/need-help-creating-links-to-other-web-pages-in-aframe, (参照 2020-12-16)
回答者はNoam Almosnino氏
[mm]
