使用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中绘制出来贴到标志板上面,我还将其进行了封装方便下次使用。

        代码要是讲就太多了,重要的我都写了注释,大家需要的话可以在Github下载~

        Github:https://github.com/StringKun/ThreeJSPanorama

效果演示:stringkun.github.io/threejs_quanjingtu/index

        还有就是手机照相没有固定的三脚架,有的地方照花了~这个和程序无关



©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页