JavaScript API(Pano2VR)

 

自从Pano2VR全景图2.1 b4 Flash 9可以控制使用JavaScript从HTML页面。 API类似 Flash API 

首先,你需要启用外部Flash接口。 它在默认情况下是禁用的,以避免错误消息。 要做到这一点,你需要设置 FlashVars 参数externalinterface 1。 还需要分配一个名称或ID 给这个flash object。 如果您正在使用 p2q_embed_object.js (2.2和更高版本),代码为:

<script type="text/javascript" src="p2q_embed_object.js">
</script>
<script type="text/javascript">
<!--
  p2q_EmbedFlashId('pano','test.swf','640','480','allowFullScreen','true','FlashVars','externalinterface=1');
//-->
</script>

将公开Pano2VR JavaScript API。

如果您启用选项“JavaScript接口” HTML模板 “正常。 ggt”将为你创建的代码。

JavaScript API调用

观察方向

pano.getPan(); // returns the current pan angle
pano.setPan(angle_in_degrees:Number); // sets the current pan angle
pano.changePan(offset_in_degrees:Number); // change the current pan angle
 
pano.getTilt(); // returns the current tilt angle
pano.setTilt(angle_in_degrees:Number); // sets the current tilt angle
pano.changeTilt(offset_in_degrees:Number); // change the current tilt angle
 
pano.getFov(); // returns the current FoV
pano.setFov(angle_in_degrees:Number); // sets the current FoV
pano.changeFov(offset_in_degrees:Number); // change the current FoV
 
pano.moveTo(pan:Number, tilt:Number, fov:Number, speed:Number ); // move to position

其他电话

pano.setAutorotate(<speed:Number>,<delay:Number>,<return to horizon:Number>,<only in focus:Boolean>);
pano.setLocked(<value:Boolean>); // Allow interaction with the panorama (mouse/keyboard)
pano.isComplete(); // Check if the panorama is loaded completely
pano.stop(); // stop automatic movement
pano.openNext(<url:String>,<parameter:String>); // Open next panorama

你可以看到一个小演示在这 Pano2VR例子 

完整的例子

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
		<title></title>
		<script type="text/javascript" src="p2q_embed_object.js">
		</script>
		<style type="text/css" title="Default">
			body, div, h1, h2, h3, span, p {
				font-family: Verdana,Arial,Helvetica,sans-serif;
				color: #000000; 
			}
			body {
			  font-size: 10pt;
			  background : #ffffff; 
			}
			table,tr,td {
				font-size: 10pt;
				border-color : #777777;
				background : #dddddd; 
				color: #000000; 
				border-style : solid;
				border-width : 1px;
			}
			h1 {
				font-size: 18pt;
			}
			h2 {
				font-size: 14pt;
			}
			.warning {
				font-weight: bold;
			}
		</style>	
	</head>
	<body>
		<h1></h1>
		<p>
		<script type="text/javascript">
<!--
			function getFlashMovie(movieName) {
				var isIE = navigator.appName.indexOf("Microsoft") != -1;
				return (isIE) ? window[movieName] : document[movieName];
			}
			if ((window.p2q_Version) && (window.p2q_Version>=2.0)) {
				var flashvars="";
				// enable javascript interface
				flashvars+="externalinterface=1&pan=22";
				p2q_EmbedFlashId('pano','test.swf','640','480','allowFullScreen','true','FlashVars',flashvars);
 
				// Check to see if the version meets the requirements for playback
				if (!DetectFlashVer(9,0,0)) {
					document.write('<p class="warning">This content requires Adobe Flash Player Version 9 or higher. '
								 + '<a href="http://www.adobe.com/go/getflash/">Get Flash<\/a><\/p>');
				}
			} else {
				document.writeln('<p class="warning">p2q_embed_object.js is not included or it is too old!');
				document.writeln(' Please copy this file into your html directory.<\/p>');
			}
//-->
		</script>
		<noscript>
			<p class="warning">Please enable Javascript!</p>
		</noscript>
		<br>
		<a onClick="pano.moveTo(140,-40,70,10);" href="#">Move To 140,-40</a>
		<a onClick="pano.moveTo(-100,40,70,3);" href="#">Move To -100,40</a>
		<a onClick="pano.moveTo(-140,30);" href="#">Move To -140,30</a>
		<a onClick="pano.stop();pano.setPan(-100);pano.setTilt(-50);" href="#">Jump To -100,-50</a>
	</body>
</html>

发表评论

电子邮件地址不会被公开。 必填项已用*标注