继昨天全景实现后,再做了一个全景图切换实验;

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

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

全景图切换性能实验图

Cpu响应时间消耗主要是两个全景图的切换过程中;

主要资源是图片资源的优化;

于是我试了了几个优化方案

  1. 图片切割解码后用canvas拼接
  2. Js,css 等压缩
  3. 把图片格式转换为webp;

还有一种canvas缓存的暂时还未实验

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

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

    实现一个三维全景;  然后思考优化问题; 于是我问了下webgl技术交流群朋友有啥解决方案; 对于krpano.js 的了解,只是知道百度全景用了这个技术; 最后还是选择了群友给出的three.js  ...

  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. 简单的GIT上传

    简单的GIT上传 上传项目时先新建一个 文件夹 mkdir test 然后在切换到test文件夹中然后把github 中的项目拷贝下来 git glone url 然后git init 查看文件 然后 ...

  2. 关于instrinsicContentSize, ContentHuggingPriority, ContentcompressionResistancePriority的理解

    ios 关于intrinsic理解 最近由于项目的需要想给MBProgressHUD添加一个自定义的view, 结果花费了一两个小时也没添加上去,添加上去的view没有实际的大小,即使你给他设置了一个 ...

  3. 如何修改64位Eclipse中的代码字体大小

    1.双击打开Eclipse,如下图所示: 2.找到菜单栏中的Window,单击它,选择Preferences 3.在左侧的树形菜单中找到General--->Appearance--->C ...

  4. SecurityError:Error:#2148

    1.错误描述 SecurityError:Error:#2148:SWF文件http://localhost:8888/UploadDownload/Flash/ReadLocalFile.swf/[ ...

  5. spring ioc(反转控制)

    在Java中,我们建立一个对象的方式是new,有时需要单例,有时需要工厂,而spring中的bean的定义可以直接使用,如scope属性single产生单例对象,prototype产生新对象,bean ...

  6. pat1031-1040

    1031 #include<iostream> #include<cstdio> #include<cstring> #include<vector> ...

  7. freemarker中的substring取子串(十四)

    freemarker中的substring取子串 1.substring取子串介绍 (1)表达式?substring(from,to) (2)当to为空时,默认的是字符串的长度 (3)from是第一个 ...

  8. 一个简单的freemark输入输出的案例(二)

    freemarker入门实例 1.设计思路 (1)新建Maven Project (2)生成freemarker模板 (3)写freemarker页面ftl文件 (4)写测试文件 2.新建Maven ...

  9. CSS3 2D、3D转换

    2D转换方法:transform().rotate().scale().skew().matrix() 3D转换方法:rotateX().rotateY() 1.示例代码 <!DOCTYPE h ...

  10. MySQL到MongoDB的数据同步方法!

    许多公司随着业务发展,单数据库实例已经不能满足业务需要,需要定期进行数据交换,同步到MongoDB, 或其他位置的MySQL,以分散数据库的并发压力. 目前大部分都采用自行开发的方式处理,存在开发成本 ...