panolens.js实现简单的全景预览

最新推荐文章于 2024-08-08 08:33:24 发布

时光浅陌

最新推荐文章于 2024-08-08 08:33:24 发布

阅读量3.3k

点赞数 4

文章标签： javascript html

本文链接：https://blog.csdn.net/qq_37275444/article/details/109363007

版权

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

时光浅陌

关注

4
点赞
踩
7

收藏

觉得还不错? 一键收藏
1
评论
panolens.js实现简单的全景预览

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提取码：gapk2、创建html 文件并引入js<!...
复制链接

扫一扫