RoomPano
/
vr.html

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<title>&#24191;&#24030;&#19975;&#36798;&#22478; 140&#13217; VR&#26679;&#26495;&#38388;</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, minimal-ui" />
		<meta name="apple-mobile-web-app-capable" content="yes" />
		<meta name="apple-mobile-web-app-status-bar-style" content="black" />

		<style type="text/css" title="Default">
			body, div, h1, h2, h3, span, p {
				font-family: Verdana,Arial,Helvetica,sans-serif;
				color: #000000;
			}
			/* fullscreen */
			html {
				height:100%;
			}
			body {
				height:100%;
				margin: 0px;
				overflow:hidden; /* disable scrollbars */
			}
			body {
			  font-size: 10pt;
			  background : #ffffff;
			}
			.warning {
				font-weight: bold;
			}
			/* fix for scroll bars on webkit & Mac OS X Lion */
			::-webkit-scrollbar {
				background-color: rgba(0,0,0,0.5);
				width: 0.75em;
			}
			::-webkit-scrollbar-thumb {
				background-color:  rgba(255,255,255,0.5);
			}
		</style>
	</head>
	<body>
		<script type="text/javascript" src="pano2vr_player.js">
		</script>
		<script type="text/javascript" src="skin-vr.js">
		</script>
		<script type="text/javascript" src="pano2vrgyro.js">
		</script>
		<table border="0" cellspacing="0" cellpadding="0" style="width:100%;height:100%;" id="container_both" ondblclick="containerFullscreen();">
			<tr>
				<td style="width:50%;height:100%;"><div id="container_left"	 style="width:100%;height:100%;">
				This content requires HTML5/CSS3 or WebGL.</div></td>
				<td style="width:50%;height:100%;"><div id="container_right" style="width:100%;height:100%;">
				This content requires HTML5/CSS3 or WebGL.</div></td>
			</tr>
		</table>
		<script type="text/javascript">

		// check for CSS3 3D transformations and WebGL
		if (ggHasHtml5Css3D() || ggHasWebGL()) {
			// create the panorama player with the container
			pano_left=new pano2vrPlayer("container_left");
			pano_right=new pano2vrPlayer("container_right");
			// add the skin object
			skin_left=new pano2vrSkin(pano_left);
			skin_right=new pano2vrSkin(pano_right);
			// load the configuration
		pano_left.readConfigUrl("pano.xml");
		var nodeIds=pano_left.getNodeIds();
			pano_right.readConfigUrl("pano.xml");
		// add gyroscope controller
		gyro=new pano2vrGyro([pano_left,pano_right],"container_left");
			gyro.setUseRoll(true); // Use roll of gyroscope if set
		gyro.setAdaptiveVOffset(true);
			// synchronize both panoramas
		var lastPan,lastTilt,lastRoll,lastFov,lastLeft,lastRigth;
		lastLeft=pano_left.getCurrentNode();
		lastRight=pano_right.getCurrentNode();
		function syncPanos() {
			try {
				if(lastRight!==pano_right.getCurrentNode()){
					pano_left.openNext("{" + pano_right.getCurrentNode() + "}", "$cur");
				}
				else if(lastLeft!==pano_left.getCurrentNode()){
					pano_right.openNext("{" + pano_left.getCurrentNode() + "}", "$cur");
				}
				lastLeft=pano_left.getCurrentNode();
				lastRight=pano_right.getCurrentNode();
				var panoSrc=pano_left;
				var panoDst=pano_right;
				// Interaction works best on the left side
				// If source has not changed but dest has changed then switched source and dest
				if ((lastPan==pano_left.getPan()) &&
					 (lastTilt==pano_left.getTilt()) &&
					 (lastRoll==pano_left.getRoll()) &&
					 (lastFov==pano_left.getFov()) &&
					 ( (lastPan!=pano_right.getPan()) ||
					   (lastTilt!=pano_right.getTilt()) ||
					 (lastRoll!=pano_right.getRoll()) ||
					   (lastFov!=pano_right.getFov()))) {
						  panoSrc=pano_right;
						  panoDst=pano_left;
						}
				lastPan=panoSrc.getPan();
				lastTilt=panoSrc.getTilt();
				lastRoll=panoSrc.getRoll();
				lastFov=panoSrc.getFov();
				panoDst.setPanTiltFov(lastPan,lastTilt,lastFov);
				panoDst.setRoll(lastRoll);
			} catch(e) {}
		}
		setInterval (syncPanos, 10 );
		syncPanos();
		var lastNode;
		var hotspotArray=[];
		var cHotspot;
		var hotspotEnterTime;
		function stareNavigation() {
			if (pano_left) {
				if (pano_left.getCurrentNode()!=lastNode) {
					lastNode=pano_left.getCurrentNode();
					hotspotArray=[];
					var ids=pano_left.getPointHotspotIds();
					for(var i=0;i<ids.length;i++) {
						var id=ids[i];
						var hotspot=pano_left.getHotspot(id);
						hotspotArray.push(hotspot);
					}
				}
				var cPan=pano_left.getPan();
				var cTilt=pano_left.getTilt();
				var found=false;
				for (var i = 0; i < hotspotArray.length; i++) {
					var hotspot = hotspotArray[i];
					var dist=5;
					var pdif=(hotspot.pan-cPan);
					while(pdif<-180) pdif+=360.0;
					while(pdif>180) pdif-=360.0;
					if ((Math.abs(pdif)<(dist*Math.cos(cTilt * Math.PI/180.0))) &&
						(Math.abs(hotspot.tilt-cTilt)<dist)) {
						if (hotspot!=cHotspot) {
							cHotspot=hotspot;
							hotspotEnterTime=Date.now();
						}
						found=true;
						break;
					}
				}
				if (found) {
					if ((hotspotEnterTime+2000)<Date.now()) {
						cHotspot.div.onclick();
						cHotspot=null;
					}
				} else {
					cHotspot=null;
				}
			}
		}
		setInterval (stareNavigation, 100);
		function containerFullscreen()
		{
			var e=document.getElementById('container_both');
			// go full-screen
			if (e.requestFullscreen) {
				e.requestFullscreen();
			} else if (e.webkitRequestFullscreen) {
				e.webkitRequestFullscreen();
			} else if (e.mozRequestFullScreen) {
				e.mozRequestFullScreen();
			} else if (e.msRequestFullscreen) {
				e.msRequestFullscreen();
			}
		}
	} // HTML5 CSS3D/WebGL check
		</script>
		<noscript>
			<p><b>Please enable Javascript!</b></p>
		</noscript>
	</body>
</html>