diff --git a/paper/reroad-resume.pdf b/paper/reroad-resume.pdf index b0a22af..5df544e 100644 --- a/paper/reroad-resume.pdf +++ b/paper/reroad-resume.pdf Binary files differ diff --git a/paper/reroad-resume.tex b/paper/reroad-resume.tex index 0eafe60..e581fb0 100644 --- a/paper/reroad-resume.tex +++ b/paper/reroad-resume.tex @@ -72,7 +72,7 @@ \subsection{位置呼応マップ} % \input{system-map} \subsection{VRインタラクション} - %\input{system-vr} + \input{system-vr} \section{検証} \begin{quote} 実際に動かしてみての、狙った効果がどの程度実現されているかにつ diff --git a/paper/system-vr.tex b/paper/system-vr.tex new file mode 100644 index 0000000..7e21e91 --- /dev/null +++ b/paper/system-vr.tex @@ -0,0 +1,42 @@ +\sr のVRパートでは,現地で撮影した360° パノラマ画像をA-Frameを用いてVR画像として表示している。以下ではA-Frameの概要と実際のソースコードをもとにVRインタラクションに関して説明する。 +\subsubsection{A-Frame} +A-Frameは,WebVRの作成を行うオープンソースのWebフレームワークである。利用するためには,HTMLファイル内のscriptタグにA-Frameを読み込ませる必要がある。その後,同じHTMLファイル内に専用のタグを記述していくことでVRの作成が可能であり,そこに画像やオブジェクト,カーソル等を追加し容易にVR空間を作成することができる。また,WebGLやWebVR対応のブラウザーがあればA-Frameは動作するため,デバイスの互換性は高く,広い範囲で動作対応している。 +\subsubsection{VRの実装} +A-Frameを用いてWebVRを実装するにあたり,実際にVRパートに追加した機能を以下に示す。 +\begin{itemize} +\item 注視することでクリックイベントが呼ばれる視点カーソル +\item 視点カーソルのアニメーション +\item クイズページへ移行するオブジェクト +\end{itemize} +VRの実装はHTMLファイル内で行なっており,クリックイベントやページ移行の処理はJavaScriptで行なっている。注視によるクリックイベントの呼び出しは,タグ内でタイムアウトする秒数を設定しておき,規定の秒数後にクリックイベントが発生するという形で実現している。以下にVR実装のソースコードを示す。 + +\begin{itembox}[l]{VRの実装} +\begin{lstlisting} + +//ページにWebVRを作成する + + + +//画像を事前に読み込む + + +//背景に画像を設定する + + +//カメラの初期位置を設定する + "x y z"軸で指定する + +//カーソルのエンティティを設定する + +//カーソルがオブジェクトに触れた + 時のアニメーションを設定する + + + + + //オブジェクトを配置する + + + +\end{lstlisting} +\end{itembox} \ No newline at end of file diff --git a/paper/system-web.tex b/paper/system-web.tex index 31c4cce..6f110ad 100644 --- a/paper/system-web.tex +++ b/paper/system-web.tex @@ -39,7 +39,7 @@ \label{yoko} \end{figure} -\subsubsection{ロード画面の追加} +\subsubsection{ロード画面の実装} \sr のWebページには,読み込みの際に表示させるロード画面を実装するにあたり,JavaScriptライブラリの一つである「jQuery」を用いている。ロード画面を表示させるHTMLファイル内のscriptタグにjQueryを指定するURLを記述することでライブラリの利用を可能にしている。実際のロード画面は,gif画像とNow Loading...の文字をHTML内で追加することで構成している(図\ref{load})。以下はロード画面実装の記述である。 \begin{itembox}[l]{ロード画面の実装} \begin{lstlisting}