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

最新推荐文章于 2024-06-18 16:30:14 发布

碵蝎

最新推荐文章于 2024-06-18 16:30:14 发布

阅读量1.7w

点赞数 7

分类专栏：全景图

本文链接：https://blog.youkuaiyun.com/QQ408896436/article/details/76690291

版权

全景图专栏收录该内容

2 篇文章

订阅专栏

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.youkuaiyun.com/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>

运行后效果如下：