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

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

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

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

TPano特性：

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

接入方式：

• 标准接入

    
    
    TPano 全景照片查看器
    
        * {
            margin: 0;
        }

        #pano {
            width: 100vw;
            height: 100vh;
        }
    







var tpano = new TPano({
    el:'pano',//照片查看器根节点dom的id
    photo:[
        //全景照片数组，每项为一张照片
        {
            url:'1.jpg',
            name:'室内'
        },
        {
            url:'2.jfif',
            name:'建筑'
        }
    ]
})

快速接入

预览：

更多内容大家可自行前往阅读。

开源地址：https://gitee.com/push_0x57df/TPano

如需项目推荐、获取资源请私信作者

Tags：前端引擎

微信扫一扫：分享

微信里点“发现”，扫一下

二维码便可将本文分享至朋友圈。