vue3.0 使用Photo Sphere Viewer创建vr 360全景示例代码

vue3.0 使用Photo Sphere Viewer创建vr 360全景示例代码

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 需要使用的图片地址.

  1. 静态图片: 使用 require('...文件路径')
  2. 外链图片: 通过外链地址转canvas后读取base64, 放入到img.src中, 然后在图片加载成功后(即onload时), 调用new Viewer(), panorama 指向元素的src
  3. 动态切换时, 需destroy(),再重新 setPanorama('文件路径', true, true)

代码地址

Copyright: 采用 知识共享署名4.0 国际许可协议进行许可

Links: https://demongao.com/2020/09/vue30使用photosphereviewer创建vr360全景示例代码

Buy me a cup of coffee ☕.