Q&A
前提・実現したいこと
A-frameというライブラリで360度画像をJavaScriptで切り替えるコードを書いています。
ところが、思うように画像が変更されず困っています。
発生している問題
このようにimg.srcを変更すると、img.srcは変更されますが、imgは変更されません。
※同じパスで画像は表示されるので、パスの間違いはないです。
console.log(img.src); >>./images/puydesancy.jpg console.log(img); >><a-sky id="main-image" rotation="0 0 0" src="./images/landscape.jpg" material="" geometry="" scale=""></a-sky>
該当のソースコード
HTML
1<!DOCTYPE html> 2<html> 3 <head> 4 <meta charset='UTF-8'> 5 <title>360度画像</title> 6 <script src='https://aframe.io/releases/1.0.4/aframe.min.js'></script> 7 </head> 8 <body> 9 <script> 10 AFRAME.registerComponent('click-listener', { 11 init: function() { 12 this.el.addEventListener('click', function (evt) { 13 var img = document.getElementById('main-image'); 14 document.getElementById('main-image').src='./images/puydesancy.jpg'; 15 }); 16 }, 17 }); 18 </script> 19 <a-scene> 20 <a-sphere click-listener id='sphere' radius='0.5' color='yellow' position='0 0.5 -8'></a-sphere> 21 22 <a-sky id='main-image' src='./images/landscape.jpg' rotation='0 0 0'></a-sky> 23 24 <a-entity camera look-controls> 25 <a-entity cursor='rayOrigin: mouse' 26 position='0 0 0' 27 geometry='primitive: ring; radiusInner: 0.02; radiusOuter: 0.03' 28 material='color: black; shader: flat'> 29 </a-entity> 30 </a-entity> 31 32 </a-scene> 33 </body> 34</html>
回答1件
0
ベストアンサー
こういうことですか？
javascript
1document.getElementById('main-image').setAttribute('src','./images/puydesancy.jpg');
投稿2020/07/04 14:55
総合スコア116724
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2020/07/04 15:22
2020/07/04 15:24