首页 VR全景教程 全景程序源代码展示html

全景程序源代码展示html

krpano 简介 : 一个制作全景图的软件教程 : http://www.krpano360.com/案例 : htt…

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
————————————————
版权声明:本文为CSDN博主「灬点点」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/qq_32447301/java/article/details/79938168

免责声明:文章内容不代表本站立场,本站不对其内容的真实性、完整性、准确性给予任何担保、暗示和承诺,仅供读者参考,文章版权归原作者所有。如本文内容影响到您的合法权益(内容、图片等),请及时联系本站,我们会及时删除处理。

作者: TOB市场人

为您推荐

mxreality.js 免费开源的全景图/全景视频/VR 直播播放器介绍

mxreality.js 免费开源的全景图/全景视频/VR 直播播放器介绍

[2018-10-20 重要更新]支持VR直播功能支持全景视频poster支持全景图和视频和场景之间随意切换全景模式切换...
技术分享:全景视频技术的实现

技术分享:全景视频技术的实现

全景视频技术的实现      全景视频在VR领域是一个非常热...
浏览器中实现3D全景浏览

浏览器中实现3D全景浏览

如果你用过网页版的百度地图,你大概3D全景图浏览是一种怎样的酷炫体验:在一个点可以360度环顾周围的建筑、景色,当然也可...
全景图的种类、360度三维实拍全景

全景图的种类、360度三维实拍全景

  根据全景外在表现形式可以分为柱形全景和球形全景两大类。柱形全景是最简单的全景,就是通常所说的”环视...
全景拍摄教程:为什么要使用全景云台?

全景拍摄教程:为什么要使用全景云台?

  在我们日常拍摄全景图片的时候,一定都会用到一个设备:全景云台。那么有小伙伴就问了:为什么要使用全景云台?全景云台在全...

发表回复

您的电子邮箱地址不会被公开。

返回顶部