本期推荐的是一个前端全景图像引擎——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>预览：
更多内容大家可自行前往阅读。
