<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width, shrink-to-fit=no">
<title>Panorama</title>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<script src="js/panolens.min.js"></script>
<script src="js/three.min.js"></script>
<script>
const panorama = new PANOLENS.ImagePanorama( 'img/photo.jpg' );
const viewer = new PANOLENS.Viewer( { output: 'console' } );
viewer.add( panorama );
</script>
</body>
</html>
<script src="https://pchen66.github.io/js/three/three.min.js"></script>
<script src="https://pchen66.github.io/js/panolens/panolens.min.js"></script>
<script>
const panorama = new PANOLENS.ImagePanorama( 'img/photo.jpg' );
const viewer = new PANOLENS.Viewer( { output: 'console' } );
viewer.add( panorama );
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width, shrink-to-fit=no">
<title>Panolens.js panorama image panorama</title>
<style>
html, body {
margin: 0;
width: 100%;
height: 100%;
overflow: hidden;
background-color: #000;
}
a:link, a:visited{
color: #bdc3c7;
}
.credit{
position: absolute;
text-align: center;
width: 100%;
padding: 20px 0;
color: #fff;
}
</style>
</head>
<body>
<div class="credit"><a href="https://github.com/pchen66/panolens.js">Panolens.js</a> image panorama example. Image from <a href="http://adaptivesamples.com/tag/equirectangular/">Adaptive Samples</a></div>
<script src="three.min.js"></script>
<script src="panolens.min.js"></script>
<script>
const panorama = new PANOLENS.ImagePanorama( 'field.jpg' );
const viewer = new PANOLENS.Viewer( { output: 'console' } );
viewer.add( panorama );
</script>
</body>
</html>
Средний
