krpano初级教程(共37讲)

学习初级教程需要在入门教程完成的基础上进行,该教程即移花接木教程,主要是官网案例进行详细的讲解,并配以详细的自定义代码说明。

krpano官方案例移花接木

移花接木(31) – 支持HTML5的krpano环物全景

导言

截止于krpano 1.18.4,krpano的官方环物droplet工具仅支持flash下的多层分辨率环物漫游(MAKE OBJECT droplet.bat),但由于HTML5的需求在手机端的存在,用户需要有支持HTML5的环物全景展示,因此为大家分享一个简单的HTML5环物。当然,这个HTML5的案例比较简单,仅支持简单的单分辨率画面缩放和水平360度环物。大家可以先在下面的地址下载范例,结合本文的中文注释进行学习。

 

(更多…)

移花接木(30)- krpano中嵌入html页面

krpano 1.20.11以后版本支持直接将layer里放iframe,因此本教程仅针对1.20.10及之前的版本的做法

krpano 1.19之后的新技能,就是可将html页面(iframe)作为热点放到3D空间中。

你可以如封面那样放入一个youku的embed视频,或者像下图那样直接放入一个html页面。因为这个就是一个可以变形的iframe。

krpano 1.20.11之后,代码变得非常简单,

以下隐藏内容仅供VIP会员查看,加入VIP会员请查看首页头图文章或添加站长微信

这里注意两点,第一type属性要写iframe,第二iframeurl写上要嵌入的网页路径。

(更多…)

移花接木(26)- 场景过渡效果

更新于 2024.4.19 krpano 1.21.2

官方下载包路径

你电脑的路径\krpano-1.21.2\viewer\examples\blending-demo

提示:如果不明白下载包路径是什么,请查看 循序渐进(3)- krpano下载包的使用说明

 

在线演示

以下隐藏内容仅供VIP会员查看,加入VIP会员请查看首页头图文章或添加站长微信

(更多…)

移花接木(25)- 动态切换皮肤

更新于 2017.9.21 krpano 1.19-pr13

官方下载包路径

你电脑的路径\krpano-1.19-pr13\viewer\examples\demotour-corfu-skinselect

提示:如果不明白下载包路径是什么,请查看 循序渐进(3)- krpano下载包的使用说明

krpano 1.19有个切换皮肤的案例,这对于自行选择皮肤的是个不错的案例。下面是演示。

那到底是怎么实现的呢?首先我们还是正常使用MAKE VTOUR droplet生成默认的项目。 (更多…)

移花接木(23)- 自动旋转与自动浏览全部场景

更新于 2024.4.19 krpano 1.21.2

导言

自动旋转与自动浏览全部场景,这是做全景时经常要用到的功能,涉及到一个重要的元素,即autorotateautorotate是一个全局性的元素,通常写在scene标签的外面即可。我们可以通过action来更改autorotate设置。例如,在scene的onstart里进行设置。

(更多…)

移花接木(21)- 场景比较

更新于 2024.4.19 krpano 1.21.2

本案例实现了使用鼠标或触摸拖动滑条来任意融合两个相似场景。同一场景不同季节的景色,如昼夜、开灯关灯等都可以使用该效果。建议使用1.21版本。

 

1.21方法

以下隐藏内容仅供VIP会员查看,加入VIP会员请查看首页头图文章或添加站长微信

1.20下载包位置

你电脑的路径\krpano-1.20.9\viewer\examples\slider-blend-cubes

1.20演示

 

1.20步骤

以下隐藏内容仅供VIP会员查看,加入VIP会员请查看首页头图文章或添加站长微信

场景的无缝过渡

以下隐藏内容仅供VIP会员查看,加入VIP会员请查看首页头图文章或添加站长微信

无缝过渡三个场景

以下隐藏内容仅供VIP会员查看,加入VIP会员请查看首页头图文章或添加站长微信

移花接木(19)- 网址链接指定场景和视角并分享到社交媒体

更新于 2024.4.19 krpano 1.21.2

假设现在有那么一种情况,你拍了几套样板间,然后这十几个点(场景)都放在一个xml里,然后,这时候客户希望在能打开地址展示第一个场景的同时,还可以按照其需求通过打开网址直接看到其他场景,例如,打开网址直接就是卫生间的马桶(恶趣味的客户)。

我们分开两种情况,一种是krpano 1.19pr3之前的版本,一种是包括pr3及之后的版本。

我们打开tour.html,确保其中传递参数的属性为true。

embedpano({swf:”tour.swf”, xml:”tour.xml”, target:”pano”, passQueryParameters:true });

 

以下方法适用于krpano 1.19 pr3及之后版本

以下隐藏内容仅供VIP会员查看,加入VIP会员请查看首页头图文章或添加站长微信

我们不可能因为这种需求去调整文件中scene的位置,因为这样就需要很多个xml文件,同时又要生成很多个地址,占据服务器空间。我们只需要在皮肤中做一个小小的设置。
首先,我们需要使用krpano 1.19 pr3及之后的版本,使用MAKE VTOUR 生成默认皮肤,然后在tour.xml的skin_settings中找到 (更多…)

移花接木(15)- 全景漫游三种载入进度效果

更新于 2024.4.19 1.21.2

官方下载包路径

你电脑的路径\krpano-1.21.2\viewer\examples\loading-progress\

提示:如果不了解何谓下载包路径,请查看 循序渐进(3)- krpano下载包的使用说明

 

在线案例

以下隐藏内容仅供VIP会员查看,加入VIP会员请查看首页头图文章或添加站长微信

关于载入进度

以下隐藏内容仅供VIP会员查看,加入VIP会员请查看首页头图文章或添加站长微信

(更多…)

移花接木(11)- 制作项目启动画面

更新于 2024.4.19 krpano 1.21.2

启动画面演示

(更多…)

移花接木(8)- 可拖拽的图层与热点

更新于 2024.4.19 krpano 1.21.2

官方下载包路径

你电脑的路径\krpano-1.21.2\viewer\examples\animated-hotspots\dragable-hotspots

你电脑的路径\krpano-1.21.2\viewer\examples\animated-hotspots\dragable-layers

提示:如果不明白下载包路径是什么,请查看 循序渐进(3)- krpano下载包的使用说明

在线演示

(更多…)