JavaScriptで360度画像ビュー｜mamimgaround2.jsで簡単実装

JavaScriptで360度画像ビュー｜mamimgaround2.jsで簡単実装

JavaScriptで360度画像ビューを簡単に実装できるmamimgaround2.jsの紹介ページです。
複数の静止画像をマウス操作やスライダーで切り替え、商品や立体物を回転表示できます。
WebGL不要・軽量・依存なしで導入も簡単。ポート位置や構造確認にも最適です。
回転台を使って物体を複数の角度から撮影すれば、より綺麗な表示が可能です。
ECサイトの商品確認や技術資料の補足にも有効です。

使い方

1. 上記ボタンを押してmamimgaround2.jsをダウンロードします。
2. 以下のようの記述すればOKです

<!-- cssはお好みで設定してください -->
<div id="mia" style="width:100%;max-width:500px;"></div>

<script src="./js/mamimgaround2.js"></script>
<script>
  let mia=new TMamImageAround(
    //画像を内部に表示させたい要素のidを指定します
    document.getElementById("mia"),
    [
      //物体を回転して撮影した画像を配列で指定します
      "./carimg/2/c0000.jpg", "./carimg/2/c0010.jpg",
      "./carimg/2/c0020.jpg", "./carimg/2/c0030.jpg",
      "./carimg/2/c0040.jpg", "./carimg/2/c0050.jpg",
      "./carimg/2/c0060.jpg", "./carimg/2/c0070.jpg",
      "./carimg/2/c0080.jpg", "./carimg/2/c0090.jpg",
      "./carimg/2/c0100.jpg", "./carimg/2/c0110.jpg",
    ]
  );
</script>

使用例１

画像をマウスで左右ドラッグ、又はパンしてください。スライダーを変更しても画像が切り替わります。

使用例２

画像をマウスで左右ドラッグ、又はパンしてください。スライダーを変更しても画像が切り替わります。

<div id="mia2" style="width:100%;max-width:500px;"></div>

<script src="./js/mamimgaround2.js"></script>
<script>
  let mia2=new TMamImageAround(
    //画像を内部に表示させたいdivタグのidを指定します
    document.getElementById("mia2"),
    [
      //表示させたい画像を配列で指定します
      "./imgs/fig/01.jpg", "./imgs/fig/14.jpg",
      "./imgs/fig/13.jpg", "./imgs/fig/12.jpg",
      "./imgs/fig/11.jpg", "./imgs/fig/10.jpg",
      "./imgs/fig/09.jpg", "./imgs/fig/08.jpg",
      "./imgs/fig/07.jpg", "./imgs/fig/06.jpg",
      "./imgs/fig/05.jpg", "./imgs/fig/04.jpg",
      "./imgs/fig/03.jpg", "./imgs/fig/02.jpg",
    ]
  );
</script>