实现一个三维全景;  然后思考优化问题;

于是我问了下webgl技术交流群朋友有啥解决方案;

对于krpano.js 的了解,只是知道百度全景用了这个技术;

最后还是选择了群友给出的three.js 的 css3d方案;  做了一个横滨之夜的全景demo;

基本思路是:

1.正方体全景,贴上六面纹理;

           2.鼠标移动的视觉调整;

  

说明:

        1.demo: https://thinkia.github.io/threejs_/test/test1-panorama/index.html

     2.code:  https://github.com/Thinkia/threejs_/blob/master/test/test1-panorama/index.html   

       3.素材来自  http://www.humus.name/     仅供学习与交流

总结 :     我发现用  github的 io  展示demo  响应 的 时间特别慢 ,  根本原因就是优化不够吧 ?

我在网上查了下资料

优化办法分为五步:

1.加载优化: 2.脚本执行优化 3.css优化  4.js执行优化 5.渲染优化

参考文章:  https://www.cnblogs.com/xy-milu/p/6091234.html

目前还未一一 结合实际情况测试;

                                                                                                            Thinkia  

                                                                                                         

            

three.js 实现全景以及优化(1)的更多相关文章

  1. three.js 实现全景以及优化(2)

    继昨天全景实现后,再做了一个全景图切换实验; code:https://github.com/Thinkia/threejs_/blob/master/test/test1-panorama/inde ...

  2. 客户端JS性能的一些优化的小技巧

    下面是一些关于客户端JS性能的一些优化的小技巧:1.[顶]关于JS的循环,循环是一种常用的流程控制.JS提供了三种循环:for(;;). while().for(in).在这三种循环中 for(in) ...

  3. js资源加载优化

    互联网应用或者访问量大的应用,对js的加载优化是不可少的.下面记录几种优化方法 CDN  + 浏览器缓存 CDN(content delivery network)内容分发网络, 最传统的优化方式.其 ...

  4. JS日历控件优化(增加时分秒)

    JS日历控件优化      在今年7月份时候 写了一篇关于 "JS日历控件" 的文章 , 当时只支持 年月日 的日历控件,现在优化如下:      1. 在原基础上 支持 yyyy ...

  5. Vue.Js的用户体验优化

    一次基于Vue.Js的用户体验优化   一.写在前面 半年以前,第一次在项目上实践VueJs,由于在那之前,没有Angular,avalon等框架的实践经验,所以在Vue的使用上,没有给自己总结出更多 ...

  6. vue.js的app.js太大怎么优化?

    vue.js的app.js太大怎么优化? # http://nginx.org/en/docs/http/ngx_http_gzip_module.htmlgzip on;gzip_min_lengt ...

  7. 基于Three.js的全景---photo-sphere-viewer

    以前公司其他几个前端做全景都是用软件生成,由于本人比较懒,不想去折腾那个软件,于是乎就有了下面的事...... 这个是基于three.js的全景插件  photo-sphere-viewer.js  ...

  8. JS学习笔记12_优化

    一.可维护性优化 1.添加注释 注释能够增强代码的可读性以及可维护性,当然,理想情况是满满的注释,但这不太现实.所以我们只需要在一些关键的地方添上注释: 函数和方法:尤其是返回值,因为直接看不出来 大 ...

  9. 一次基于Vue.Js用户体验的优化

    .mytitle { background: #2B6695; color: white; font-family: "微软雅黑", "宋体", "黑 ...

随机推荐

  1. Socket 参数笔记

    //服务端@RunWith(JUnit4.class) public class ServerSocketTest { @Test public void testServer() throws IO ...

  2. kolla-ansible快速入门

    kolla-ansible快速入门 kolla-ansible是一个结构相对简单的项目,它通过一个shell脚本,根据用户的参数,选择不同的playbook和不同的参数调用ansible-playbo ...

  3. hive:条件判断函数

    参考hive常用运算. •If函数: if •非空查找函数: COALESCE •条件判断函数:CASE • If 函数 : if 语法: if(boolean testCondition, T va ...

  4. Oracle总结【PLSQL学习】

    PLSQL介绍 PLSQL是Oracle对SQL99的一种扩展,基本每一种数据库都会对SQL进行扩展,Oracle对SQL的扩展就叫做PLSQL... SQL99是什么 (1)是操作所有关系型数据库的 ...

  5. ORACLE关于段的HEADER_BLOCK的一点浅析

    在学习段(segment).区间(extent)时,对段的HEADER_BLOCK有一些疑问,本文记录一下探究的实验过程以及相关总结,,如有不对的地方,敬请指出.以SCOTT.EMP表为例(下面测试环 ...

  6. java Socket实现简单在线聊天(一)

    最近的项目有一个在线网页交流的需求,由于很久以前做过的demo已经忘记的差不多了,因此便重新学习一下. 我计划的大致实现步骤分这样几大步: 1.使用awt组件和socket实现简单的单客户端向服务端持 ...

  7. CAN总线基础知识(一)

    1.CAN总线是什么? CAN(Controller Area Network)是ISO国际标准化的串行通信协议.广泛应用于汽车.船舶等.具有已经被大家认可的高性能和可靠性. CAN控制器通过组成总线 ...

  8. 芝麻HTTP:pyspider的安装

    pyspider是国人binux编写的强大的网络爬虫框架,它带有强大的WebUI.脚本编辑器.任务监控器.项目管理器以及结果处理器,同时支持多种数据库后端.多种消息队列,另外还支持JavaScript ...

  9. 芝麻HTTP: 1.9.3-Scrapyd-Client的安装

    在将Scrapy代码部署到远程Scrapyd的时候,第一步就是要将代码打包为EGG文件,其次需要将EGG文件上传到远程主机.这个过程如果用程序来实现,也是完全可以的,但是我们并不需要做这些工作,因为S ...

  10. 用.Net Core控制台模拟一个ASP.Net Core的管道模型

    在我的上几篇文章中降到了asp.net core的管道模型,为了更清楚地理解asp.net core的管道,再网上学习了.Net Core控制台应用程序对其的模拟,以加深映像,同时,供大家学习参考. ...