下载
官方网站:
---- https://photo-sphere-viewer.js.org
附属依赖必选项:
---- three.js
---- browser.js
注: 可以直接使用 npm install photo-sphere-viewer或者yarn add photo-sphere-viewer安装,会自动下载three.js和browser.js
【JavaScript|Photo Sphere Viewer渲染全景图片】官网demo详解:
- 锐客网 #viewer {
width: 100vw;
height: 50vh;
}
好了,以上就可以实现一个简单的全景图片渲染demo了,你可以用手机拍自己周围,让别人足不出户访问你周围。看看效果:
[图片上传失败...(image-fc368c-1589101404630)]
自己动手实现
1.如果找不到下载依赖的地方,或者不想自己npm安装,可以直接将上面引入链接在浏览器打开,然后鼠标邮件另存为文件的名字,保存到本地,然后引入就可以。
2.准备图片,全景图片弄好后上传到随便可以用http访问的区域网或者公网,然后本地直接用链接
全景图渲染 - 锐客网
#container {
margin-top:10vh;
width: 100vw;
height: 70vh;
}
好了,至此一个可以生成标记取消标记的demo完成了
推荐阅读
- 操作系统|[译]从内部了解现代浏览器(1)
- web网页模板|如此优秀的JS轮播图,写完老师都沉默了
- JavaScript|vue 基于axios封装request接口请求——request.js文件
- vue.js|vue中使用axios封装成request使用
- JavaScript|JavaScript: BOM对象 和 DOM 对象的增删改查
- JavaScript|JavaScript — 初识数组、数组字面量和方法、forEach、数组的遍历
- JavaScript|JavaScript — call()和apply()、Date对象、Math、包装类、字符串的方法
- JavaScript|JavaScript之DOM增删改查(重点)
- javascript|vue使用js-xlsx导出excel,可修改格子样式,例如背景颜色、字体大小、列宽等
- javascript|javascript中的数据类型转换