##360全景制作笔记
首先下载工具
链接：https://pan.baidu.com/s/1migl0TU 密码：uh3m
1、解压在本页下载的软件压缩包，得到7z压缩包与产品密钥，运行exe文件解压krpano后即可运行该软件。
2、运行软件后会提示你进行注册，点击现在注册进入注册页面，并将之前解压得到的产品密钥复制到空白窗口中后点击register this code即可注册该软件。
3、之后注册页面出现的注册信息也说明了注册成功。
###1、使用
一般用VR-OPT
使用时直接把全景图拖动到MAKE VTOUR(VR-OPT) droplet处即可，拖动多少全景图就生成多少个场景
…没有全景图可以去千图网啥的去下载一张
在全景图的文件夹处就会生成vtour文件夹
双击运行即可观看360全景页面
代码主要就在vtour文件夹里，因为很多都是英文所以要修改成中文
###1、修改底部导航栏左上角title
进入tour.xml找到第一行krpano标签的title属性，修改成自己想要的文字就好
<krpano version="1.19" title="星辰空间">
再ctrl+f找到scene标签，把对应场景的title进行修改即可，注意一个场景对应一个scene
<scene name="scene_pano" title="接待大厅" onstart="" havevrimage="true" thumburl="panos/pano.tiles/thumb.jpg" lat="" lng="" heading="">
###2、更改底部默认导航皮肤
进入tour.xml用ctrl+f找到
<!-- <include url="skin/vtourskin_design_flat_light.xml" /> -->
<!-- <include url="skin/vtourskin_design_glass.xml" /> -->
<!-- <include url="skin/vtourskin_design_ultra_light.xml" /> -->
<!-- <include url="skin/vtourskin_design_117.xml" /> -->
<!-- <include url="skin/vtourskin_design_117round.xml" /> -->
<!-- <include url="skin/vtourskin_design_black.xml" /> -->
每一个include 对应一个官方提供的导航默认皮肤，你可以逐一减去注释看一下喜欢那种皮肤
###3、汉化右键菜单及版权
如果是默认皮肤则进入skin文件夹下的vtourskin.xml用ctrl+f搜索contextmenu，找到
<contextmenu>
<item name="kr" caption="KRPANO" />
<item name="fs" caption="FULLSCREEN" />
<item name="cc" caption="Change Controlmode" onclick="skin_changecontrolmode();" separator="true" />
<item name="nv" caption="Normal View" onclick="skin_view_normal();" showif="view.vlookatrange == 180" separator="true" />
<item name="fv" caption="Fisheye View" onclick="skin_view_fisheye();" showif="view.vlookatrange == 180" devices="flash|webgl" />
<item name="sv" caption="Stereographic View" onclick="skin_view_stereographic();" showif="view.vlookatrange == 180" devices="flash|webgl" />
<item name="av" caption="Architectural View" onclick="skin_view_architectural();" showif="view.vlookatrange == 180" />
<item name="pv" caption="Pannini View" onclick="skin_view_pannini();" showif="view.vlookatrange == 180" devices="flash|webgl" />
<item name="lp" caption="Little Planet View" onclick="skin_view_littleplanet();" showif="view.vlookatrange == 180" devices="flash|webgl" />
</contextmenu>
把他们的caption修改成中文即可，如下
<!-- 修改右键菜单 -->
<contextmenu fullscreen="false" versioninfo="false"> //去掉右键全屏项等
<item name="cc" caption="更改控制模式" onclick="skin_changecontrolmode();" separator="true" />
<item name="nv" caption="正常视角" onclick="skin_view_normal();" showif="view.vlookatrange == 180" separator="true" />
<item name="fv" caption="鱼眼视角" onclick="skin_view_fisheye();" showif="view.vlookatrange == 180" devices="flash|webgl" />
<item name="sv" caption="立体视角" onclick="skin_view_stereographic();" showif="view.vlookatrange == 180" devices="flash|webgl" />
<item name="av" caption="建筑视角" onclick="skin_view_architectural();" showif="view.vlookatrange == 180" />
<item name="pv" caption="帕尼尼视角" onclick="skin_view_pannini();" showif="view.vlookatrange == 180" devices="flash|webgl" />
<item name="lp" caption="小行星视角" onclick="skin_view_littleplanet();" showif="view.vlookatrange == 180" devices="flash|webgl" />
<item name="logo" caption="星辰空间" separator="true" onclick="openurl('http://xingchen3.com/')" devices="flash|webgl"/>
//最后一个name="logo"可加可不加，添加后可跳转到某个页面
</contextmenu>
###4、360全景自动旋转
直接在tour.xml文件中的空白处添加下面的代码，不要放在scene标签内即可
<!-- 自动旋转 -->
<autorotate enabled="true"
waittime="2.0" //时间
speed="5.0" //移动速度
horizon="0.0"
/>
<events name="onautorotateevents" keep="true" onautorotateoneround="nextscene()"/>
<action name="nextscene">
autorotate.stop();wait(0);
set(ns, get(scene[get(xml.scene)].index));
set(maxs, get(scene.count));
add(ns,1);
if(ns == maxs, set(ns,0));
loadscene(get(scene[get(ns)].name), null, MERGE, BLEND(1.5));
autorotate.start();
</action>
###5、汉化vr模式
点击下载VR模式汉化
下载后进入plugins文件夹找到webvr.xml进行修改
###6、插入音乐
在tour.xml文件中的空白处添加下面的代码，不要放在scene标签内即可
<!-- 插入音乐 -->
<plugin name="soundinterface"
url.flash="%SWFPATH%/plugins/soundinterface.swf"
url.html5="%SWFPATH%/plugins/soundinterface.js"
rootpath=""
preload="true"
keep="true"
/>
找到name="startup"的action标签，在里面添加
//参数1为id 参数2为音乐的路径 参数3为0则无限循环播放，1则只播放一次
playsound(bgsnd, 'common/backgroundmusic.mp3', 0);
有音乐了，但是要控制音乐播放和暂停啊，添加音乐按钮
打开skin文件夹下的vtourskin.xml，用ctrl+f找到
<layer name="skin_btn_vr" style="skin_base|skin_glow" crop="0|0|80|64" align="center" x="+146" y="0" scale="0.5" onclick="webvr.enterVR();" visible="false" />
<layer name="skin_btn_fs" style="skin_base|skin_glow" crop="0|576|64|64" align="right" x="90" y="0" scale="0.5" onclick="switch(fullscreen);" devices="fullscreensupport" />
在skin_btn_vr和skin_btn_fs中间插入一段skin_btn_sound的layer代码，变成
<layer name="skin_btn_vr" style="skin_base|skin_glow" crop="0|0|80|64" align="center" x="+146" y="0" scale="0.5" onclick="webvr.enterVR();" visible="false" />
<layer name="skin_btn_sound" style="skin_base|skin_glow" crop="64|704|64|64" align="right" ox="0" x="130" y="0" scale="0.5" onclick="pausesoundtoggle(bgsnd);switch(crop,64|704|40|64,64|704|64|64);switch(alpha,1,0.25);switch(ox,0,-12)" />
<layer name="skin_btn_fs" style="skin_base|skin_glow" crop="0|576|64|64" align="right" x="90" y="0" scale="0.5" onclick="switch(fullscreen);" devices="fullscreensupport" />
###7、修复pr13场景初始化enterVR显示bug
vtourskin.xml关于webvr插件的部分将
<plugin name="WebVR" ...
...
onavailable="set(layer[webvr_enterbutton].width, 0); ..."
...
/>
改为
<plugin name="WebVR" ...
...
onavailable="removelayer(webvr_enterbutton); ..."
...
/>
###8、添加热点并修改动态热点
用krpano Tools.exe添加热点
krpano Tools各个按钮的图解
点击add hotspot会出现一个热点，拖动可移动热点方向，点击热点会弹出下图
保存好热点后点击save tour.xml按钮保存文件
###9、skin_settings元素解析
<skin_settings maps="false"
maps_type="google"
maps_bing_api_key=""
maps_google_api_key=""
maps_zoombuttons="false"
gyro="true"
webvr="true"
webvr_gyro_keeplookingdirection="false"
webvr_prev_next_hotspots="true"
littleplanetintro="false"
title="true"
thumbs="true"
thumbs_width="120" thumbs_height="80" thumbs_padding="10" thumbs_crop="0|40|240|160"
thumbs_opened="false"
thumbs_text="false"
thumbs_dragging="true"
thumbs_onhoverscrolling="false"
thumbs_scrollbuttons="false"
thumbs_scrollindicator="false"
thumbs_loop="false"
tooltips_buttons="false"
tooltips_thumbs="false"
tooltips_hotspots="false"
tooltips_mapspots="false"
deeplinking="false"
loadscene_flags="MERGE"
loadscene_blend="OPENBLEND(0.5, 0.0, 0.75, 0.05, linear)"
loadscene_blend_prev="SLIDEBLEND(0.5, 180, 0.75, linear)"
loadscene_blend_next="SLIDEBLEND(0.5, 0, 0.75, linear)"
loadingtext="loading..."
layout_width="100%"
layout_maxwidth="814"
controlbar_width="-24"
controlbar_height="40"
controlbar_offset="20"
controlbar_offset_closed="-40"
controlbar_overlap.no-fractionalscaling="10"
controlbar_overlap.fractionalscaling="0"
design_skin_images="vtourskin.png"
design_bgcolor="0x2D3E50"
design_bgalpha="0.8"
design_bgborder="0"
design_bgroundedge="1"
design_bgshadow="0 4 10 0x000000 0.3"
design_thumbborder_bgborder="3 0xFFFFFF 1.0"
design_thumbborder_padding="2"
design_thumbborder_bgroundedge="0"
design_text_css="color:#FFFFFF; font-family:Arial;"
design_text_shadow="1"
/>
对应的意思
maps="false" <!-- 是否使用必应地图或谷歌地图 ->
maps_type="bing" <!-- 选择使用谷歌地图或必应地图 ->
maps_bing_api_key="" <!-- 必应地图所需的API密钥，需申请 ->
maps_google_api_key="" <!-- 谷歌地图所需的API密钥，需申请 ->
maps_zoombuttons="false" <!-- 是否在地图上显示缩放按钮 ->
gyro="true" <!-- 是否使用陀螺仪 ->
webvr="true" <!-- 是否启用VR ->
webvr_gyro_keeplookingdirection="false" <!-- 进入陀螺仪或VR时是否保持观看方向 ->
webvr_prev_next_hotspots="true" <!-- 在VR下是否启用导航到前后场景的链接热点->
littleplanetintro="false" <!-- 是否使用小行星开场 ->
title="true" <!-- 是否左下角显示title ->
thumbs="true" <!-- 是否使用缩略图，如不使用，则没有缩略图一栏 ->
thumbs_width="120" thumbs_height="80" thumbs_padding="10" thumbs_crop="0|40|240|160" <!-- 缩略图宽度、高度、间距以及缩略图裁切范围 ->
thumbs_opened="false" <!-- 是否在启动时弹出缩略图一栏 ->
thumbs_text="false" <!-- 是否在缩略图上显示名字 ->
thumbs_dragging="true" <!-- 是否允许鼠标拖拽缩略图区域 ->
thumbs_onhoverscrolling="false" <!-- 是否允许鼠标悬停缩略图自动滚动 ->
thumbs_scrollbuttons="false" <!-- 是否显示缩略图滚动按钮 ->
thumbs_scrollindicator="false" <!-- 是否显示缩略图滚动条 ->
thumbs_loop="false" <!-- 滚动按钮是否使用缩略图循环 ->
tooltips_buttons="false" <!-- 鼠标在按钮悬停时是否弹出文字提示 ->
tooltips_thumbs="false" <!-- 鼠标在缩略图悬停时是否弹出文字提示 ->
tooltips_hotspots="false" <!-- 鼠标在热点上悬停时是否弹出文字提示 ->
tooltips_mapspots="false" <!-- 鼠标在地图热点悬停时是否弹出文字提示 ->
deeplinking="false" <!-- 是否使用深度链接获取功能，可使得当前页面路径获取场景及视角信息 ->
loadscene_flags="MERGE" <!-- 缩略图切换场景时的变量 ->
loadscene_blend="OPENBLEND(0.5, 0.0, 0.75, 0.05, linear)" <!-- 缩略图切换场景时的融合 ->
loadscene_blend_prev="SLIDEBLEND(0.5, 180, 0.75, linear)" <!-- 缩略图切换到上一个场景时的融合 ->
loadscene_blend_next="SLIDEBLEND(0.5, 0, 0.75, linear)" <!-- 缩略图切换到下一个场景时的融合 ->
loadingtext="载入中..." <!-- 在全景图载入中时显示的文字 ->
layout_width="100%" <!--导航条容器相对屏幕宽度的百分比 ->
layout_maxwidth="814" <!--导航条容器的最大宽度像素 ->
controlbar_width="-24" <!--导航条背景的宽度像素 ->
controlbar_height="40" <!--导航条背景的高度像素 ->
controlbar_offset.normal="20" <!--导航条背景与屏幕底部的距离->
controlbar_offset_closed="-40" <!--导航条隐藏状态时与屏幕底部的距离->
controlbar_overlap.no-fractionalscaling="10" <!--在不支持分级缩放页面和设置像素比的设备的导航条重叠的像素->
controlbar_overlap.fractionalscaling="0" <!--支持分级缩放页面和设置像素比的设备的导航条重叠的像素->
design_skin_images="vtourskin.png" <!--皮肤所用的源图片->
design_bgcolor="0x000000" <!--皮肤的背景颜色->
design_bgalpha="0.5" <!--皮肤的透明度->
design_bgborder="0 0xFFFFFF 1.0" <!--皮肤的边框->
design_bgroundedge="1" <!--皮肤边框圆角设置->
design_bgshadow="0 0 9 0xFFFFFF 0.5" <!--皮肤的背景阴影->
design_thumbborder_bgborder="4 0xFFFFFF 1.0" <!--皮肤的缩略图边框->
design_thumbborder_padding="2" <!--皮肤缩略图边框间距->
design_thumbborder_bgroundedge="5" <!--皮肤缩略图边框的圆角->
design_text_css="color:#FFFFFF; font-family:Arial; font-weight:bold;"<!--皮肤文字样式->
design_text_shadow="1" <!--皮肤的文字阴影->
265
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
