vue3.0 使用Photo Sphere Viewer创建vr 360全景示例代码
安装 Photo Sphere Viewer
yarn add three
yarn add photo-sphere-viewer
使用
import { Viewer } from 'photo-sphere-viewer'
import 'photo-sphere-viewer/dist/photo-sphere-viewer.css'
new Viewer({
container: document.querySelector('#viewer'),
panorama: require('文件路径')
})
注意
panorama 需要使用的图片地址.
- 静态图片: 使用 require('...文件路径')
- 外链图片: 通过外链地址转canvas后读取base64, 放入到img.src中, 然后在图片加载成功后(即onload时), 调用new Viewer(), panorama 指向元素的src
- 动态切换时, 需destroy(),再重新 setPanorama('文件路径', true, true)