Javascriptで物体の周囲360度を撮影した画像を表示

Javascriptで物体の周囲360度を撮影した画像を表示する ~ mamImgAround.js


CG等で物体の全周囲の方向から撮影した多くの画像をJavaScriptで回転表示する

mamimgaround.js(4KB)ダウンロード

■使い方

■使用例

画像を左右にドラッグしてください

<div style="display:flex;width:100%;">
  <div style="width:10%;"><button id="mamImgAroundPrev">←<br>回<br>転</button></div>
  <div id="mamImgAround" style="width:80%;"></div>
  <div style="width:10%;"><button id="mamImgAroundNext">→<br>回<br>転</button></div>
</div>

<script>
window.addEventListener("load",function(){
  imgs=[
  "./carimg/a0000.jpg", "./carimg/a0010.jpg", "./carimg/a0020.jpg",
  "./carimg/a0030.jpg", "./carimg/a0040.jpg",
  "./carimg/a0050.jpg", "./carimg/a0060.jpg", "./carimg/a0070.jpg",
  "./carimg/a0080.jpg", "./carimg/a0090.jpg",
  "./carimg/a0100.jpg", "./carimg/a0110.jpg", "./carimg/a0120.jpg",
  "./carimg/a0130.jpg", "./carimg/a0140.jpg",
  "./carimg/a0150.jpg", "./carimg/a0160.jpg", "./carimg/a0170.jpg",
  "./carimg/a0180.jpg", "./carimg/a0190.jpg",
  "./carimg/a0200.jpg", "./carimg/a0210.jpg", "./carimg/a0220.jpg",
  "./carimg/a0230.jpg", "./carimg/a0240.jpg",
  "./carimg/a0250.jpg", "./carimg/a0260.jpg", "./carimg/a0270.jpg",
  "./carimg/a0280.jpg", "./carimg/a0290.jpg",
  "./carimg/a0300.jpg", "./carimg/a0310.jpg", "./carimg/a0320.jpg",
  "./carimg/a0330.jpg", "./carimg/a0340.jpg",
  "./carimg/a0350.jpg",
  ];
  setMamImageAround("mamImgAround",imgs, "mamImgAroundPrev", "mamImgAroundNext");
});
</script>










Mam's WebSite