最近朋友圈有些标题党！写着360度！螺旋！ vr! 3d场景! 其实并没有吹的那么牛b。。点进去就是个全景图而已
全景图 并不是真3d 更不是什么vr！
全景图和普通的网页背景是不同的 我们需要的是3d背景 摄像机转动的时候背景也会跟着变化的
可以建立一个有6张不同纹理的立方体 那6张纹理构成了周围的环境
比如下面这样
把这6个面折成一个立方体 镜头再进入其中 你就会有身临其境的感觉！
做这个东西有多种方案
对度娘搜索框输入 “html5 webgl全景图” 回车！会出来相关的代码 但都是基于weblg框架（国内使用原生的都死光了！） 或者一些其他语言写的
然而 做这个东西使用css3足矣 下面写的这个demo就是基于css3的 并不需要“巨型框架库” 和 “传说中的第三方”
gif效果（我这儿的gif一直很渣） demo戳
总共有3个立方体 每个立方体6张不同贴图（贴图是网上找的）每个立方体中有个长得像黑洞的东西 点击它就进入下一个场景
随便扯扯
初始化一个立方体 planet1对象里 通过touch #fge1元素可以切到planet2
对立方体对象计算几个关键的rotate值
其实 如果理解了css3的极限 那篇内容 做全景图根本不会有什么难度的
有疑问可call我
这东西用作3d环境展示确实不错 不需要麻烦的建模 只需要给到正确的纹理就可以了！
它又可以进一步增加身临其境的感觉 比如跟着镜头移动 只保留旋转变换 去除平移操作 整个场景会显得很真实！ 显的很大！
而且用它b格还很高~