uniapp中使用PhotoSphereViewer全景图

近期有个项目要用到全景图,就开始研究做了一个demo,每次使用一个新东西,迎接的都是挑战

本案例是在uniapp中引入全景图,插入markers节点:

1. 下载依赖包

npm install photo-sphere-viewer

安装之后下载下来的包含 three.js  uevent.js  photo-sphere-viewer

注: 可以不用在当前项目下创建node_modules,只需要把用到的文件复制到项目目录下即可

2.uniapp中使用es6引入外部文件

page.vue 中

引入PhotoSphereViewer,MarkersPlugin,GyroscopePlugin,StereoPlugin,最新PhotoSphereViewer中没有MarkersPlugin,GyroscopePlugin,StereoPlugin,使用时需要单独引入,视情况而定

    import { Viewer as PhotoSphereViewer } from 'photo-sphere-viewer';
    import MarkersPlugin from 'photo-sphere-viewer/dist/plugins/markers'
    import 'photo-sphere-viewer/dist/ph

  • 3
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
如果要使用 Photo Sphere Viewer 插件加载没有后缀的图片,你可以在加载图片时,使用 `setPanorama()` 方法来指定图片的路径,并使用 `setPanoramaType()` 方法来指定图片类型。以下是一个示例: ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Photo Sphere Viewer</title> <link rel="stylesheet" href="photo-sphere-viewer.min.css"> <style> #viewer { width: 800px; height: 600px; } </style> </head> <body> <div id="viewer"></div> <script src="photo-sphere-viewer.min.js"></script> <script> var viewer = new PhotoSphereViewer.Viewer({ container: 'viewer', panorama: '', defaultLong: Math.PI, defaultLat: 0, time_anim: false }); viewer.setPanorama('/path/to/image', null, {panorama_type: 'equirectangular'}); </script> </body> </html> ``` 在上面的示例,我们首先引入了 Photo Sphere Viewer 的 CSS 和 JavaScript 文件。然后创建了一个名为 `viewer` 的 `<div>` 元素,用于显示全景图。在 JavaScript 部分,我们创建了一个新的 `Viewer` 实例,并将其绑定到 `viewer` 容器上。然后,使用 `setPanorama()` 方法来指定图片的路径为 `/path/to/image`,并通过 `{panorama_type: 'equirectangular'}` 参数来指定图片类型为等距圆柱投影(equirectangular)。 请将示例的文件路径和图片路径替换为你自己的实际路径。注意,如果你的图片没有后缀,需要确保图片本身的格式是支持的,比如常见的 JPEG 或 PNG 格式。
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值