本文介绍了如何在Vue应用中，利用Photo-Sphere-Viewer库以不同的JavaScript调用方式加载和展示本地的360度全景图片，包括模块化导入Three.js和库文件的引用。
js调用方式和vue不同，切记
webar.html
<head>
<!-- for optimal display on high DPI devices -->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@photo-sphere-viewer/core/index.min.css" />
</head>
<!-- the viewer container must have a defined size -->
<div id="viewer" style="width: 100%; height: 100%;"></div>
<script type="importmap">
{
"imports": {
"three": "https://cdn.jsdelivr.net/npm/three/build/three.module.js",
"@photo-sphere-viewer/core": "https://cdn.jsdelivr.net/npm/@photo-sphere-viewer/core/index.module.js"
}
}
</script>
<script type="module">
import { Viewer } from '@photo-sphere-viewer/core';
const viewer = new Viewer({
container: 'viewer',
panorama: 'static/sphere.jpg',本地图片路径，主页直接写图片.jpg
caption: '全景测试</b>',
touchmoveTwoFingers: true,
mousewheelCtrlKey: true,
});
</script>
扫一扫
5848
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
