Photo Sphere Viewer渲染全景图片

下载

官方网站:
---- https://photo-sphere-viewer.js.org
附属依赖必选项：
---- three.js
---- browser.js
注： 可以直接使用 npm install photo-sphere-viewer或者yarn add photo-sphere-viewer安装，会自动下载three.js和browser.js

官网demo详解：

    
    







Loading...












The panorama can't be loaded

好了，以上就可以实现一个简单的全景图片渲染demo了，你可以用手机拍自己周围，让别人足不出户访问你周围。

看看效果：
[图片上传失败...(image-fc368c-1589101404630)]

自己动手实现

1.如果找不到下载依赖的地方，或者不想自己npm安装，可以直接将上面引入链接在浏览器打开，然后鼠标邮件另存为文件的名字，保存到本地，然后引入就可以。
2.准备图片，全景图片弄好后上传到随便可以用http访问的区域网或者公网，然后本地直接用链接

好了，至此一个可以生成标记取消标记的demo完成了

[图片上传失败...(image-84582d-1589101404630)]

总结

如果单纯的用three.js实现这些可能就没这么容易了，前面几个文章讲了一些基本的three.js的基础知识，完成web端3D的或者全景图的渲染了，你需要考虑很多东西去实现，而Photo Sphere Viewer不一样，只需要简单的几步，就可以实现大部分需求，定制化的也可以由自己开发。