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

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. span设置宽度有效无效问题

    在html中如何设定span的宽度?这看上去是个很简单的问题,似乎用style中的width属性就可以.例如, <!DOCTYPE html PUBLIC "-//W3C//DTD X ...

  2. Hi3531添加16GByte(128Gbit) NAND Flash支持

    0.板子上已有Nor Flash了,添加的Nand Flash型号为MT29F128G08CJABAWP,进系统挂接NAND作为一个分区 1.修改uboot u-boot-2010.06/driver ...

  3. IDirectDraw接口

    创建一个主DirectDraw对象,并使用QueryInterface()方法来得到最新的IDirectDraw7接口,或是直接用DirectDrawCreateEx()函数直接创建一个DirectD ...

  4. PHP simpleXML文件编程

    SimpleXML simpleXML该技术的核心思想是以面向对象的方式来操作xml文件 <?php //simplexml文件 讲所有的元素转成对象 $library=simplexml_lo ...

  5. Linux显示版本信息并退出

    Linux显示版本信息并退出 youhaidong@youhaidong-ThinkPad-Edge-E545:~$ cat --version cat (GNU coreutils) 8.21 Co ...

  6. RHEL简单管理SELINUX

    Security Enhanced Linux(SELinux)是一个额外的系统安全层,主要目的是防止已遭泄露的系统服务访问用户数据. 对于一个服务来说,要关注SELinux的三个方面,一是文件SEL ...

  7. Java 第二章 变量、数据类型和运算符

    第二章      变量.数据类型和运算符 什么是变量: 变量代表一块内存区域,变量类型不一样,这一块内存的大小也不一样. #在编程语言里面,你可以通过定义变量,向内存里添加数据或者修改内存已有的数据. ...

  8. C#读取Excel表格中数据并返回datatable

    在软件开发的过程中,经常用到从excel表格中读取数据作为数据源,以下整理了一个有效的读取excel表格的方法. DataTable GetDataTable(string tableName,str ...

  9. 求字符串空格、数字、字母个数--JAVA基础

    相关内容:charAt()函数 package com.nxl123.www;public class NumString { public static void main(String[] arg ...

  10. 吐血整理:人工智能PDF中文教材资源包2.73G基本包含全部学习资料-人工智能学习书单

    吐血整理:人工智能PDF中文教材资源包2.73G基本包含全部学习资料 人工智能学习书单(关注微信公众号:aibbtcom获取更多资源) 文末附百度网盘下载地址 人工神经网络与盲信号处理 人工神经网络与 ...