heuzef
/
pannellum
ミラー元 https://github.com/mpetroff/pannellum.git
1
0
フォーク 0
コード 課題 0 リリース 22 Wiki アクティビティ
ソースを参照

Added full window view.

tags/1.0
Matthew Petroff 13年前
親
07669aef25
コミット
a9cf4e8253
7個のファイルの変更、428行の追加、87行の削除
分割表示
差分オプション
統計情報を表示 Patchファイルをダウンロード Diffファイルをダウンロード
  1. +199
    -52
      artwork-src/sprites.svg
  2. +16
    -3
      configuration.htm
  3. +1
    -1
      examples/example.htm
  4. バイナリ
      src/css/img/sprites.png
  5. +35
    -6
      src/css/pannellum.css
  6. +172
    -25
      src/js/pannellum.js
  7. +5
    -0
      src/pannellum.htm

+ 199
- 52
artwork-src/sprites.svg ファイルの表示

@@ -9,7 +9,7 @@
xmlns="http://www.w3.org/2000/svg"
version="1.1"
width="81"
height="98"
height="135"
id="svg2">
<defs
id="defs4" />
@@ -26,10 +26,9 @@
</rdf:RDF>
</metadata>
<g
transform="translate(0,-26.999999)"
id="g3077">
id="g4193">
<g
transform="translate(-51.622576,-130.26671)"
transform="translate(-51.622576,-157.26671)"
id="layer1">
<g
transform="matrix(0.10802469,0,0,0.10802469,70.407414,140.71962)"
@@ -55,7 +54,7 @@
</g>
</g>
<g
transform="translate(-51.622576,-103.26671)"
transform="translate(-51.622576,-130.26671)"
id="layer1-1">
<g
transform="matrix(0.10802469,0,0,0.10802469,70.407414,140.71962)"
@@ -81,7 +80,7 @@
</g>
</g>
<g
transform="translate(-78.622576,-130.26671)"
transform="translate(-78.622576,-157.26671)"
id="layer1-4">
<g
transform="matrix(0.10802469,0,0,0.10802469,70.980601,168.80783)"
@@ -121,7 +120,7 @@
</g>
</g>
<g
transform="matrix(0.10802469,0,0,0.10802469,-7.6419752,65.541122)"
transform="matrix(0.10802469,0,0,0.10802469,-7.6419752,38.541123)"
id="g3847-2"
style="stroke:none">
<rect
@@ -157,7 +156,7 @@
</g>
</g>
<g
transform="translate(-24.622574,-130.26671)"
transform="translate(-24.622574,-157.26671)"
id="layer1-5">
<rect
width="25"
@@ -178,7 +177,7 @@
</g>
</g>
<g
transform="translate(-24.622574,-103.26671)"
transform="translate(-24.622574,-130.26671)"
id="layer1-7">
<rect
width="25"
@@ -199,7 +198,7 @@
</g>
</g>
<g
transform="translate(-78.122574,-157.26671)"
transform="translate(-78.122574,-184.26671)"
id="layer1-8">
<rect
width="79"
@@ -253,11 +252,51 @@
</g>
</g>
<g
transform="matrix(0.6,0,0,0.6,-46.773546,-29.160024)"
id="layer1-4-1">
transform="matrix(0,1,-1,0,179.80815,36.454863)"
id="g4270">
<g
transform="matrix(0.10802469,0,0,0.10802469,70.980601,168.80783)"
id="g3847-7"
transform="matrix(0.6,0,0,0.6,-2.2284129,-1.3518769)"
id="layer1-4-1">
<g
transform="matrix(0.10802469,0,0,0.10802469,70.980601,168.80783)"
id="g3847-7"
style="stroke:none">
<rect
width="231.42857"
height="231.42857"
ry="82.85714"
x="80"
y="152.36218"
id="rect2985-40"
style="opacity:0.7;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none" />
<g
transform="matrix(0.70710678,-0.70710678,0.70710678,0.70710678,-116.98958,206.80118)"
id="g3834-9"
style="stroke:none">
<g
transform="matrix(2.9241475,0,0,1.792296,-419.7843,-532.28539)"
id="text3755-1-0-8-4"
style="fill:#ffffff;fill-opacity:1;stroke:none">
<path
d="m 181.23132,435.6048 46.25214,0 0,17.84956 -46.25214,0 z"
id="path3781-9-8-8"
style="fill:#ffffff;fill-opacity:1;stroke:none" />
</g>
<g
transform="matrix(0,2.9241475,-1.792296,0,974.51544,-333.12795)"
id="text3755-1-4-8"
style="fill:#ffffff;fill-opacity:1;stroke:none">
<path
d="m 181.23132,435.6048 46.25214,0 0,17.84956 -46.25214,0 z"
id="path3781-8-2"
style="fill:#ffffff;fill-opacity:1;stroke:none" />
</g>
</g>
</g>
</g>
<g
transform="matrix(0.06481481,0,0,0.06481481,57.359948,99.932817)"
id="g3847-2-4"
style="stroke:none">
<rect
width="231.42857"
@@ -265,67 +304,175 @@
ry="82.85714"
x="80"
y="152.36218"
id="rect2985-40"
style="opacity:0.7;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none" />
id="rect2985-45-5"
style="opacity:0.7;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none" />
<g
transform="matrix(0.70710678,-0.70710678,0.70710678,0.70710678,-116.98958,206.80118)"
id="g3834-9"
style="stroke:none">
id="g3834-5-5"
style="fill:#000000;fill-opacity:1;stroke:none">
<g
transform="matrix(2.9241475,0,0,1.792296,-419.7843,-532.28539)"
id="text3755-1-0-8-4"
style="fill:#ffffff;fill-opacity:1;stroke:none">
id="text3755-1-0-1-1"
style="fill:#000000;fill-opacity:1;stroke:none">
<path
d="m 181.23132,435.6048 46.25214,0 0,17.84956 -46.25214,0 z"
id="path3781-9-8-8"
style="fill:#ffffff;fill-opacity:1;stroke:none" />
id="path3781-9-7-7"
style="fill:#000000;fill-opacity:1;stroke:none" />
</g>
<g
transform="matrix(0,2.9241475,-1.792296,0,974.51544,-333.12795)"
id="text3755-1-4-8"
style="fill:#ffffff;fill-opacity:1;stroke:none">
id="text3755-1-4-1-1"
style="fill:#000000;fill-opacity:1;stroke:none">
<path
d="m 181.23132,435.6048 46.25214,0 0,17.84956 -46.25214,0 z"
id="path3781-8-2"
style="fill:#ffffff;fill-opacity:1;stroke:none" />
id="path3781-8-1-1"
style="fill:#000000;fill-opacity:1;stroke:none" />
</g>
</g>
</g>
</g>
<g
transform="matrix(0.06481481,0,0,0.06481481,12.814815,72.124675)"
id="g3847-2-4"
style="stroke:none">
<rect
width="231.42857"
height="231.42857"
ry="82.85714"
x="80"
y="152.36218"
id="rect2985-45-5"
style="opacity:0.7;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none" />
transform="translate(82.606464,46.517108)"
id="g4255">
<g
transform="matrix(0.70710678,-0.70710678,0.70710678,0.70710678,-116.98958,206.80118)"
id="g3834-5-5"
style="fill:#000000;fill-opacity:1;stroke:none">
transform="translate(-134.22904,-149.78382)"
id="layer1-4-17">
<g
transform="matrix(2.9241475,0,0,1.792296,-419.7843,-532.28539)"
id="text3755-1-0-1-1"
style="fill:#000000;fill-opacity:1;stroke:none">
transform="matrix(0.10802469,0,0,0.10802469,70.980601,168.80783)"
id="g3847-4"
style="stroke:none">
<rect
width="231.42857"
height="231.42857"
ry="82.85714"
x="80"
y="152.36218"
id="rect2985-0"
style="opacity:0.7;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none" />
<path
d="m 121.77483,193.88845 0,64.80001 22.56429,-22.56429 22.56428,22.56429 19.67143,-19.38215 -22.85357,-22.56428 22.85357,-22.85358 -64.8,0 z"
id="rect3148"
style="color:#000000;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:0;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dashoffset:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />
<path
d="m 269.77143,194.01932 -64.8,0 22.56429,22.56429 -22.56429,22.56428 19.38215,19.67143 22.56428,-22.85357 22.85357,22.85357 0,-64.8 z"
id="rect3148-3"
style="color:#000000;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:0;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dashoffset:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />
<path
d="m 181.23132,435.6048 46.25214,0 0,17.84956 -46.25214,0 z"
id="path3781-9-7-7"
style="fill:#000000;fill-opacity:1;stroke:none" />
d="m 269.77143,342.13362 0,-64.8 -22.56429,22.56429 -22.56428,-22.56429 -19.67143,19.38215 22.85357,22.56428 -22.85357,22.85357 64.8,0 z"
id="rect3148-41"
style="color:#000000;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:0;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dashoffset:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />
<path
d="m 121.65714,342.13361 64.8,0 -22.56429,-22.56429 22.56429,-22.56428 -19.38215,-19.67143 -22.56428,22.85357 -22.85357,-22.85357 0,64.8 z"
id="rect3148-1"
style="color:#000000;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:0;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dashoffset:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />
</g>
</g>
<g
transform="matrix(0.10802469,0,0,0.10802469,-63.248439,46.024015)"
id="g3847-2-5"
style="stroke:none">
<rect
width="231.42857"
height="231.42857"
ry="82.85714"
x="80"
y="152.36218"
id="rect2985-45-1"
style="opacity:0.7;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none" />
<path
d="m 121.77483,193.95388 0,64.80001 22.56429,-22.56429 22.56428,22.56429 19.67143,-19.38215 -22.85357,-22.56428 22.85357,-22.85358 -64.8,0 z"
id="rect3148-8"
style="color:#000000;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:0;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dashoffset:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />
<path
d="m 269.77143,194.08475 -64.8,0 22.56429,22.56429 -22.56429,22.56428 19.38215,19.67143 22.56428,-22.85357 22.85357,22.85357 0,-64.8 z"
id="rect3148-3-7"
style="color:#000000;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:0;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dashoffset:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />
<path
d="m 269.77143,342.19905 0,-64.8 -22.56429,22.56429 -22.56428,-22.56429 -19.67143,19.38215 22.85357,22.56428 -22.85357,22.85357 64.8,0 z"
id="rect3148-41-4"
style="color:#000000;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:0;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dashoffset:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />
<path
d="m 121.65714,342.19904 64.8,0 -22.56429,-22.56429 22.56429,-22.56428 -19.38215,-19.67143 -22.56428,22.85357 -22.85357,-22.85357 0,64.8 z"
id="rect3148-1-2"
style="color:#000000;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:0;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dashoffset:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />
</g>
</g>
<g
transform="translate(-192.35832,-101.60511)"
id="layer1-4-17-5">
<g
transform="matrix(0.10802469,0,0,0.10802469,70.980601,168.80783)"
id="g3847-4-7"
style="stroke:none">
<g
transform="matrix(0,2.9241475,-1.792296,0,974.51544,-333.12795)"
id="text3755-1-4-1-1"
style="fill:#000000;fill-opacity:1;stroke:none">
transform="translate(-0.9855482,-9.4155556)"
id="g3969-1" />
</g>
</g>
<g
transform="translate(120.2669,60.201655)"
id="g4240">
<g
transform="translate(-198.88948,-163.46837)"
id="layer1-4-17-7">
<g
transform="matrix(0.10802469,0,0,0.10802469,70.980601,168.80783)"
id="g3847-4-79"
style="stroke:none">
<rect
width="231.42857"
height="231.42857"
ry="82.85714"
x="80"
y="152.36218"
id="rect2985-0-3"
style="opacity:0.7;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none" />
<path
d="m 181.23132,435.6048 46.25214,0 0,17.84956 -46.25214,0 z"
id="path3781-8-1-1"
style="fill:#000000;fill-opacity:1;stroke:none" />
d="m 186.57484,258.68846 0,-64.80001 -22.56429,22.56429 -22.56428,-22.56429 -19.67143,19.38215 22.85357,22.56428 -22.85357,22.85358 64.8,0 z"
id="rect3148-19"
style="color:#000000;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:0;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dashoffset:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />
<path
d="m 204.97143,258.81932 64.8,0 -22.56429,-22.56429 22.56429,-22.56428 -19.38215,-19.67143 -22.56428,22.85357 -22.85357,-22.85357 0,64.8 z"
id="rect3148-3-8"
style="color:#000000;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:0;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dashoffset:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />
<path
d="m 204.97143,277.33362 0,64.8 22.56429,-22.56429 22.56428,22.56429 19.67143,-19.38215 -22.85357,-22.56428 22.85357,-22.85357 -64.8,0 z"
id="rect3148-41-6"
style="color:#000000;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:0;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dashoffset:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />
<path
d="m 186.45714,277.33361 -64.8,0 22.56429,22.56429 -22.56429,22.56428 19.38215,19.67143 22.56428,-22.85357 22.85357,22.85357 0,-64.8 z"
id="rect3148-1-5"
style="color:#000000;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:0;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dashoffset:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />
</g>
</g>
<g
transform="matrix(0.10802469,0,0,0.10802469,-127.90888,32.339468)"
id="g3847-2-5-0"
style="stroke:none">
<rect
width="231.42857"
height="231.42857"
ry="82.85714"
x="80"
y="152.36218"
id="rect2985-45-1-2"
style="opacity:0.7;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none" />
<path
d="m 186.57484,258.75388 0,-64.80001 -22.56429,22.56429 -22.56428,-22.56429 -19.67143,19.38215 22.85357,22.56428 -22.85357,22.85357 64.8,0 z"
id="rect3148-8-8"
style="color:#000000;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:0;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dashoffset:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />
<path
d="m 204.97143,258.88475 64.8,0 -22.56429,-22.56429 22.56429,-22.56428 -19.38215,-19.67143 -22.56428,22.85357 -22.85357,-22.85357 0,64.8 z"
id="rect3148-3-7-6"
style="color:#000000;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:0;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dashoffset:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />
<path
d="m 204.97143,277.39905 0,64.8 22.56429,-22.56429 22.56428,22.56429 19.67143,-19.38215 -22.85357,-22.56428 22.85357,-22.85357 -64.8,0 z"
id="rect3148-41-4-0"
style="color:#000000;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:0;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dashoffset:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />
<path
d="m 186.45714,277.39904 -64.8,0 22.56429,22.56429 -22.56429,22.56428 19.38215,19.67143 22.56428,-22.85357 22.85357,22.85357 0,-64.8 z"
id="rect3148-1-2-2"
style="color:#000000;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:0;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dashoffset:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />
</g>
</g>
</svg>

+ 16
- 3
configuration.htm ファイルの表示

@@ -7,15 +7,17 @@
<SCRIPT LANGUAGE="JavaScript">
function processForm (form)
{
var TestVar = form.embed_width.value;
var id = 'pannellum_' + randomString();
var embed_code = document.getElementById('embed_code');
embed_code.innerHTML = '<iframe title="pannellum panorama viewer"' +
' width="' + escape(form.embed_width.value) +
'" height="' + escape(form.embed_height.value) +
'" style="border-style:none;"' +
' src="' + escape(form.pannellum_url.value) +
' id="' + escape(id) +
'" src="' + escape(form.pannellum_url.value) +
'?' +
'panorama=' + escape(form.pano_url.value);
'panorama=' + escape(form.pano_url.value) +
'&amp;amp;id=' + id;
if(form.use_logo.checked)
{
embed_code.innerHTML += '&amp;amp;logo=yes';
@@ -35,6 +37,17 @@
embed_code.innerHTML += '"></iframe>';
return false;
}
function randomString()
{
var chars = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXTZabcdefghiklmnopqrstuvwxyz";
var randomstring = '';
for (var i=0;i<10;i++)
{
var rnum = Math.floor(Math.random() * chars.length);
randomstring += chars.substring(rnum,rnum+1);
}
return randomstring;
}
</SCRIPT>
</head>


+ 1
- 1
examples/example.htm ファイルの表示

@@ -5,6 +5,6 @@
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<iframe title="pannellum panorama viewer" width="480" height="390" style="border-style:none;" src="../src/pannellum.htm?panorama=../examples/examplepano.jpg&amp;logo=yes&amp;title=Jordan%20Pond&amp;author=Matthew%20Petroff"></iframe>
<iframe title="pannellum panorama viewer" width="480" height="390" style="border-style:none;" id="pannellum_bBp5kpMDES" src="../src/pannellum.htm?panorama=../examples/examplepano.jpg&amp;id=pannellum_bBp5kpMDES&amp;logo=yes&amp;title=Jordan%20Pond&amp;author=Matthew%20Petroff"></iframe>
</body>
</html>

バイナリ
src/css/img/sprites.png ファイルの表示

変更前 変更後
幅: 81  |  高さ: 98  |  サイズ: 2.0 KiB 幅: 81  |  高さ: 135  |  サイズ: 2.7 KiB

+ 35
- 6
src/css/pannellum.css ファイルの表示

@@ -89,7 +89,7 @@ body
{
float:right;
background-image:url('img/sprites.png');
background-position:-17px -81px;
background-position:-54px -98px;
width:17px;
height:17px;
margin-right:5px;
@@ -97,7 +97,7 @@ body
}
#close_button:hover
{
background-position:0px -81px;
background-position:-54px -81px;
}

#pannellum_logo
@@ -105,8 +105,8 @@ body
background-image:url('img/sprites.png');
background-position:0px 0px;
position:absolute;
bottom:2px;
right:2px;
top:2px;
right:29px;
width:81px;
height:27px;
display:none;
@@ -115,8 +115,8 @@ body
#pannellum_logo a:link
{
display:block;
width:85px;
height:28px;
width:81px;
height:27px;
}

#panorama_info
@@ -286,4 +286,33 @@ body
display:table-cell;
vertical-align:middle;
padding:0px 5px 0px 5px;
}

#fullwindowtoggle_button
{
position:absolute;
bottom:2px;
right:2px;
width:27px;
height:27px;
background-image:url('img/sprites.png');
background-position:-27px -81px;
}
#fullwindowtoggle_button:hover
{
background-position:-27px -108px;
}
#fullwindowtoggle_button_active
{
position:absolute;
bottom:2px;
right:2px;
width:27px;
height:27px;
background-image:url('img/sprites.png');
background-position:0px -81px;
}
#fullwindowtoggle_button_active:hover
{
background-position:0px -108px;
}

+ 172
- 25
src/js/pannellum.js ファイルの表示

@@ -31,6 +31,10 @@ if(getURLParameter('author'))
{
document.getElementById('author_box').innerHTML = 'by ' + getURLParameter('author');
}
if(getURLParameter('popout') == 'yes')
{
document.getElementById('fullwindowtoggle_button').id = 'fullwindowtoggle_button_active';
}

var camera, scene, renderer, renderGL;

@@ -46,11 +50,13 @@ var isTimedOut = false;

var about_box = document.getElementById('about_box');

if( getURLParameter('autoload') == 'yes' )
if(getURLParameter('autoload') == 'yes' || getURLParameter('popoutautoload') == 'yes')
{
// show loading box
var load_box = document.getElementById('load_box');
load_box.style.display = 'inline';
if(getURLParameter('popoutautoload') != 'yes')
{
// show loading box
document.getElementById('load_box').load_box.style.display = 'inline';
}
// initialize
init();
animate();
@@ -110,6 +116,7 @@ function init()
document.addEventListener('mouseup',onDocumentMouseUp,false);
document.addEventListener('mousewheel',onDocumentMouseWheel,false);
document.addEventListener('DOMMouseScroll',onDocumentMouseWheel,false);
document.addEventListener('onresize',onDocumentResize,false);
document.onkeydown = onDocumentKeyPress;
@@ -233,6 +240,23 @@ function onDocumentKeyPress (event)
}
}

window.onresize = function(){onDocumentResize();};
function onDocumentResize()
{
// reset panorama renderer
try
{
camera.aspect = window.innerWidth / window.innerHeight;
renderer.setSize(window.innerWidth,window.innerHeight);
camera.projectionMatrix = THREE.Matrix4.makePerspective(fov,window.innerWidth / window.innerHeight,1,1100);
render();
}
catch(event)
{
// panorama not loaded
}
}

function animate()
{
render();
@@ -244,33 +268,47 @@ function animate()

function render()
{
lat = Math.max(-85,Math.min(85,lat));
phi = (90 - lat) * Math.PI / 180;
theta = lon * Math.PI / 180;
camera.target.position.x = 500 * Math.sin(phi) * Math.cos(theta);
camera.target.position.y = 500 * Math.cos(phi);
camera.target.position.z = 500 * Math.sin(phi) * Math.sin(theta);
renderer.render(scene,camera);
try
{
lat = Math.max(-85,Math.min(85,lat));
phi = (90 - lat) * Math.PI / 180;
theta = lon * Math.PI / 180;
camera.target.position.x = 500 * Math.sin(phi) * Math.cos(theta);
camera.target.position.y = 500 * Math.cos(phi);
camera.target.position.z = 500 * Math.sin(phi) * Math.sin(theta);
renderer.render(scene,camera);
}
catch(event)
{
// panorama not loaded
}
}

function renderinit()
{
camera.target.x = 0;
camera.target.y = 0;
camera.target.z = 0;
renderer.render(scene,camera);
if(!isTimedOut)
try
{
requestAnimationFrame(renderinit);
camera.target.x = 0;
camera.target.y = 0;
camera.target.z = 0;
renderer.render(scene,camera);
if(!isTimedOut)
{
requestAnimationFrame(renderinit);
}
else
{
// hide loading display
document.getElementById('load_box').style.display = 'none';
}
}
else
catch(event)
{
// hide loading display
document.getElementById('load_box').style.display = 'none';
// panorama not loaded
}
}

@@ -288,4 +326,113 @@ function getURLParameter(name)
{
return results[1];
}
}
}

// expand to full window
var crosssitescripting;
try
{
var panoramaiframe = parent.document.getElementById(getURLParameter('id'));
var originaliframewidth = panoramaiframe.width;
var originaliframeheight = panoramaiframe.height;
var originalposition = panoramaiframe.style.position;
var originaltop = panoramaiframe.style.top;
var originalleft = panoramaiframe.style.left;
var originaloverflow = parent.document.body.style.overflow;
var fullWindowActive = false;
crosssitescripting = false;
}
catch(event) // cross-site scripting error
{
crosssitescripting = true
}
function fullWindow()
{
// prevent scroll bars
parent.document.body.style.overflow = 'hidden';
// position iframe in top corner
panoramaiframe.style.position = 'absolute';
panoramaiframe.style.top = '0px';
panoramaiframe.style.left = '0px';
// resize iframe to full window
panoramaiframe.width = '100%';
panoramaiframe.height = '100%';
// set viewer mode
fullWindowActive = true;
// reset panorama renderer
try
{
camera.aspect = window.innerWidth / window.innerHeight;
renderer.setSize(window.innerWidth,window.innerHeight);
camera.projectionMatrix = THREE.Matrix4.makePerspective(fov,window.innerWidth / window.innerHeight,1,1100);
render();
}
catch(event)
{
// panorama not loaded
}
}
function hideFullWindow()
{
// reset iframe
panoramaiframe.width = originaliframewidth;
panoramaiframe.height = originaliframeheight;
panoramaiframe.style.position = originalposition;
panoramaiframe.style.top = originaltop;
panoramaiframe.style.left = originalleft;
// reset scroll bars
parent.document.body.style.overflow = originaloverflow;
// set viewer mode
fullWindowActive = false;
// reset panorama renderer
try
{
camera.aspect = window.innerWidth / window.innerHeight;
renderer.setSize(window.innerWidth,window.innerHeight);
camera.projectionMatrix = THREE.Matrix4.makePerspective(fov,window.innerWidth / window.innerHeight,1,1100);
render();
}
catch(event)
{
// panorama not loaded
}
}
function toggleFullWindow()
{
if(crosssitescripting == false)
{
if(fullWindowActive == false)
{
fullWindow();
document.getElementById('fullwindowtoggle_button').id = 'fullwindowtoggle_button_active';
}
else
{
hideFullWindow();
document.getElementById('fullwindowtoggle_button_active').id = 'fullwindowtoggle_button';
}
}
else
{
if(getURLParameter('popout') != 'yes')
{
// open new window instead
var windowspecs = 'width=' + screen.width + ',height=' + screen.height + ',left=0,top=0';
var windowlocation = window.location.href + '&popout=yes';
try
{
camera.aspect = window.innerWidth / window.innerHeight;
windowlocation += '&popoutautoload=yes';
}
catch(event)
{
// panorama not loaded
}
window.open(windowlocation,null,windowspecs)
}
else
{
window.close();
}
}
}

+ 5
- 0
src/pannellum.htm ファイルの表示

@@ -4,6 +4,9 @@
<title>pannellum</title>
<meta charset="utf-8">
<link type="text/css" rel="Stylesheet" href="css/pannellum.css" />
<script type="text/javascript">
//window.onresize = function(){alert('hello')};
</script>
</head>
<body>
@@ -25,6 +28,8 @@
<div id="pannellum_logo"><a href="http://pannellum.sf.net/" target="_blank"></a></div>
<div id="fullwindowtoggle_button" onclick="toggleFullWindow();"></div>
<div id="load_box"><p>Loading...<div id="load_indicator"></div></div>
<div id="load_button" onclick="var load_button = document.getElementById('load_button'); load_button.style.display = 'none';


書き込み プレビュー
読み込み中…
キャンセル
保存