project/
├─ index.html # 下面完整代码
├─ sphere.jpg # 你的全景图
└─ lib/ # 所有离线库文件放这里
├─ three.module.js
├─ core/
│ ├─ index.min.css
│ └─ index.module.min.js
└─ autorotate-plugin/
└─ index.module.min.js
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>v5 纯本地离线全景预览</title>
<!-- 本地core样式 -->
<link rel="stylesheet" href="./lib/core/index.min.css">
<style>
* { margin: 0; padding: 0; }
html, body { height: 100%; overflow: hidden; }
#viewer { width: 100%; height: 100%; }
</style>
</head>
<body>
<div id="viewer"></div>
<!-- 本地依赖映射,全部指向本地lib文件夹,不再访问外网 -->
<script type="importmap">
{
"imports": {
"three": "./lib/three.module.js",
"@photo-sphere-viewer/core": "./lib/core/index.module.min.js",
"@photo-sphere-viewer/autorotate-plugin": "./lib/autorotate-plugin/index.module.min.js"
}
}
</script>
<script type="module">
// 导入本地模块
import { Viewer } from '@photo-sphere-viewer/core';
import { AutorotatePlugin } from '@photo-sphere-viewer/autorotate-plugin';
const viewer = new Viewer({
// 你的全景图,和html同级
panorama: "sphere.jpg",
container: document.getElementById("viewer"),
plugins: [AutorotatePlugin],
// 底部工具栏按钮
navbar: ["zoom", "autorotate", "fullscreen", "download"],
autorotateDelay: 3000,
autorotateSpeed: 0.2,
loadingTxt: "全景加载中..."
});
</script>
</body>
</html>