web前端 vr 看房技术总汇

1、获取全景图

拍摄多张图片，360度全方位拍照

2、PTGui软件

将拍摄好的图片拼接成全景图

渲染方式以krpano 、photo-sphere-viewer.js、pannellum.js其中一种实现

3、krpano (软件制作)

将全景图打包为静态vr网页

4、photo-sphere-viewer

教程：https://photo-sphere-viewer.js.org/guide/
将全景图通过js渲染vr

5、pannellum.js

教程：https://www.jianshu.com/p/15a3f2b8613a
将全景图通过js渲染vr

6、Panolens.js

教程：https://www.jianshu.com/p/9fbe3813e7a6
将全景图通过js渲染vr

krpano或photo-sphere-viewer.js、pannellum.js三者的不同点

1、krpano是通过软件打包成网页，其中锚点、热点、图片、视频等均通过程序设置
2、Photo Sphere Viewer通过js渲染，可通过https://photo-sphere-viewer.js.org/官网查找api
3、krpano收费，但由于是通过程序设置制作vr网页，所以学习成本低，功能完善
4、Photo Sphere Viewer可简单渲染vr，对于不复杂的功能完全可以胜任，比如标记、自动移动场景等
5、pannellum.js与Photo Sphere Viewer 对比

1.pannellum.js对移动端兼容不好，官方不建议在移动端使用（亲测vr视频不支持移动端），不支持npm安装
2.photo-sphere-viewer兼容移动端，文档简单，方便使用（没有找到vr视频功能），支持npm安装
3.Panolens.js不支持npm，支持移动端和移动端vr视频，不支持npm