[Krpano-3] 사용방법 - 스킨 세팅 / 설정 정리

#Krpano #Virtual_Tour #VR #Viewer

 

 

안녕하세요. Gi_1의 개발일기 입니다.

너무 간단하게 VR이 생성되었는데.. 디자인적인 요소를 변경하는 방법을 알아보겠습니다.

 

 

 

위와 같이 하단 툴바가 있고, 지난번에 생성한 핫스팟, 다른 지점으로 넘어갈 때 슬라이드 효과 외 여러가지를 설정할 수 있습니다.

 

코드 정리로 남겨놓겠습니다.

 

 

tour.xml 파일을 열어보시면 <krpano ~~ 로 시작해서 skin settings 부분이 보이실 겁니다.

maps는 추후에 정리해서 올리도록 하겠습니다.

 

    maps = 구글지도 연동 (api키, 위도와 경도가 필요)

    gyro = 모바일 움직이면 화면이 같이 움직이게 하는 설정

    webvr = 닌텐도모양 추가/삭제

    autotour = 자동움직임

    littleplanetintro = 인트로 멋있게

    followmousecontrol = 마우스 움직일때 화면이 돌아가진 않지만 살짝 움직이는 무빙

    scene title 변경가능

    title = title 제목 표시여부

    thumbs_opened = 맵들 기본적으로 열리게

    thumbs_width = 값을 늘릴수록 화면이 더 크게 보이나 비율이 깨지는 것을 고려해야함. padding 또한 키우면 크게보인다. thumbs_croop은 x축 , y축, 가로크기, 세로크기

    thumbs_onhoverscrolling= thumbs의 클릭하지 않고 자체적으로 움직일 수 있게 하는기능

    thumbs_scrollbuttons = thumbs슬라이드 버튼이 생성됨

    thumbs_text = thumbs에서 타이틀 표기

    thumbs_loop = 무한 슬라이드 / 슬라이드 loop의 기능과 같음

    tooltips_thumbs = 호버 시 thumbs 제목 표시

    tooltips_hotspots = 호버 시 hotspot 지점의 title 표시

    deeplinking= 지점마다 url 별도로 표시

    loadscene_blend = 화면 넘어갈 때 효과모음

    (

    <blendmodes name="no blending"          blend="NOBLEND" />

    <blendmodes name="simple crossblending" blend="BLEND(1.0, easeInCubic)" />

    <blendmodes name="zoom blend"           blend="ZOOMBLEND(2.0, 2.0, easeInOutSine)" />

    <blendmodes name="black-out"            blend="COLORBLEND(2.0, 0x000000, easeOutSine)" />

    <blendmodes name="white-flash"          blend="LIGHTBLEND(1.0, 0xFFFFFF, 2.0, linear)" />

    <blendmodes name="right-to-left"        blend="SLIDEBLEND(1.0, 0.0, 0.2, linear)" />

    <blendmodes name="top-to-bottom"        blend="SLIDEBLEND(1.0, 90.0, 0.01, linear)" />

    <blendmodes name="diagonal"             blend="SLIDEBLEND(1.0, 135.0, 0.4, linear)" />

    <blendmodes name="circle open"          blend="OPENBLEND(1.0, 0.0, 0.2, 0.0, linear)" />

    <blendmodes name="vertical open"        blend="OPENBLEND(0.7, 1.0, 0.1, 0.0, linear)" />

    <blendmodes name="horizontal open"      blend="OPENBLEND(1.0, -1.0, 0.3, 0.0, linear)" />

    <blendmodes name="elliptic + zoom"      blend="OPENBLEND(1.0, -0.5, 0.3, 0.8, linear)" />

    )

    loadscene_blend_prev = 다음으로 넘어갈 때 효과

    loadscene_blend_next = 이전으로 넘어갈 때 효과

    loadingtext = 로딩 텍스트 출력

    layout_maxwidth = 기본적으로 px단위이고 큰 화면의 경우 100% 권장

    controlbar_height = 하단 막대바 높이

    design_skin_images = 아이콘 위치표시, 포토샵을 이용해 수정가능

    design_bgcolor = 툴바 배경색 지정

    design_bgalpha = 툴바 불투명도 지정

    design_bgborder = 툴바 선색 지정

    design_bgshadow = 툴바 그림자 지정

    design_thumbborder_bgborder = 미리보기 사진 선색 지정

    design_thumbborder_padding = 미리보기이 얼마나 안쪽에 생성될 지 거리 지정

    design_text_css = 툴바 타이틀 선색 지정

    design_text_shadow = 툴바 타이틀 그림자 지정

 

개인적으로 간단하고 좋은 효과들은 파란색으로 해놓았습니다.

loadscence_blend의 경우 blend="이 부분을 복사하여 삽입" 하시면 됩니다.

효과는 name부분에서 추론 해 볼 수있습니다.

 

 

 

 

 

이후 스킨 세팅 하단에 보시면 위와 같은 코드가 있으실탠데

1개의 주석을 해제하면 그 스킨이 적용됩니다.

하나 하나 주석 해제해 보시면서 테스트 해보시기 바랍니다 ㅎ

 

 

감사합니다.