全景图的各种制作方法~~

krpano

简介：一个制作全景图的软件

教程： http://www.krpano360.com/

案例： http://demo.krpano100.com/

优点：制作简单、效果炫酷、制作成本低、支持vr、vr视频

缺点：需要学习krpano规定的xml语言、几乎没有办法用javascript去扩展全景图功能，扩展功能只能用它规定的xml语言、扩展难度大

制作方法：

1、下载krpano http://krpano.com/download/

2、准备好一张全景图，然后打开下好的krpano，里面有一个MAKE VTOUR(NORMAL)droplet.bat的东东，把全景图拉近这个图标去即可~ 如下图所示：

3、在服务器环境运行html文件

pano2vr

简介：也是一个制作全景图的软件

教程：http://pan.baidu.com/s/1o6u2q7K?qq-pf-to=pcqq.c2c#list/path=%2F 密码：o96p

案例：http://www.lcfbk.top/H5/%E6%8D%95%E9%B1%BC%E6%9D%A5%E4%BA%86/

优点：制作简单、制作成本低、可以用javascript去扩展全景图

缺点：不支持vr、vr视频。需要学习pano2vr的xml语言，也可以不学，因为可以用js去操作全景图。但是这样做会比较麻烦

制作方法：http://blog.csdn.net/qq408896436/article/details/60767037

three.js

简介：一个3D的javascript引擎库

教程：无

案例：https://408896436.github.io/demo/three%20pano/

优点：移动端运行效都不错，IOS流程运行、安卓略卡扩展完全靠自己发挥

缺点：制作成本高、学习难度略大

css+js

简介：纯css+javascript实现全景图

教程：往下看~~

优点：移动端运行效都不错，IOS流程运行、安卓略卡、扩展完全靠自己发挥

缺点：制作成本略高、学习难度中等

案例：http://www.lcfbk.top/math/fx/rect_pano.html 、http://www.lcfbk.top/math/fx/cylinder_pano.html

制作全景图之前，先来看下几个css3属性

旋转属性

rotateX ：元素围绕其 X 轴以给定的度数进行旋转

http://www.lcfbk.top/math/fx/rotateX.html

rotateY ：元素围绕其 Y 轴以给定的度数进行旋转
http://www.lcfbk.top/math/fx/rotateY.html

rotateZ ：元素围绕其 Z 轴以给定的度数进行旋转

http://www.lcfbk.top/math/fx/rotateZ.html

位移属性

translateX : x轴位移

http://www.lcfbk.top/math/fx/translateX.html

translateY : y轴位移

http://www.lcfbk.top/math/fx/translateY.html

translateZ : z轴位移 (需要配合perspective使用)

http://www.lcfbk.top/math/fx/translateZ.html

视觉属性
perspective ：观察物体的距离。值越小，物体越大。值越大，物体越小。（近大远小）
http://www.lcfbk.top/math/fx/perspective.html (右键审查元素，调整perspective观看)
当为元素定义 perspective 属性时，其子元素会获得透视效果，而不是元素本身。
注意！：perspective 属性只影响 3D 转换元素。

transform-style ：当它的值为preserve-3d时，物体才会显示出3d效果。需要配合perspective 一起使用。
http://www.lcfbk.top/math/fx/preserve-3d.html

案例（矩形全景图）

http://www.lcfbk.top/math/fx/rect_pano.html

一个矩形有6个面，如果给这6个面都贴上背景图，然后组合起来。再把视角推进矩形里面，则可以形成一个简单的全景图。原理如下图：

1、首先需要有一个舞台和容器

<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><title>全景图demo</title><style>html,body{margin: 0; overflow: hidden; height: 100%;}/*舞台*/.stage{perspective:800px; width: 1024px; height: 1024px; position: absolute; top: 50%; left: 50%; margin: -512px 0 0 -512px;}  /*容器*/.ctx{transform-style:preserve-3d;}</style>
</head>
<body><div class='stage'><div class='ctx'></div>  </div>
</body>
</html>

stage主要设定位置居中以及视距
ctx设定子元素呈现3d效果

2、创建6个面

<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><title>全景图demo</title><style>html,body{margin: 0; overflow: hidden; height: 100%;}.stage{perspective:800px; width: 1024px; height: 1024px; position: absolute; top: 50%; left: 50%; margin: -512px 0 0 -512px;}    .ctx{transform-style:preserve-3d;}.face{width: 1024px; height: 1024px; position: absolute;}.top{background: url('ossweb-img/top.jpg') no-repeat 0 0; transform:rotateX(90deg) translateZ(512px);}.bottom{background: url('ossweb-img/bottom.jpg') no-repeat 0 0; transform:rotateX(90deg) translateZ(-512px);}.after{background: url('ossweb-img/after.jpg') no-repeat 0 0; transform:rotateX(0deg) translateZ(-512px);}.left{background: url('ossweb-img/left.jpg') no-repeat 0 0; transform:rotateY(90deg) translateZ(-512px);}.right{background: url('ossweb-img/right.jpg') no-repeat 0 0; transform:rotateY(90deg) translateZ(512px);}.first{background: url('ossweb-img/first.jpg') no-repeat 0 0; transform:rotateY(0deg) translateZ(512px);}</style>
</head>
<body><div class='stage'><div class='ctx'><div class='facelist'><div class='face top'></div><div class='face bottom'></div><div class='face after'></div><div class='face left'></div><div class='face right'></div><div class='face first'></div></div></div>   </div>
</body>
</html>

3、设置视角进入到矩形里面
在.ctx样式里追加 transform:translateZ(400px) rotateY(0deg);

案例（圆柱全景图）

http://www.lcfbk.top/math/fx/cylinder_pano.html

1、创建舞台

<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><title>圆柱全景图</title><style>html,body{margin: 0; overflow: hidden;}.stage{perspective:800px; width: 129px; height: 1170px; position: absolute; top: 50%; left: 50%; margin: -585px 0 0 -64px; background: red; }    </style>
</head>
<body><div id='stage' class='stage'></div>
</body>
</html>

2、创建圆柱面

<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><title>圆柱全景图</title><style>html,body{margin: 0; overflow: hidden;}.stage{perspective:800px; width: 129px; height: 1170px; position: absolute; top: 50%; left: 50%; margin: -585px 0 0 -64px; background: red; }    .bglist{ transform-style:preserve-3d; transform:translateZ(460px) rotateY(0deg);}</style>
</head>
<body><div id='stage' class='stage'><div id='bglist' class='bglist'></div></div><script>var bglist = document.getElementById('bglist');for(var i=0; i<20; i++){var bg = document.createElement('div');bg.style.position = 'absolute';bg.style.backfaceVisibility = 'hidden';bg.style.width = '129px';bg.style.height = '1170px';bg.style.webkitTransform = 'rotateY('+(180-(i*18))+'deg)';bg.style.background = 'url(ossweb-img/'+i+'.png)';bglist.appendChild(bg);}</script>
</body>
</html>

运行后效果如下：

3、设置translateZ
现在如果从上面俯视全景图，大概会是这个样子的

虽然每个背景图都旋转好了角度，但是都全挤在了一起，现在我们需要拉开它们的距离，拉开距离后效果如下图：

那应该拉开多少距离？

这里的距离就是算一个直角三角形的直角边而已。如下图所示：

129 ：背景图的宽
18 ：每张图需要旋转的角度。（360/20=18）20是20张背景图的意思

然后把三角形对分成一半则得出直角边r
直角三角形角度为9°，底边长为64.5，现在算出r即可。

把bg.style.webkitTransform = 'rotateY('+(180-(i*18))+'deg) ' 改成 bg.style.webkitTransform = 'rotateY('+(180-(i*18))+'deg) translateZ(-407px)';
效果图：

运行后发现，图和图之间会有裂缝，我们把407改成406即可。
bg.style.webkitTransform = 'rotateY('+(180-(i*18))+'deg) translateZ(-406px)';

4、添加漂浮物
添加漂浮物的代码略微复杂，请参考源代码。

参考文章：http://www.zhangxinxu.com/wordpress/2012/09/css3-3d-transform-perspective-animate-transition/

全景图的各种制作方法~~相关推荐

无人机360°VR全景图制作方法
无人机360°VR全景图制作方法 ## (2019-12-12) 我自己生成的案例--华师博雅广场 360°VR全景 https://www.720yuntu.com/tour/5cef56dd892 ...
大型网游全景图制作方法
大型网游的全景图会比现实类的全景更加出色,因为网游画质和现实照片相比,网游的画面更加细腻和具有美观,以及非常梦幻漂亮.在这里,通过这个教程的学习,你可以从零基础的小白,学会制作大型网游全景图,以后不管 ...
vr拍摄用的什么设备？vr全景制作方法
对于vr拍摄的作品,我想如今很多朋友都有所接触,2020年微信朋友圈最喜欢年度广告排行榜中前五名有三名都是vr全景的形式,很多用户都被vr全景这种沉浸式更强的展现方式所吸引,有趣的玩法更是使得用户能够 ...
vr全景制作方法，vr全景拍摄制作教程及总结
随着vr全景应用范围的扩大和普及,使得很多朋友关注到了这一技术.相较于图文视频等展现方式而言,vr全景像是展现形式的一个重大升级,不仅能够提供身临其境般的视角体验,更是能够融合各种功能和技术.这也给v ...
echarts的词云图表类型有哪些_词云图的几种制作方法评测，你pick哪款
前言大家好,不知道大家会在什么场合使用词云图,对我来说词云图的优点除了它可以展示大量文本数据.从而让读者快速抓住重点,更重要的是词云图好看啊所以今天给大家分享几种词云图的制作方法.首先我们来思考一下 ...
grub2引导linux内核,一种基于grub2的linux系统启动bootloader的制作方法与流程
技术领域本发明涉及服务器应用技术领域,具体涉及一种基于grub2的linux系统启动bootloader的制作方法. 背景技术: 当前linux系统的内核版本已经升级至4.0以上,最新的linux系 ...
typecho本地上传头像_微信QQ抖音透明头像制作方法，还有不会的吗？
精彩内容每天更新她搂着被子从床上坐起来,愣了十几秒,听到厨房有动静后,这才撒着脚往房间外跑,看到一抹修长背影在厨房里忙活. 邵允琛做好早餐从厨房出来,见陆瑶穿着睡裙站那,眉头皱了皱," ...
14岁初中生3天制成勒索病毒制作方法或自学而成
日媒称,6月5日采访神奈川县警方获悉,因制作被称为"勒索软件"的病毒,涉嫌制作非法指令电磁记录等被该县警方逮捕的大阪府高槻市初三男生(14岁)供述称,"病毒是用自己的电脑 ...
网线的制作方法和千兆网线的施工注意事项
由于近年来1000m网络的应用普及.对于网管来说,1000m网线的制作和施工走上日常工作.我是从2003年接触1000m网络的,当时对于1000m网线制作的资料网上很少,下面是我当时整理出来的资料.希 ...

全景图的各种制作方法~~

全景图的各种制作方法~~相关推荐

最新文章

热门文章