Q&A
現在のコードにおける問題点を記載してください
AR.jsで「画像を触ると指定のリンクに飛ぶ」というものを制作しているのですが、画像ごとに別のリンクに飛ぶようにするやり方がわかりません。
今はどちらの画像を触ってもGoogleに飛ぶようになっています。
画像AAAはGoogle、画像BBBはYahooというようにしたいのですが、どうすればいいのでしょう？
よろしくお願いいたします。
HTML
1<!doctype HTML> 2<html> 3<head> 4 <meta charset="UFT-8"> 5 <script src="https://aframe.io/releases/0.9.2/aframe.min.js"></script> 6 <script src="https://cdn.rawgit.com/jeromeetienne/AR.js/1.6.2/aframe/build/aframe-ar.js"></script> 7 8 <script> 9 AFRAME.registerComponent('change-url',{ 10 schema : {}, 11 init : function(){ 12 this.el.addEventListener('click',function(e){ 13 window.location.href = "https://www.google.co.jp/"; 14 }) 15 } 16 }) 17 </script> 18</head> 19 20<body> 21 <a-assets> 22 <img id="AAA" src="images/AAA.png"> 23 <img id="BBB" src="images/BBB.png"> 24 </a-assets> 25 26 <a-scene embedded arjs="debugUIEnabled: false" vr-mode-ui="enabled: false"> 27 <a-marker preset="custom" type="pattern" url="images/ABC.patt" material arjs-anchor arjs-hit-testing> 28 29 <a-image class="AAA" src="#AAA" position="-0.5 0 0" rotation="-90 0 0" change-url material geometry></a-image> 30 <a-image class="BBB" src="#BBB" position="0.5 0 0" rotation="-90 0 0" change-url material geometry></a-image> 31 32 </a-marker> 33 34 <a-entity camera raycaster= "objects: .AAA" cursor="fuse: false; rayOrigin: mouse;"></a-entity> 35 <a-entity camera raycaster= "objects: .BBB" cursor="fuse: false; rayOrigin: mouse;"></a-entity> 36</a-scene> 37</body> 38</html>
修正後
判定位置がずれてしまいます。どうすれば直るのでしょうか？
HTML
1<script> 2AFRAME.registerComponent('change-url',{ 3 schema : {}, 4 init : function(){ 5 this.el.addEventListener('click',function(e){ 6 console.log(e.target.className); 7 if(e.target.className == "AAA"){ 8 window.location.href = "https://www.google.co.jp"; 9 } 10 if(e.target.className == "BBB"){ 11 window.location.href = "https://yahoo.co.jp"; 12 } 13 }) 14 } 15}) 16</script> 17</head> 18 19<body> 20 21 <a-assets> 22 <img id="AAA" src="images/AAA.png"> 23 <img id="BBB" src="images/BBB.png"> 24 </a-assets> 25 26 <a-scene embedded arjs="debugUIEnabled: false" vr-mode-ui="enabled: false"> 27 <a-marker preset="custom" type="pattern" url="images/pattern-stsi2019.patt" material arjs-anchor arjs-hit-testing> 28 29 <a-image class="AAA" src="#AAA" position="-1 0 0" rotation="-90 0 0" change-url material geometry></a-image> 30 <a-image class="BBB" src="#BBB" position="1 0 0" rotation="-90 0 0" change-url material geometry></a-image> 31 32 </a-marker> 33 34 <a-entity camera raycaster= "objects: .AAA" cursor="fuse: false; rayOrigin: mouse;"></a-entity> 35 <a-entity camera raycaster= "objects: .BBB" cursor="fuse: false; rayOrigin: mouse;"></a-entity> 36</a-scene> 37 38</body>
回答1件
0
this.el.addEventListener('click',function(e){ window.location.href = "https://www.google.co.jp/"; })
これだとelすべてにaddEventListenerしていることになり、'change-url'であればどこを押下しても「https://www.google.co.jp/」に飛んでしまいますね。
imageタグの2つは「class="AAA"」「class="BBB"」と分けて指定されていますのでそちらを指定して要素を別々に取得し、イベント登録するようにしてください。
投稿2019/12/16 08:26
編集2019/12/17 06:42
総合スコア16
修正したコードを追加しました。画像ごとに違うリンクに飛ぶようにはなったのですが、画像と反応する位置がずれてしまいました…直し方をご存知でしたら教えていただきたいです。
あなたの回答
tips
プレビュー
