1、下载js文件 (panolens.js 和 依赖插件 three.js)
1) threejs 下载地址https://threejs.org/
2) panolens.js 下载地址https://github.com/pchen66/panolens.js
本人百度网盘整理地址:
链接:https://pan.baidu.com/s/1lxWXLUVis3vdgYb5LFmjDw 提取码:gapk
2、创建html 文件并引入js
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="js/three.min.js"> </script>
<script type="text/javascript" src="js/panolens.min.js"></script>
注意three.min.js在前面
3、调用
<style >
body{
position: absolute;
left: 0;
top: 0;
width: 98%;
height: 98%;
}
#panolens-div{
width: 100%;
height:100%;
}
</style>
</head>
<body >
<div id="panolens-div"></div>
<script type="text/javascript">
let panolens_image = new PANOLENS.ImagePanorama('img/ceshitu.jpg'); //图片路径
let viewer = new PANOLENS.Viewer({ // 创建全景查看器
container: document.querySelector('#panolens-div'),
});
viewer.add(panolens_image ); // 将图片添加的查看器
</script>
</body>
</html>
直接运行html 可能会出现
读取本地文件出现跨域问题
火狐中的原因如下
其他浏览器如果出现跨域问题肯定差不多的原因
建议使用带服务启动的编辑器运行 请求图片就是http请求了 我这边运行的是HBuilderX.
运行l到浏览器效果如下
简单的全景效果就这么简单
更多的高级玩法请自行前往官方文档查看
官方文档地址:https://pchen66.github.io/panolens.js/docs/
代码demo 下载地址链接:https://pan.baidu.com/s/11qV3uBspIwSFyb-UEG8P2g 提取码:hpxg