###简介
另一款集成three.js完成的web端360全景图片渲染插件Panolens
下载对应的js
<script src="js/three.min.js"></script>
<script src="js/panolens.min.js"></script>
对应的demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<!--所有基础依赖引入-->
<script src="./js/three.min.js"></script>
<script src="./panolens/panolens.min.js"></script>
<style>
html, body {
width: 100%;
height: 100%;
overflow: hidden;
margin: 0;
}
body {
background-color: blue;
background-size: cover;
}
#container {
margin-left: auto;
margin-right: auto;
margin-top: 10px;
width: 700px;
height: 400px;
}
#btn_change_size {
position: absolute;
height: 30px;
left: 10px;
top: 10px;
}
</style>
<body>
<div id="container"></div>
<script>
var panorama, viewer, container, infospot;
var containerBaseWidth = 700;
var containerBaseHeight = 400;
var deltaSize = 100;
container = document.querySelector( '#container' );
panorama = new PANOLENS.ImagePanorama( 'https://wangsr-oss-files.oss-cn-beijing.aliyuncs.com/images/%E5%85%A8%E6%99%AF/Bryce-Canyon-By-Jess-Beauchemin.jpg' );
infospot = new PANOLENS.Infospot( 350, PANOLENS.DataImage.Info );
infospot.position.set( 0, 0, -5000 );
infospot.addHoverText( 'Hello wjl', 30 );
panorama.add( infospot );
viewer = new PANOLENS.Viewer( { container: container } );
viewer.add( panorama );
</script>
</body>
</html>
评论区