概要
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/panolens@0.11.0/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/ (画像)