开源精选 | 纯前端全景图像引擎TPano

小半 • 2022年11月15日下午9:31 • 开源速递 • 阅读 256

《开源精选》是我们分享Github、Gitee等开源社区中优质项目的栏目，包括技术、学习、实用与各种有趣的内容。本期推荐的是一个前端全景图像引擎——TPano。

TPano是一个使用纯前端代码构建的全景图像引擎，底层基于Three.js, 可配合任意语言后端项目，支持jpg，png等格式图片。

通过常见的3D相机和智能手机APP我们可以得到包含全方向视角像素点的全景照片或视频，TPano将展开的全景图片和视屏映射到虚拟的球体表面，在球心放置透视相机，通过透视相机输出画面，结合一些基于经纬、欧拉角的转换控制算法实现视角自由控制。

TPano特性：

本项目开源在 Gitee，使用 MIT 开源协议
项目尽可能地对复杂的 3D 场景构建工作进行了底层屏蔽，使用了面向对象化的编程理念来简化了集成应用难度
生成的全景场景可以接受鼠标交互，也支持移动端触屏交互和方向传感器控制
依附于 WEB 天生的跨平台能力，本项目也能做到跨平台，并且对于屏幕尺寸适配和控制给出了丰富的API

接入方式：

标准接入

<!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>

快速接入

<!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>