接触webGl(three.js)之全景(VR)看房的实现旅程总结

文章目录

前言

实现全景(VR)看房的方式

一、纯Three.js方式

1.安装包

2.实现的业务代码

3.实现演示

二、 使用photo-sphere-viewer

1.安装包

2.实现的业务代码

3.实现演示

三、pano2vr实现

1.下载软件

2.安装软件

3.实现演示

四、krpano方式

五、其他方式

总结

---

前言

这几天可能是机缘巧合吧，我朋友让我帮他弄一下全景(VR)看房功能（类似贝壳看房不过最后做不出来....），这时候我默认大家都了解了什么是OpenGL，什么是WebGL，以及Three.js。不过不了解也关系，我是从萌新角度去介绍如何开发的（引导开发式）。

---

实现全景(VR)看房的方式

让我介绍一下我这几天自己琢磨的方式吧，虽然很一般都是对第一次接触的人还是有很大的帮助。

一、纯Three.js方式

1.安装包

npm install three

// 过渡动画
npm install tween

2.实现的业务代码

代码（vue+three）简单实现了全景看房，以及点击获取3维坐标位置并把相机移动过去。

3.实现演示

ps：动态图太大上传不了只能截图

二、 使用photo-sphere-viewer

1.安装包

npm install photo-sphere-viewer

2.实现的业务代码

代码（vue+photo-sphere-viewer）简单实现了全景看房。

3.实现演示

三、pano2vr实现

ps：这是一个设计软件

1.下载软件

链接: https://pan.baidu.com/s/1hbkGuCJxWgddvgc0xcUdAQ 
提取码: 6kpp
解压密码：www.zhenxz.com

 

2.安装软件

正常安装一路同意下一步即可

安装完成之后把 破解文件 pano2vr.exe   放置到你安装的目录里面  覆盖替换

然后 断开网络  接着 打开软件，输入 许可证秘钥

BYuu*vuG:2QxYky3mJLgxTxdChU)wezBmKJPXxUt!rrm*iz8LmeduVgGJhfKGRMe*ChYmqYVcXqb:icz3iD*cWp*nHUnfVk(K2k4Zz4G3C)AfGcg4rq4q49fnRZFUdaj

3.实现演示

我用这软件做了一个案例，其实很简单主要是大家要学会 皮肤制作，别的都很简单。

四、krpano方式

krpano案例

当前案例

五、其他方式

肯定还有别的方式的，只是我这边就不做多的演示了，不过我是建议大家还是使用第一种方式进行深入开发（纯Three.js）。

---

总结

OpenGL是一套规范，不是接口，学习这套规范，就可以在支持 OpenGL 的机器上正常使用这些规范，在显示器上看到绘制的结果。

WebGL 是一种 3D 绘图标准，这种绘图技术标准把 JavaScript 和 OpenGL ES 2.0 结合在一起，通过 HTML5 的 Canvas 来和 DOM 打交道，为HTML5 Canvas 提供硬件 3D 加速渲染。WebGL 技术标准免去了开发网页专用渲染插件的麻烦，可被用于创建具有复杂 3D 结构的网站页面，甚至可以用来设计 3D 网页游戏等。

Three.js是一款webGL框架，由于其易用性被广泛应用。Three.js在WebGL的api接口基础上，又进行的一层封装。

哈哈哈~理论还是要有的，今天我介绍了三种实现方式，具体看你业务需求需要怎么实现。