HTMLタグで書かれていますので、取っ付きやすい人も多いのではないでしょうか。
まず、サンプルであるexample01.htmlファイルの中身のコード全体を示します。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>VR tour</title>
<script src="https://aframe.io/releases/1.4.1/aframe.min.js"></script>
<script src="../assets/vr_tour.js"></script>
<link rel="preload" as="fetch" href="../assets/NotoSansJP-Regular.json" crossorigin></link>
<link rel="preload" as="image" href="../assets/NotoSansJP-Regular.png" crossorigin></link>
</head>
<body>
<!-- A-Frameでの描画はココから -->
<a-scene loading-screen="dotsColor: white; backgroundColor: black" vr-mode-ui="enabled: false"
cursor="fuse: false; rayOrigin: mouse" light="defaultLightEnabled: false">
<a-assets>
<!-- 360度写真 -->
<img id="3D_image" src="../images/example01.jpg">
<!-- 音声ファイル -->
<audio id="audio" src="../audio/example01.mp3" preload="auto"></audio>
<!-- アイコン画像 -->
<img id="vr_img" src="../assets/vrBtn.png">
<img id="info_img" src="../assets/infoBtn.png">
<img id="home_img" src="../assets/homeBtn.png">
<img id="audio_on_img" src="../assets/audioOnBtn.png">
<img id="audio_off_img" src="../assets/audioOffBtn.png">
</a-assets>
<a-light type="ambient" color="#fff"></a-light>
<!-- Oculusコントローラーの設定 -->
<a-entity id="leftControl" laser-controls="hand: left" vr-controller
raycaster="objects: .clickable;"></a-entity>
<a-entity id="rightControl" laser-controls="hand: right" vr-controller
raycaster="objects: .clickable;"></a-entity>
<!-- 視点カメラの設定 -->
<a-camera look-controls wasd-controls="enabled: false" rotation="0 0 0" position="0 0 0">
<a-image home_btn src="#home_img"></a-image>
<a-image id="info_btn" src="#info_img"></a-image> <!-- ボードなしは、この行も消す -->
<a-image id="audio_btn" src="#audio_on_img"></a-image> <!-- 音声なしは、この行も消す -->
<a-image id="vr_btn" src="#vr_img"></a-image>
</a-camera>
<!-- 360度写真の配置 -->
<a-sky src="#3D_image" rotation="0 0 0" position="0 0 0">
<!-- リンク先のURLとリンク位置（サークル位置） -->
<a-entity warp_circle="link: ./example02.html" position="0 -16 -80"></a-entity>
<a-entity warp_circle="link: ./example03.html" position="-50 -16 -30"></a-entity>
<a-entity warp_circle="link: ./example04.html" position="20 -16 -20"></a-entity>
</a-sky>
<!-- 音声データの配置 -->
<a-sound voice src="#audio"></a-sound> <!-- この行を消すと音声なし -->
<!-- インフォメーションボード -->
<!-- <a-entity>から</a-entity>までを消すとボードなし -->
<a-entity info_window="title: タイトル;
content:
日本語の表示テスト
Can you display the Japanese font?
If not, please let me know.
"></a-entity>
</a-scene>
</body>
</html>このファイルをコピペ複製でたくさん作ります。このVR TOURでは、1つの地点は1個のhtmlページで対応するようにしています。 当然、システマティックに分かりやすいように名前を振りながら（通し番号でも良い）複製を作っていきます。 続いて、作成した複製の修正を行います。修正箇所を中心に説明していきます。
<img id="3D_image" src="../images/example01.jpg">20行目では適応させる360度パノラマ画像を指定します。example01.jpgの部分をimagesフォルダに格納したファイル名に変更して下さい。
<audio id="audio" src="../audio/example01.mp3" preload="auto"></audio>22行目のexample01.mp3は、audioフォルダに入れた音声データファイル名に修正します。
<a-entity warp_circle="link: ./example02.html" position="0 -16 -80"></a-entity>50行目～52行目の<a-entity>タグは移動用のワープサークルの設定です。テンプレートファイルには、 3行で3箇所のワープ先の例を示しましたが、ワープ先（リンク先）は増やしたり、減らしたりできます。
タグの中にwarp_circleというキーワードが入っていますが、このキーワードを元にJavaScriptではサークルの大きさ、色、マウスオーバーでのアニメーションなど共通事項を設定しています。 修正箇所は、移動先のページURL、つまり、example02.htmlの部分と、サークルの位置 position のパラメータです。
サークルの位置を決定するのに試行錯誤が必要なのですが、A-Frameには便利なツールが含まれています。[Ctrl]キーと[Alt]キーを押しながら、[i]キーを押すと、インスペクターモードに入ります。
左側で要素を選択すると、右側にその要素のプロパティが表示されます。ワープサークルは、a-skyの中にあり、a-entityの1つを選ぶと、 サークルに矢印が付き、position、rotation、scaleなどの値が表示されます。ここで決定したい値は、positionであり、 positionの数値を直接変更しても、その数値でサークルが、どこに表示されるのか判明します。また、サークルに現れた矢印を 選んでドラッグさせてもpositionの数値にも反映されます。
positionの数値、ここでは、0 -16 -80の3つの数ですが、x座標、y座標、z座標に対応します。x座標は画面の左右、y座標は 画面の上下、z座標は奥行きが変化します。数値の単位ですが、A-Frameではm (メートル)単位で書くのが一般的です。 しかし、わざと10倍の値を代入しています。一般的な視線の高さは1.6 mとして写真撮影などを行うので、視点カメラの 座標を (0, 1.6, 0)とするのが普通です。ここでは、視点カメラを原点にしているので、視点の直下の床の座標は(0, -1.6, 0)に 設定する必要があります。しかし、Oculus Quest 2での動作が視点カメラの位置がOculus側でコントロールされ、また、 歩行モードと静止モードで、その高さが異なるため、同じような見た目を演出するのが困難でした。そこで、カメラの 高さが変更されても見た目を変りにくくするために、わざと10倍の値を使用しています。(0, -16, -80)の値は x座標は0のままですが、y座標に-1.6 m、z座標に-8.0 mとなるような値です。床面の高さは一定だと思われますので、 y座標の値の-16は、すべてのワープサークルで固定値として、x座標とz座標の値を決めて行けばよいかと思います。
<a-entity info_window="title: タイトル;
content:
日本語の表示テスト
Can you display the Japanese font?
If not, please let me know.
"></a-entity>最後の修正箇所は60行から65行のインフォメーションボードに関してです。
titlt:と;の間にボードの上部に表示させる題名を書き入れます。content:と"の間はボード中央部の インフォメーションの内容そのものになります。途中に改行を入れることも反映されるかと思います。
htmlページの中にはインフォメーションボードでの案内が不要なページもあるでしょう。そんな場合はタグ <a-entity>から</a-entity>までを全て消して下さい。自動的にインフォメーションボードを 表示させるボタンも表示されないようにしています。この手法は、音声案内にも適用可能で、音声案内の場合は タグ<a-sound>から</a-sound>まで、その行そのものを消去すれば、音声案内のボタンが 表示されなくなります。これだけでも上手く動いていたのですが、ボタンが残っていると、そのページで止まって します現象が発生したので、42行目や43行目も、インフォーメーションボードが要らないときや、音声案内が 要らないときには、それぞれ、削除して下さい。