使用threejs实现3D全景漫游

最近发现谷歌相机蛮好玩儿的,可以通过拍摄多幅照片将其合成一张全景图,于是我在宿舍中拍摄了宿舍内和阳台的两张全景图,并使用threejs实现了全景漫游。

        只是一个简单的全景场景浏览比较简单,就是创建一个球往里面贴一个全景图。为了实现比较好的交互,能够通过点击鼠标实现漫游效果,我对其中的技术进行了一定的思考与总结。

         首先我们来总结一下用户的交互过程:打开网页、等待全景图加载出来、通过鼠标点击滑动移动实现360度观察、点击按钮去下一个场景、等待全景图加载出来、观看场景。。。。。。那么这个过程有哪些地方是可以优化的呢?通过考虑和对其他全景网站的观察(百度有一个近距离看兵马俑的全景漫游网页就很震撼:https://baikebcs.bdimg.com/baike-museum3d/qinshihuang/index.html)我想到了一些优化的地方:

        1.首先加载过程不应该是只出现一个滚动条或是黑屏让用户等待,因为全景图比较大我自己拍的这两幅都分别是在4~5MB,必然会有一个较长的加载过程,最好是先给用户一个模糊一些的全景图,等大图加载好了在进行替换,这就像是JS网页中的lowsrc。

PS:我开始想的做法是使用LOD技术或是mipmap技术,然后突然想明白了,在客户端做文章是没有任何意义的,主要的费时不是在内存而是在网络传输,所以需要在服务器做好高清和低清两种分辨率的图片进行传递。

        2.点击切换场景最好是给用户一种走过去了的感觉,这种感觉需要两步来实现,点击按钮后将视角锁定朝向,慢慢缩小视角范围,这个过程结束之后在进行场景转换。

        3.对用户的指示牌可以使用标志板技术,这种技术简而言之就是使一个板子始终面对摄像机的方向。将标志板固定到需要展示的地方,当成一个指示牌供用户来点击。

        4.标志板的纹理我使用Canvas进行绘制,只需要在程序中修改文字,直接在Canvas中绘制出来贴到标志板上面,我还将其进行了封装方便下次使用。


  • 上一篇文章:

  • 下一篇文章: 没有了
  • 地址:中国西安市南二环西段100号金叶大厦五楼   24小时技术支持电话:15388631829
     © 2006-2018 云智全景 www.720pai.com 陕ICP备14000221号