TPano百分百 WEB 前端代码的全景照片框架
TPano 是一个百分百 WEB 前端代码的全景图像引擎。
用途
- 查看全景照片，实现全景漫游
- 编辑全景照片热点（暂未实现，计划更新中）
特征
- 纯前端代码构建，可配合任意语言后端项目
- 最简单的集成方式
代码案例
-
快速自动加载方式
示例文件位于/example/fastload.html
详细使用方法请参考开发文档
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TPano 全景照片查看器</title>
<style>
* {
margin: 0;
}
#tp{
width: 200px;
height: 140px;
display: block;
}
</style>
</head>
<body id="pano">
<!--直接通过标签tpano引入全景照片1.jpg，无需做其他任何处理，就像在使用img标签一样，
但要注意设置标签的css，给出宽度和高度，tpano依照此高度自动生成照片大小-->
<tpano id="tp" src="./1.jpg"></tpano>
</body>
<!--引入three.js-->
<script src="./three.js"></script>
<script src="../dist/tpano.js"></script>
<script src="../dist/fastloading.js"></script>
</html> -
普通集成方式
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TPano 全景照片查看器</title>
<style>
* {
margin: 0;
}
#pano {
width: 100vw;
height: 100vh;
}
</style>
</head>
<body id="pano"></body>
<!--引入three.js-->
<script src="./three.js"></script>
<script src="../dist/tpano.js"></script>
<script>
var tpano = new TPano({
el:'pano',//照片查看器根节点dom的id
photo:[
//全景照片数组，每项为一张照片
{
url:'1.jpg',
name:'室内'
},
{
url:'2.jfif',
name:'建筑'
}
]
})
</script>
</html>
开发语言
- JavaScript
- html
- 底层基于Three.js
评论