近期有个项目要用到全景图,就开始研究做了一个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