Panolens.jsで簡単にパノラマを作成する

5123 ワード
panorama JavaScript JavaScript テキストリンク

概要

Panolens.jsというフレームワークを使って簡単にパノラマを作成します。

Panolens.jsとは

Panolens.jsはパノラマを作ることができるフレームワークです。Three.jsを元に作っているようです。

作成

後々いろいろな機能を追加していくことを考えてHTMLとCSSとJSをそれぞれ別のファイルに分割します。

index.html
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <link rel=stylesheet href="style.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/105/three.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/build/panolens.min.js"></script>
</head>

<body>
  <div id="container"></div>
  <script src="panorama.js"></script>
</body>

</html>
style.css
html, body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    margin: 0;
}

#container {
    width: 100%;
    height: 100%;
}
panorama.js
var container, panorama, viewer;

container = document.querySelector('#container');
panorama = new PANOLENS.ImagePanorama('https://i.imgur.com/wTCPouq.jpg');

viewer = new PANOLENS.Viewer({container: container});
viewer.add(panorama);

結果

全てのファイルの編集をした後にindex.htmlを開くとこのような感じでパノラマを見ることができます。

マウスでスライドするとパノラマも回転します。

参考

https://qiita.com/mehdi/items/a3d29cd0729c55c016b6
https://i.imgur.com/ (画像)