Skip to content
w269219808Public

About

2:1 比例的等距柱状投影全景图预览

Resources

Stars

0 stars

Watchers

0 watching

Forks

Repository files navigation

方案B 完整本地离线v5代码(无CDN、纯本地文件)

1、先建好文件夹结构(严格按这个建)

project/
├─ index.html          # 下面完整代码
├─ sphere.jpg          # 你的全景图
└─ lib/                # 所有离线库文件放这里
   ├─ three.module.js
   ├─ core/
   │  ├─ index.min.css
   │  └─ index.module.min.js
   └─ autorotate-plugin/
      └─ index.module.min.js

2、逐个下载离线文件到对应目录

  1. three.module.js → 放入 lib/ 地址:https://cdn.jsdelivr.net/npm/three@0.160.0/build/three.module.js
  2. core/index.min.css → 放入 lib/core/ 地址:https://cdn.jsdelivr.net/npm/@photo-sphere-viewer/core@5.14.3/index.min.css
  3. core/index.module.min.js → 放入 lib/core/ 地址:https://cdn.jsdelivr.net/npm/@photo-sphere-viewer/core@5.14.3/index.module.min.js
  4. autorotate-plugin/index.module.min.js → 放入 lib/autorotate-plugin/ 地址:https://cdn.jsdelivr.net/npm/@photo-sphere-viewer/autorotate-plugin@5.14.3/index.module.min.js

3、完整 index.html 离线代码(全部本地相对路径,无任何网络请求)

<!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>

4、启动使用要求

  1. 必须用python静态服务打开(双击本地html会跨域报错)
cd C:\Users\1\Downloads\project
python -m http.server 8080
  1. 浏览器访问 http://127.0.0.1:8080,全程无网络也能正常加载全景。

补充说明

  1. 不要混用你之前下载的github源码分包,这套只需要手动下载的4个精简文件,体积很小;
  2. 如需新增其他插件(罗盘、标记点),只需新增对应插件文件夹,在importmap和import里补充路径即可;
  3. 对比你手里的github源码包:这套是编译压缩后的成品,没有多层TS源码依赖,不会出现连环404。

About

2:1 比例的等距柱状投影全景图预览

Resources

Stars

0 stars

Watchers

0 watching

Forks

Releases

Packages

Contributors

Languages