Panolens.jsで簡単にパノラマを作成する
5123 ワード
概要
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/ (画像)
Author And Source
この問題について(Panolens.jsで簡単にパノラマを作成する), 我々は、より多くの情報をここで見つけました https://qiita.com/BIKYO/items/cac288d8a62bac2c79a1著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .