6

年前，我接到大学朋友的一个移动端官网项目。项目就是完全复刻另外一个网站A，好在网站A功能超级简单，前端技术栈是jq，整个网站只有两个难点。

  1. 有一个提交表单功能
  2. 有一个VR展示页面

对于第一个问题，我就找了个开源后台项目Lin cms，搭建了一套写了一个模块。第二个问题就有意思了，网站A使用的是叫建e网生成的VR页面。然后iframe且套到网页上。现在有两种方案；第一种，自己写VR页面，但是我就想赚快钱，不想动脑筋，所以否定了。第二种，用自己的建e网账号制作一个一摸一样的VR页面，替换iframe地址，但是我又没有生成VR页面所需要的六面图片，甲方这里也没有。那我只能用F12大法了。

  1. 在VR页面右下角三个控键上右键，点击检查

2

  1. 切换到network -> img，并刷新网页

3

  1. 这时你会看到lx_x_x_x命名的图片，这些其实就是VR图片

4

  1. 更具我的判断，命名含义如下
  • 第一位l固定值
  • 第二位目前只有1 2两种情况代表着分辨率；1为一倍分辨率(1024*1024)，2为2倍分辨率
  • 第三位代表方向
    缩写 全写 中文
    l left 左
    f forward 前
    u up 上
    r right 右
    b back 后
    p down 下
  • 第四位和第五位为排序字段；如果第二位为1代表着是1倍分辨率，这时第五 六位都是1，也就是说每一面图片都是一张完整图，但是这样的图片分辨率低，不建议使用。如果第二位是2代表2倍分辨率，这时每一面图片由四张组成，他们的拼接顺序是，请看下方图片。由于每张图片分辨率是1024*1024，拼接后的分辨率就是2048*2048

1

  • 依次把六个面图片，都拼接好，这样就得到高分辨率可用于VR中的图片了