実現したいこと
A-frameを使用し、VRツアーの制作をしています。
次のスポットに移動する際に、標準のカーソルを合わせるものだと使いにくいため、島根大学附属図書館様のブログを参考に、アップロードした矢印画像を利用して実現を考えています。
https://shimadai-lib.hatenablog.jp/entry/2020/12/21/102523
発生している問題
画像をクリックしても動作しません。
該当のソースコード
index.html
1<!DOCTYPE html> 2<html> 3 <head> 4 <meta charset="utf-8"> 5 <script src="https://aframe.io/releases/1.5.0/aframe.min.js"></script> 6 <script src="/360js/tour.js"></script> 7 </head> 8 <body> 9 <a-scene> 10 <img id="sky" src ="/360photo/a/R0010078.jpg"> 11 <img id="arrow" src="/360photo/info/arrow.png"> 12 <img id="information" src="/360photo/info/information.png"> 13 <a-sky src="#sky" rotation="-3 79 0"></a-sky> 14 <a-image src="#arrow" width="1.5" height="1.5" rotation="0 0 3" position="2 0 -10" same_window="link:/360view/a/2.html"></a-image> 15 <a-entity raycaster="objects: .ui" cursor="rayOrigin:mouse"></a-entity> 16 <a-entity rotation="0 0 0" id="rotator"> 17 <a-entity camera position="0 0 0" look-controls></a-entity> 18 </a-entity> 19 </a-scene> 20 </body> 21</html>
tour.js
1 //同窓で開く用 2 AFRAME.registerComponent('same_window', { 3 schema: { 4 link: {type: 'asset', default: ''} 5 }, 6 7 init: function () { 8 let data = this.data; 9 this.el.addEventListener('click', function () { 10 location.href = data.link; 11 }); 12 } 13 }); 14 15 //別窓で開く用 16 AFRAME.registerComponent('new_window', { 17 schema: { 18 link: {type: 'asset', default: ''} 19 }, 20 21 init: function () { 22 let data = this.data; 23 this.el.addEventListener('click', function () { 24 open(data.link); 25 }); 26 } 27 });
階層は、
│─ 360view ─ a ─ index.html
│─ 360photo ─ a ─ R0010078.jpg
│ │─ info ─ arrow.png
│ │─information.png
│─ 360js ─ tour.js
です。
解決方法をご教授いただけますでしょうか。
0 コメント