使用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

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

使用threejs实现3D全景漫游相关推荐

html5 3d场景设计,打造H5里的“3D全景漫游”秘籍－腾讯ISUX
原标题:打造H5里的"3D全景漫游"秘籍 - 腾讯ISUX 近来风生水起的VR虚拟现实技术,抽空想起年初完成的"星球计划"项目,总结篇文章与各位分享一下制作基于 ...
Three.js打造H5里的“3D全景漫游”秘籍
近来风生水起的VR虚拟现实技术,抽空想起年初完成的"星球计划"项目,总结篇文章与各位分享一下制作基于Html5的3D全景漫游秘籍. QQ物联与深圳市天文台合作,在手Q"发 ...
打造H5里的“3D全景漫游”秘籍
近来风生水起的VR虚拟现实技术,抽空想起年初完成的"星球计划"项目,总结篇文章与各位分享一下制作基于Html5的3D全景漫游秘籍. QQ物联与深圳市天文台合作,在手Q"发 ...
自带3D全景漫游神技能的H5是如何炼成的
如今基于HTML5的各式移动互动页面(即常说的H5)加入了越来越多的新技术,比如VR虚拟现实现实,就是最近风口上的大热门H5技术,下面分享一下如何基于HTML5来实现这一效果. QQ物联与深圳市天文台 ...
QQ物联打造H5里的“3D全景漫游”秘籍
QQ截图20160524143715.jpg (21.15 KB, 下载次数: 15) 下载附件 2016-5-26 10:58 上传近来风生水起的 VR 虚拟现实技术,抽空想起年初完成的" ...
threejs实现3d全景看房
背景随着电商时代的发展,网上购物的方式已经成为主流,良好的购物体验已经显得极为重要.展示给用户的视觉效果便不能仅仅局限于2D视觉效果,全方位的3D立体展示效果能让用户对商品进行 360度无死角的认识 ...
VUE3+ThreeJs实现3D全景场景，可自由旋转视角
介绍文章中使用到的案例图片都来源于:Humus - Textures 这个网站里面有很多免费的资源.每个资源里面都提供6个不同方位的图片.我们只需要通过threejs稍微处理一下,就能实现3d场景了 ...
threejs 实现3d全景鼠标旋转
1.引入 <script type="text/javascript" src="../libs/OrbitControls.js"></s ...
基于threejs + CSS3DRenderer的3D全景
基于threejs + CSS3DRenderer的3D全景可以理解为将相机置放在一个立方体内,调整相机的位置可以拍摄到场景中不同内容.本篇是通过CSS3DRenderer来实现全景浏览,分别铺满一 ...

使用threejs实现3D全景漫游

使用threejs实现3D全景漫游相关推荐

最新文章

热门文章