最近朋友圈有些标题党！写着360度！螺旋！ vr! 3d场景! 其实并没有吹的那么牛b。。点进去就是个全景图而已

全景图 并不是真3d 更不是什么vr！

全景图和普通的网页背景是不同的 我们需要的是3d背景 摄像机转动的时候背景也会跟着变化的

可以建立一个有6张不同纹理的立方体 那6张纹理构成了周围的环境

比如下面这样

把这6个面折成一个立方体 镜头再进入其中 你就会有身临其境的感觉！

做这个东西有多种方案

对度娘搜索框输入 “html5 webgl全景图” 回车！会出来相关的代码 但都是基于weblg框架（国内使用原生的都死光了！） 或者一些其他语言写的

然而 做这个东西使用css3足矣 下面写的这个demo就是基于css3的 并不需要“巨型框架库” 和 “传说中的第三方” 

gif效果（我这儿的gif一直很渣）  

总共有3个立方体 每个立方体6张不同贴图（贴图是网上找的）每个立方体中有个长得像黑洞的东西 点击它就进入下一个场景

 

随便扯扯

初始化一个立方体  planet1对象里 通过touch #fge1元素可以切到planet2

对立方体对象计算几个关键的rotate值

其实 如果理解了 那篇内容  做全景图根本不会有什么难度的

有疑问可call我

 

这东西用作3d环境展示确实不错 不需要麻烦的建模 只需要给到正确的纹理就可以了！

它又可以进一步增加身临其境的感觉 比如跟着镜头移动 只保留旋转变换 去除平移操作 整个场景会显得很真实！ 显的很大！ 

而且用它b格还很高~