Recommended in this issue is a front-end panoramic image engine – TPano.
TPano is a panoramic image engine built using pure front-end code, based on Three.js, can cooperate with any language back-end projects, supporting jpg, png and other formats of images.
Through common 3D cameras and smart phone apps, we can get panoramic photos or videos containing pixels of all-directional viewing angles. TPano maps the unfolded panoramic pictures and video screens to the surface of a virtual sphere, places a perspective camera in the center of the sphere, and realizes the free control of viewing angles through the perspective camera output images, combined with some conversion control algorithms based on longitude and latitude and Euler Angle.
TPano features:
The project is open source at Gitee and uses the MIT open Source protocol
The project shields the complex 3D scene construction work as much as possible, and uses objectification oriented programming concepts to simplify the difficulty of integration applications
The generated panoramic scene can accept mouse interaction, and also supports mobile touch screen interaction and direction sensor control
Depending on the natural cross-platform capabilities of the WEB, this project can also be cross-platform, and provides a rich API for screen size adaptation and control
Access method:
Standard access
<!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>Fast access
<!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>preview：
You can read more on your own.
