TPano 是一个百分百 WEB 前端代码的全景图像引擎。
用途
- 查看全景照片，实现全景漫游
- 编辑全景照片热点（暂未实现，计划更新中）
特征
- 纯前端代码构建，可配合任意语言后端项目
- 最简单的集成方式
代码案例
-
快速自动加载方式
示例文件位于/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
-
技术面 之前挂的流程都没了，捞起来又面 1.自我介绍 2.介绍项目 3.项目中遇到的问题，如何解决 4.跨域问题 5.http状态码 6.Nginx配置的内容 7.Vue的路由模式 8.Flex布局 9. Promise，async/await理解 10.ES6新特性 11.箭头函数的优点 12.JavaScript改变this指向的方法 13.手写bind方法 14.手撕反转链表 #2024#
-
1.自我介绍 2.作用域 3.闭包 4.原型链 5.一个对象内部重写了hasOwnProperty，如 const foo = { hasOwnProperty() { return false }, bar: 'bar' } 然后调用obj.hasOwnProperty('bar')，返回false，如何返回true(对象的原型有为原生的hasOwnProperty) 答案：const resu
-
百度笔试 3.58 百度一面 4.11 字符串逆序 变量提升 手写call 实现Promise.retry 实现一个方法，每隔一秒输出1，2，3，4，5 啊啊啊百度直接挂了，我太垃圾了！！！在这之前根本没做过相关的题目，上来两眼懵逼！#百度前端实习##百度前端面经#
-
本文向大家介绍带有定位当前位置的百度地图前端web api实例代码，包括了带有定位当前位置的百度地图前端web api实例代码的使用技巧和注意事项，需要的朋友参考一下 废话不多说，直接给大家贴代码了，具体代码如下所示， 关键代码如下：
-
一面： - [ ] 介绍一下你的项目、项目难点和解决方法 - [ ] React16之前和之后的区别 - [ ] setstate是同步还是异步 - [ ] 如果要实现setState批量更新该怎么操作 - [ ] 谈谈对hooks的理解 - [ ] useState和类组件state的区别 - [ ] useEffect的功能对应了类组件的哪些功能 - [ ] Css弹性布局容器属性和元素属性有
-
简单问了实习经历 get，post请求的区别 每一行的作用？ scripe标签应该插入在哪里？ 每个盒子宽度不固定，应该如何实现？ 用vue实现一个懒加载。 你知道的css的单位。 rem和em的区别，什么情况会用到rem 是否了解postcss。 实现todo里面的。 说分别输出了什么？ 不改变变量声明方式，使用闭包转化，使之输出0,1,2。 html5有什么新的特性，标签，你使用过那些，有什么
-
自我介绍 两道手写： 1.数组转树对象 2.手写promise.all，入参是数组 剩下不按顺序了，记不得了 http和https的区别 ts相比js有哪些好处，使用成本在哪 react函数组件和类组件的区别（hooks） 为什么useState返回的是array而不是object es6的结构赋值，做了两道很简单的判断题 css三栏布局两端固定中间自适应的方法 flex：1是哪三个属性的总概 c
-
1.先问了问项目，又问了下相关的react-three-fiber 2.ssr和csr的区别 3.增量渲染（？） 4.项目里怎么做的响应式布局 5.px转rem有没有什么好的方法（vscode里直接转的，不知道） 6.grid布局和flex布局用法，有什么本质上的区别 7.grid布局怎么设置间距 grid-row-gap：行距； grid-column-gap：列距； 8.前端性能优化，问一些很