仰天一笑(Ansonxuyu),专业从事软件定制开发、Web软件开发,网站建设,网络推广,APP开发,微博应用开发,微信应用开发,电子商务开发,物联网开发等技术。互联网8年风雨,愿在此交朋识友,交流心得,分享技术知识(策划/研发/运营/推广/合作)!QQ:
近来风生水起的VR虚拟现实技术，抽空想起年初完成的&星球计划&项目，总结篇文章与各位分享一下制作基于Html5的3D全景漫游秘籍。
QQ物联与深圳市天文台合作，在手Q&发现新设备&-&公共设备&里，连接QQ物联摄像头为用户提供2016年天体大事件的直播，大家可以通过手Q实时观看到世界各地最佳观测点的日食，流星等天体现象。承载整个&星球计划&活动的运营页面，经多方讨论，我们决定尝试3D全景漫游模式的H5运营页进行推广，今天就不详述活动的具体内容，先和大家聊一聊这H5里&3D全景漫游&的制作方法。
先贴一个体验地址（请忽略GIF录屏的卡顿及字体，iOS开启陀螺仪体验最佳），Page3的宇宙部分-转动手机在模拟的宇宙里搜寻各大行星，就是我们今天要说的基于Html5的3D全景漫游。
要制作全景漫游，首先得有全景图像。全景图像的获取通常是借助鱼眼的全景摄像机的拍摄来完成的，或者是单反相机、鱼眼镜头、云台和三角架的组合。需要按照一个方向旋转360度拍摄一组照片，照片之间要有部分重合的部分，方便进行后期的拼接和融合。在拍好照片后需要将它们无缝拼接在一起，生成的全景图像可分为球面全景图、立方体全景图以及柱状全景图等。（咋们腾讯地图的街景体验，就是最常见的全景漫游技术啦）
没有全景摄像机，也可以通过一些素材站点拿到适合我们项目的全景图。例如：
当然，星球计划的背景图是宇宙星际，相对而言是无序的，所以靠视觉设计师进行拼接绘制也是可以的。
而什么是全景漫游呢，全景漫游技术可以让体验者在全景图像构建的全景空间里切换视角的浏览。它是通过拍摄全景图像，再采用计算机图形图像技术构建出全景空间，让使用者能用控制浏览的方向，或左或右、或上或下观看物体或场景，仿佛身临其境一般。与传统的3D建模相比，全景漫游技术制作简单，数据量小，系统消耗低，且更有真实感。故近年来，也是VR技术的一大热门实现手法，用前面的贴图例子来个demo。而在移动端的全景漫游，更是可以绑定陀螺仪，让你更有身临其境的感觉。
在项目初期，预研了一些全景漫游制作方案，包括目前最为常用的全景漫游制作工具是Pano2vr & Krpano，以及用Flash，QuickTime，基于Java，js等其他方式制作全景漫游，但据预研所了解的个方案优劣势对比图如下图，结合&星球计划&项目的具体情况，最终优先选择了Threejs的实现方案。
这里顺便和大家聊聊目前最为常用的全景漫游制作工具是Pano2vr & Krpano。
（1）Pano2vr操作简单功能虽少但非常实用，&导入全景图-设置交互热点-微调-导出&即可直接生产flash,html5,Quicktime等格式。
Pano2vr对于仅用在PC，iOS上的需求非常合适快捷，但对Android机的支持表现不佳。
（2）Krpano，功能强大完善，各平台兼容性高，拓展性很强，各类VR场景特效都可承载。但自成体系，需要遵循Krpano xml的这套编程语言，没有gui的软件界面，新手上手及后期维护成本较大，生成的全景漫游专业但对载入速度，内存占用都有影响。但对于想做高阶的，个性化，定制化全景漫游项目，Krpano是不二选择。
但这2个工具都需要购买授权码才可商用，非免费。
（3）Three.js源自Github的一个开源项目，，官网：&。
看到一个同行的解释，说理解成Three + js就可以了。Three表示3D的意思，js表示javascript的意思，故three.js就是使用javascript来写3D程序的意思，格外的直白清晰啊。依靠javascript的语言编写，自然给这个方案带来了高拓展，高兼容，低开发成本，可高性能且免费的几大优势。
（4）Flash，QuickTime，基于Java，js等其他方式这里就不一一详述，大致的优劣势对比请参考上面的表格（具体评分仅供参考，软件版本更新也许会有各方面的升级）。
想要利用Three.js制作一个物体渲染到网页中去，需要构建这3个组建：场景（scene）、相机（camera）和渲染器（renderer）：
（1）场景（scene）
即是画布，是所有物体object的容器。在最开始的时候对场景实例化，将之后构建的物体都添加到场景中即可。
（2）相机（camera）
用户是通过相机Camare来查看在scene下的3d场景，在three.js里包含了正交投影照相机（Orthographic Camera）和透视投影照相机（Perspective Camera）2种，从模拟人眼看物体的方式来选，透视投影照相机更适合。如下图所示，fov是相机视角的夹角，aspect等于相机画幅比例，near和far分别是照相机到视景体最近、最远的距离，均为正值，且far应大于near。
（3）渲染器（renderer）
渲染器是用来设定渲染的结果会在页面的什么元素上面呈现，以及按什么规则来渲染。
在Three.js中，场景是容器，把我们星球计划的星星们放置在构建的3D场景中的不同位置；相机对着下场景拍摄，拍摄结果通过渲染器实时的绘制在我们的浏览器上。
（4）构建宇宙并置入场景中
定义了这三大元素之后，下一步，就是构建我们的星球计划所需的宇宙了。前文有提到，全景图像可分为球面全景图、立方体全景图以及柱状全景图。
虽然球面全景图具有和人眼最接近的构建模式，但需要很多个立面才可以构建成一个球体，球面的经纬度坐标无法展开成一个平面贴图，相对于其他方案，性能消耗过高，拼接方法过于繁琐；而柱形全景图的垂直视野小，不好做顶部底部的俯仰视角。我们选定了最常见的立方图全景图来构建我们的3D场景。
立方体全景图有6个面，我们需要定义每个面贴图的背景图片，3D位置，旋转角度（默认的6个面都是朝着我们的，我们需要定义朝坐标轴的各个方向做90度的旋转，才可以搭建成一个立方体）。
然后添加到THREE.Object3D 的数组中，这样我们就在场景中构建好了一个3D的宇宙空间。
这里，考虑到星空背景主要为了氛围烘托，我们将6个面的贴图减少成2个，以此缩减了资源文件的大小，如下图所示。
这里我们用的是Threejs的&实时渲染：就是需要不停的对画面进行渲染，即使画面中什么也没有改变，也需要重新渲染。其中一个重要的函数是requestAnimationFrame，这个函数就是让浏览器去执行一次参数中的函数，这样通过上面animate中调用requestAnimationFrame()函数，requestAnimationFrame()函数又让animate()再执行一次，就形成了我们通常所说的渲染循环&了。
通过上面这些步骤，我们就构建好这个3D的宇宙空间了。
（6）构建星球放置在宇宙中
一期的星球计划中，需要增加8颗星球，为了避免画面过于拥挤，星球们被分散定位在了6个面上。之前我们定义宇宙六个面的时候给了每个面一个固定的section id，通过简单的js 我们可以往平面中加入星球的DOM结构。
因此也可以很轻松的利用CSS给这些星球定位及增加个性的动画效果，这里要特别注意，不要增加阴影等耗内存特别大的动画效果，它们是Crash罪魁祸首。
（7）绑定陀螺仪
最后一步，将全景漫游绑定陀螺仪，这里涉及到需要对陀螺仪事件做个保护代码，判断机器是否支持陀螺仪。完成以上几步，既可以实现一个在移动端的全景漫游啦。
在项目完成的初期，对部分安卓机的内存消耗还是过大，为此在完成项目之后继续尝试了一些优化工作，包括&缩减宇宙的尺寸，合并全景贴图，禁用陀螺仪，预加载和懒加载，星球CSS3动画缩减，资源文件深度压缩等工作，但还是无法避免在内存不足的安卓机下存在Crash的风险，为保证项目的稳定上线，退而求其次对安卓机做了兼容版的体验，预期在后续的项目迭代中再优化页面在安卓下的表现，实现全平台的体验统一。
最后，仅以此文总结在移动端构建3D全景漫游的试水总结，该尝试基本上能够满足项目的需求，但在性能优化，细节完善上还继续打磨，希望能对有兴趣的小伙伴带来一些帮助^^。本周热点我们在平谷 平谷在这里平谷地区影响力覆盖的微分享平台新朋友请点标题下方“平谷圈...作者：指南君来源：小学生阅读指南（ID：xxsydzn）编辑：诗词天地说到近期最...韩国近日表示，驻韩美军“萨德”反导系统最终落户庆尚北道星州高尔夫球场，背后大金主...二孩放开后老大的日子是一天不如一天了自从有了弟弟、妹妹，日子过得越来越心酸了做饭...【河北交通广播原创编辑】邢台：儿子把亲爹活埋了？！今天下午，有位听众通过微信发来...H5打造3d场景不完全攻略（二）: Amazing CSS3D - 推酷
H5打造3d场景不完全攻略（二）: Amazing CSS3D
对的，本文就是着重介绍如何使用CSS3中的3D变换打造出H5中的3D效果。灵感来源于造物节团队的3d引擎，因为使用方法比较复杂，也没有开源的API文档，于是想自己另外造个轮子，便开始了相关内容的学习和实践。
众所周知，目前市面上的H5 3D类库（如Three）、引擎（Egret）、构建工具（kpano、720云）都或存在体积太大、不开源、非免费、学习成本高等问题。对于我们较为熟悉的CSS3，为什么就不对它好好利用一把呢？诚然，CSS3存在我们比较清楚的短板，CSS对平面的渲染能力高，但是对3D建模方面便力不从心了。
我们知道3D的表现形式即让我们通过平面可从不同角度看到真实物体的展示效果。
在计算机世界里，3D世界是由点组成，两个点能够组成一条直线，三个不在一条直线上的点就能够组成一个三角形面，无数三角形面就能够组成各种形状的物体，如下图。
我们通常把这种网格模型叫做Mesh模型。给物体贴上皮肤，或者专业点就叫做纹理，那么这个物体就活灵活现了。最后无数的物体就组成了我们的3D世界。
Three中模型解析器的原理是将顶点数组将模型的顶点用数组储存起来，再利用three中的face函数取得定点数组中的三个或四个顶点的索引构成空间平面。如此反复，模型就被完整构造出来了。
于是，越复杂的物体就需要越多的网面拼接。而css中是不存在根据坐标建立空间平面的能力的。
（插个题外话，其实css有一个属性与坐标有关，那就是clip-path。这个属性的特性赋予了css3一定的建模能力。实现方法可参考这篇文章
CSS3实现3D全景
。上篇文章介绍了Web3D的一些表现形式，这里着重谈谈怎么以CSS3实现3D全景。下面会探索Three实现全景的方案，因为WebGL门槛和学习成本还是比较高的，不适于用于快速开发。造物节的CSS3d全景已有文章对其进行了技术探秘，但都未深入谈及具体实现方式。
要清晰理解实现方式，必须对CSS3的transform、perspective有一定的认识。
原理方面的东西我就不深入讲了，大家可以先看看这篇文章，对CSS3D有一个大致的概念。
CSS全景可通过建立柱形或者立方体再通过贴图方式实现。也许会有人问，球体行不行？实际上是不行的，球体模型由无数个极小的平面拼接构成连贯曲面，而CSS缺乏使平面扭曲的属性。球体模型我们可以使用上文提过的Clip-3d建造出，但是，贴图问题就解决不了了。
相信很多打造过或有了解过3d全景的同行们都知道这个概念。实际上Skybox就是一个立方体，通过给六个面贴上不同的，边缘可以无缝贴合的图片，再将视角伸入盒子内部。可以想象成我们自己站入了一个巨型立方体盒子内部，移动视角便能看到不同的场景。
来看一张天空盒子的贴图，剪头指向的边缘代表需要无缝贴合的边。
从上图可以看出只要相互贴合的两个面上的图像能够无缝拼接，那么再通过对各个面进行一定的旋转变换，天空盒子就能被打造出来了。
那么问题来了，怎么去拍摄制作这样的图片呢？这就需要通过一些专业软件了，比如pano2vr，max等。其实，需要用到这些专业工具打造的全景对画质和拼合度的要求都非常高了，而单纯依靠CSS3中的变化给不了它们很好的体验。
但我们今天讨论的是某些运营活动H5打造的全景，此全景不一定真实存在，或者是和真实场景有一定的比例差距。例如星空、海底。对于这类贴合度可人为改变的全景图的打造，我们可以采用现有的高清图片，再经由PS转换成六面全景图。
贴一篇文章
其实主要思想是
在一张大图上勾画出六个面的选取 &
选择大图中某个面的相邻面将其旋转到需要拼合的盒子的某个面上，使他们完美贴合 &
得到最合理的六面贴图后，观察有无创造出新的边缘，通过蒙版等工具使他们自然融合。
贴图完成就可以创建立方体了。首先将创建好的六个面切割出来，以front、back、left、right…命名标记位置。
-webkit-perspective: 1000
width: 500
height: 500
margin: 100
transform-style: preserve-3d;
.cube img {
width: 130
height: 130
.cube img:nth-child(1) {
.cube img:nth-child(2) {
transform:
rotateY(180deg);
.cube img:nth-child(3) {
transform:
rotateY(90deg);
.cube img:nth-child(4) {
transform:
rotateY(-90deg);
.cube img:nth-child(5) {
transform:
rotateX(90deg);
.cube img:nth-child(6) {
transform:
rotateX(-90deg);
&div class=&sence&&
&div class=&cube&&
&img src=&img/skybox/front.jpg& alt=&& /&
&img src=&img/skybox/back.jpg& alt=&& /&
&img src=&img/skybox/left.jpg& alt=&& /&
&img src=&img/skybox/right.jpg& alt=&& /&
&img src=&img/skybox/top.jpg& alt=&& /&
&img src=&img/skybox/bottom.jpg& alt=&& /&
准备好6个面，载入贴图。通过旋转，使得每个面旋转到相印的位置。如左边的面由原本面朝我们的图片绕Y轴逆时针旋转90&得到。（注意Y轴逆时针旋转是正数）
此时会得到下图这样的效果：
但是由于每个面的旋转中心都在其正中位置，因此还不能形成正方体。于是我们需要让每个面产生一定的位移。
贴一张坐标系图以助于大家理解。
现在首先让front位移到应该到的位置，由于全景图的镜头在立方体内部，因此，可以想象一下，我们需要将图片往后移动。移动距离很明显为立方体边长的一半。在这里是65px。得到下图结果。
.cube img:nth-child(1) {
transform: translateZ(-65px);
照这样看，是不是back位移为 translateZ(65px) ，left为 translateX(-65px) ，top translateY(-65px) 呢？但结果并不是我们想要的。
重新看回上文空间坐标系的那张贴图，我们会发现，平面旋转后，其对应的三个轴的位置也改变了。如图片绕Y旋转后，Z轴指向为屏幕的水平方向。绕X旋转后，Z轴指向垂直方向。因此我们很容易发现，其实要将贴面移动到正确的位置，都只需要让他们 translateZ(-width/2px) 就可以了。
为了让大家容易理解，我这里设置了一个较大的perspective。要想得到全景的效果，我们将镜头拉近让它进入到box里面就可以了。
接下来绑定手势，就可以让它动起来啦。
部分代码：
viewer.on('touchstart', function(e) {
x1 = e.targetTouches[0].pageX; - $(this).offset().
y1 = e.targetTouches[0].pageY; - $(this).offset().
viewer.on('touchmove',function(){
var dist_x = x2 - x1,
dist_y = y2 - y1,
deg_x = Math.atan2(dist_y, perspective) / Math.PI * 180,
deg_y = -Math.atan2(dist_x, perspective) / Math.PI * 180,
c_x_deg += deg_x;
c_y_deg += deg_y;
cube.css('transform', 'rotateX(' + deg_x + 'deg) rotateY(' + deg_y + 'deg)');
Math.atan2(y,x) 方法：得到从 x 轴到点 (x,y) 之间的角度。对于空间左边系比较难理解，大家可以想象成一张以空间Z轴为Y轴的平面绕X轴正方向旋转的角度即为cube绕空间Y轴旋转的角度。
柱形全景也不算复杂。关于圆柱形的打造方法，大家可以参考下这篇文章
有了这个基础，我们可以写一段函数快速构造柱形全景。
先来看下页面结构
height: 100%;
width: 100%;
height: 1170
transform: translateX(-50%) translateY(-50%);
left: 50%;
transform-style: preserve-3d;
height: 100%;
width: 100%;
.cube_bg {
transform-style: preserve-3d;
height: 100%;
width: 128
.cube_bg div {
height: 100%;
/* 这里为圆柱形的每个面都设定了同样的背景图 那么在建造柱形时不再需要手动切图 */
background-image: url(&img/zao/zao.png&);
background-repeat: no-
&div class=&scene&&
&div class=&cube&&
&div class=&cube_bg&&
这里是柱形全景背景贴图
&div class=&cube_item&&
这里是柱形全景中的小元件
function creCylinder(lenZ,pieceWid,angle,slice){
pieceWid 表示单个柱形块状宽度
angle表示柱形内角
slice表示有多少个面拼接
slice越多，拼合的面越接近曲面
var l = pieceWid* // 画布全长
var ag = angle/slice // 旋转角度
var html = '';
设置每个面的旋转角度和位移 因为要分割成多个面，所以应该为每个面的背景图设置不同的`background-position`
for(var i=0,len=i&i++){
html+='&div style=&transform: rotateY(-'+ag*i+'deg) '+
'translateZ('+lenZ+'px);'+
'width:'+(pieceWid)+''+
'background-position: -'+(i*pieceWid)+'px 0;'+
'background-size: '+(l)+'px 100%;&&&/div&';
function renderPano(pieceWid,angle,slice){
var vw = $(window).width();
var RADIAN = 0.; // 弧度制 将角度转成弧度
var innerAngle = angle/(2*slice); //内角，用来计算translateZ
// 这里的原理和上文旋转木马链接一致
var lenZ = -(pieceWid/2)*Math.tan((90-innerAngle)*RADIAN);
因为默认是由画布的最左端开始旋转 所以处于我们面前的是画布的最左端和最右端及其连接处
要想画布中央显示再我们面前，这里需要给cube_bg加上一定的绕Y旋转角度
var rotate = ((angle/slice)*(slice-1))/2,
perspective = -lenZ-5;
var cube_bg = $('.cube_bg'),
scene = $('.scene');
var cylinder = creCylinder(lenZ,pieceWid,angle,slice);
cube_bg.html(cylinder).css('transform','rotateY('+rotate+'deg)');
scence.css('-webkit-perspective',perspective+'px');
//最后调用一下
renderPano(128,360,20);
这里解释一下perspective为什么要设成
看一张图，上面的 lenZ 即 translateZ 值，为负值。
perspective为镜头到屏幕的距离，因为此时镜头在柱体内部，因此不能看到柱体后面的图像。
当perspective值为-lenZ值时，正好柱体back面能与镜头在同一平面上，为了避免它有一定的机率遮挡镜头，我们可以将镜头拉近一些。便设成了 -lenZ-5 。这个时候就能保证镜头处于柱体内部，同时也能更广角度地观察到柱体全景。
大家可以复制代码体验一下。这里的背景图我选用的是自己拼合成的造物节背景图。
优劣势对比
相信大家也有体会，天空盒制造起来会相对的简单，并且天空和地面都能被考虑进去。但是由于面面间的贴合角度太大，若物体正好处于相互贴合的两个面，会给人一种被拦腰折断的感觉。而柱形图对这种情况有了比较好的解决，但是天空和地面的贴图就比较困难了，一般情况下只能通过给scene添加背景图片模拟。
未完待续…
已发表评论数()
请填写推刊名
描述不能大于100个字符!
权限设置： 公开
仅自己可见
正文不准确
标题不准确
排版有问题
主题不准确
没有分页内容
图片无法显示
视频无法显示
与原文不一致免费H5 页面GIF制作工具合集-1
美国也有 H5 页面制作工具,但多为离线软件形式、成 品是打包的文件夹,功能应用...多媒体文件支持方面,iH5 是唯一同时支持图片(JPG、GIF、ZIP、PSD 等) 、音视...
MAKA 目前只有网页端。 初页 初页比较适合用来做 H5 动态海报,它的提供的免费...GifCam 是一款集录制和剪辑于一体的 GIF 动画制作工具,录制后的动画可以逐帧 ...
如何制作出有逼格的H5页面_互联网_IT/计算机_专业...技巧方法,文字、图片、排版、字体等方面的技巧合集 ...站酷 GIF 图:; 图片素材:全景...
(其中字体大小可 从 h1-h5,h1 最大,h5 最小) ...0.gif 1.gif 2.gif 3.gif 4.gif 8。窗口定时...爱好:网页制作,软件开发&&个人简历&/a& 例如:个人...
(其中字体大小可 从 h1-h5,h1 最大,h5 最小) ...0.gif 1.gif 2.gif 3.gif 4.gif 8。窗口定时...爱好:网页制作,软件开发&&个人简历&/a& 例如:个人...
制作的精品案例合集(移动广告为主),网站包含 H5 页面制作工具、 案例教学、在线...【资源下载篇】 365psd / 各种免费、付费 PSD、矢量图...
(其中字体大小可从 h1-h5,h1 最大,h5 最小) ...(logo.gif); background-repeat:no-...爱好:网页制作,软件开发&&个人简历&/a& 例如:个人...
GIF 出品方:Verawom 入选理由:如果你刚看过魔兽电影...网页游戏,碰撞 出品方:仕馨 入选理由:很多公司试图...级毕业生三体动态海报集合 ▲使用 iH5 制作 http:...
如何制作好看的H5页面_互联网_IT/计算机_专业资料。...站酷 GIF 图:; 图片素材:全景...其他问题: 1、应用三级动画 H5 制作软件动画分为 ...
很多H5页面制作工具基于云端,不需要软件支持,而且只要有网络就能修改,效率和效果...1.GIF 控制 (/idea/nh21yk7#p2) GIF 是...更多公众号：tuyiyi_com关注UI设计的新趋势，分享优质UI设计作品，规范等相关！最新文章相关作者文章搜狗：感谢您阅读全景H5大合集：这个功能快被你们玩坏了… 本文版权归原作者所有，本文由网友投递产生，如有侵权请联系 ，会第一时间为您处理删除。