使用 Marzipano 生成需要的静态资源。


前言

在本系列上一章的文章内,我们了解了免费托管自己的全景漫游的需求,如忘记的可以点击下列卡片回顾以下:

教程|免费托管自己的全景漫游 #01
日期: 2023-03-22   标签: #教程  #技巧  #全景  #免费  #托管 
免费托管全景图 / 全景漫游概括说明。 ......

我们需要一个要求一个要求满足,本文是通过最简单的在线工具生成我们需要的静态资源。


将渲染的图片生成全景漫游的静态资源的工具、软件有很多,本文介绍一个优秀的在线工具: Marzipano 。

注:

本文所有操作均使用 YANJiOS 10 Pro 定制系统

受限于我国的网络环境,个别地区/个别时间段可能存在不可用。

需要掌握额外的上网姿势。

Marzipano 简介

20230323-00

Marzipano 官网:https://www.marzipano.net/

  • Marzipano 是适合现代网络浏览器标准的 360° 全景媒体查看器;
  • Marzipano 支持所有主要的桌面浏览器和移动设备;
  • Marzipano 采用标准网络技术并提供强大的 JavaScript API;
  • Marzipano 在 GitHub 上开源,并且完全免费。

在本系列教程中,我们不需要自己部署 Marzipano 等相关高级功能,

仅需要使用 Marzipano 提供的 Marzipano Tool 。

Marzipano Tool 链接:https://www.marzipano.net/tool/

注:

Marzipano Tool 是英文的在线应用,如有语言障碍,请使用网络浏览器翻译插件。

Marzipano Tool 是在线应用,所有的更改都在网络浏览器内操作完成,

Marzipano Tool 没有保存选项,在确定制作完成之前,请不要关闭你所使用的网络浏览器。


制作过程

注:

本文使用素材 王晓刚Dreamer 案例作品预览: 【 建E网链接 - 客餐厅全景 】

本文使用素材 王晓刚Dreamer 案例原图下载:【 蓝奏云链接 - 客餐厅全景 】

  1. 打开网络浏览器( Chrome 为例 )

    输入 Marzipano Tool 链接:https://www.marzipano.net/tool/ ( 可以直达 ); 20230323-01 20230323-02

  2. 单击【 Strat 】开始制作全景漫游; 20230323-03

  3. 单击【 Select files 】选择渲染出的全景图,

    上传至 Marzipano Tool ; 20230323-04 20230323-05

  4. 通过【 Add more panoramas 】添加其他全景图,

    顺序可以拖动,

    名称可以修改; 20230323-06 20230323-07

  5. 通过【 Link hotspot 】制作场景切换图标;

    【 Set initial view 】确定打开此全景时首屏; 20230323-08 20230323-09 20230323-10

  6. 单击【 Export 】导出制作好的场景,

    弹出对话框点击【 OK 】,

    会自动下载 .zip 格式的文件 20230323-11 20230323-12 20230323-13

注:

Marzipano Tool 的具体使用方式请自行摸索,本文的仅是一个最简单的操作,目的是为了演示功能;

Marzipano Tool 十分简单,稍微摸索即可掌握;

如果本系列反馈较好,

我会出单独的章节阐述 Marzipano Tool 的详细教程,

提供修改过的 UI 面板( 原生的相对难看 )。


本地预览

注:

上一节制作好的静态文件下载:【 蓝奏云链接 - project-title 】 ( 建议使用自行尝试的文件 )。

Chrome 浏览器为了安全考虑,打开 HTML 默认无法引用本地 JavaScript 。

本地预览以 Chromium 内核浏览器的 Chrome 浏览器为例子,

其余如 Edge 等 Chromium 内核的浏览器操作方式一致,Firefox & Safari 请自行搜索。

  1. 将 Marzipano Tool 输出的压缩包解压得到静态资源; 20230323-13 20230323-14 20230323-15 20230323-16

  2. 鼠标右键选择桌面的 Google Chrome 浏览器图标

    【 发送到 】-【 桌面快捷方式 】

    生成一个新的快捷方式并给其重命名( 本步骤是为了不影响正常使用 ); 20230323-17

  3. 鼠标右键新建的 Google Chrome 浏览器快捷方式图标,

    单击【 属性 】; 20230323-18

  4. 在「 快捷方式 」面板找到「 目标 」 在原链接后添加 -disable-web-security -user-data-dir=C:\ChromeData ( 第一个 - 之前有空格,C:\ChromeData ) ( 意思是在 C 盘创建名为 ChromeData 的文件夹存放缓存路径,可自行修改 ) 随后【 应用 】并【 确定 】; 20230323-19 20230323-20

  5. 通过修改好的 Google Chrome 浏览器快捷方式

    打开 Chrome 浏览器; 20230323-21

  6. 找到制作好的文件夹内 index.html 文件,

    将其拖进 Chrome 浏览器,

    就可以在本地预览输出的文件了。 20230323-22 20230323-23


增补

除了 Marzipano 还有其他工具、应用来制作我们需要的静态文件,比如 Pano2VR 。

不过篇幅有限,不再赘述,有空详细讲解 Pano2VR 的具体使用方式。

后记

下一篇将会讲解如何将已有的静态资源寻找合适的静态资源托管,得到链接。