360°全景图的拍摄、后期制作及生成前端html/CSS/JS文件

原载于本人的私人笔记「Notion」中,作于2024年9月1日。现经略改,公开在本博客。
下文中的绿色高亮的超链接中有相应软件的具体使用步骤,可点击查阅。
demo(演示):vr.kangyue.pro

一、拍摄

以大疆精灵4A为例。
若飞行器不支持全景模式,请联网后升级飞行器的固件遥控器的系统。具体方法可联系大疆客服。
  1. 开始飞行
  2. 拍照模式下→拍照设置→全景→球形
  3. 点击拍照按钮,开始自动旋转机身及镜头,并拍摄34张不同角度的照片(耗时约2分钟)

二、调整照片的色彩

因拍摄时在高空,若空气中灰尘较多,可能影响照片的色彩效果。

可使用adobe的lightroom对照片进行批量调整,如添加预设的秋日效果(类似滤镜),也可自定义调整各个参数。调整完成后可批量导出。

三、合并照片

使用AutoPano Giga等工具,可将多张不同角度的照片进行导入,软件会自动将多张照片进行拼接处理,最后生成一张超高分辨率(如20000×10000左右)的全景图。

工具:

四、手动更新天空

因飞行器对天空部分拍摄不全(如无法拍摄正上方),为了在下个步骤中实现360°全景的效果,可手动将拍摄的天空部分进行copy,修补至顶部。也可以在全景图上添加一些别处的天空素材。若添加天空素材,大致步骤如下:

  1. 新建画布
    • 用Photoshop新建2:1的画布(可使用全景图实际的宽度,高度则为宽度的一半);
  2. 添加素材
    1. 将全景图拖入其中,保持左右对齐、底部对齐;
    2. 将天空素材拖入其中,保持左右对齐,顶部对齐,并将天空素材置于图层的上层
  3. 制作融合效果
    1. 在天空素材图层中,添加蒙版
    2. 使用渐变工具(前景色为黑色,后景色为白色)在合适位置从上至下划线
  4. 改变太阳的位置
    1. 选中天空图层中的天空素材
    2. 菜单栏滤镜→其它→位移
    3. 键入数字进行调整
  5. 去掉左右裂缝
    1. 导出为jpg(推荐最佳或高质量)
    2. 将导出的jpg导入至Photoshop
    3. 将裂缝及周边选中
    4. 使用修补工具进行修补
    5. 导出为jpg(推荐高或中质量)

其他:

    五、生成前端文件

    详细内容请访问:

    Pano2VR工具不仅可以生成前端文件,还可以:

    1. 使用修补工具,在天空、地面等处添加logo
    2. 添加热点,以便实现不同场景的切换
    3. 添加背景音乐

    以上均为可选。最后生成的前端文件,包括html、css、js,以及切割后的图片文件等。

    另有类似的工具:marzipano

    六、部署在web服务器

    将生成的文件上传至支持静态的web服务器中即可。