26 Star 239 Fork 58

入栈 / TPano

Create your Gitee Account
Explore and code with more than 6 million developers,Free private repositories !:)
Sign up
Clone or download
Cancel
Notice: Creating folder will generate an empty file .keep, because not support in Git
Loading...
README.md

TPano 全景照片框架

项目介绍

用途

  1. 查看全景照片,实现全景漫游
  2. 编辑全景照片热点(暂未实现,计划更新中)

特征

  • 纯前端代码构建,可配合任意语言后端项目
  • 最简单的集成方式

代码案例

  • 快速自动加载方式

    示例文件位于/example/fastload.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>
  • 普通集成方式

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

开发语言

  • JavaScript
  • html
  • 底层基于Three.js

开发进度

持续更新优化中

v1.04

解决作因用域引起的模块加载异常

https://gitee.com/push_0x57df/TPano/releases/1.04

v1.01

支持插入热点图标 修复了案例中笔记本屏幕分辨率下的显示问题

https://gitee.com/push_0x57df/TPano/releases/1.01

v1.00

第一个版本✨ 上线🎉🎉🎉

https://gitee.com/push_0x57df/TPano/releases/1.00

项目继续优化中,有建议请留言

开发文档

请看项目目录:/docs/doc.md

建议使用typora打开文档,或者在Git托管的Web页面上直接浏览,markdown语法编写而成

您可以直接点击这里:https://gitee.com/push_0x57df/TPano/blob/develop/docs/doc.md

Demo

https://push_0x57df.gitee.io/tpano/example

Comments ( 18 )

Sign in for post a comment

About

一个百分百WEB前端代码的全景照片框架 spread retract
JavaScript and 3 more languages
MIT
Cancel

Releases (3)

All

TPano

Contributors

All

Activities

load more
can not load any more
JavaScript
1
https://git.oschina.net/push_0x57df/TPano.git
git@git.oschina.net:push_0x57df/TPano.git
push_0x57df
TPano
TPano
develop

Search