Product Details 商品属性
- Language: HTML
- Database: 无
- License: License-Free
- Source Code: Fully Open Source
- Specification: Full Website Source
- Delivery: Automatic (instant download after payment)
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 Panorama Photo Viewer</title> <style> * { margin: 0; } #pano { width: 100vw; height: 100vh; } </style></head><body id="pano"></body><script src="./three.js"></script><script src="../dist/tpano.js"></script><script>var tpano = new TPano({ el:'pano',</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 Panorama Photo Viewer</title> <style> * { margin: 0; } #tp{ width: 200px; height: 140px; display: block; } </style></head><body 自动生成照片大小--><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.
