Panorama on web pages - Revision history

Andre: /* A-frame */

2016-12-18T19:55:00Z

A-frame

← Older revision		Revision as of 19:55, 18 December 2016
Line 21:		Line 21:
	</a-scene>		</a-scene>
	</lang>		</lang>
			</source>
	See it running in: http://publicationstation.wdka.hro.nl/D&T/AframeVR/panorama/		See it running in: http://publicationstation.wdka.hro.nl/D&T/AframeVR/panorama/

Andre: /* A-frame */

2016-12-18T19:51:47Z

A-frame

← Older revision		Revision as of 19:51, 18 December 2016
Line 16:		Line 16:
	* create a aframe a-sence		* create a aframe a-sence
	** inside add the a-sky element which include the panorama image		** inside add the a-sky element which include the panorama image
	<~~code~~>		<source lang="html4strict">
	<a-scene>		<a-scene>
	<a-sky src="puydesancy.jpg" rotation="0 -130 0"></a-sky>		<a-sky src="puydesancy.jpg" rotation="0 -130 0"></a-sky>
	</a-scene>		</a-scene>
	</~~code~~>		</lang>

	See it running in: http://publicationstation.wdka.hro.nl/D&T/AframeVR/panorama/		See it running in: http://publicationstation.wdka.hro.nl/D&T/AframeVR/panorama/

Andre at 19:51, 18 December 2016

2016-12-18T19:51:16Z

← Older revision		Revision as of 19:51, 18 December 2016
Line 46:		Line 46:
	</source>		</source>

	===Links==		==Links==
	* [http://www.stefankaltenegger.com/playground/capture-embed-vr-360-images/ Capture and embed VR 360 images]		* [http://www.stefankaltenegger.com/playground/capture-embed-vr-360-images/ Capture and embed VR 360 images]
	* [https://davidwalsh.name/3d-panorama-image Create a 3D Panorama Image with A-Frame]		* [https://davidwalsh.name/3d-panorama-image Create a 3D Panorama Image with A-Frame]
	* https://aframe.io/		* https://aframe.io/

	==Pannellum==		=Pannellum=
	'''[https://pannellum.org/ Pannellum] is JavaScript library for displaying and navigate panorama images on web pages.		'''[https://pannellum.org/ Pannellum] is JavaScript library for displaying and navigate panorama images on web pages.
	'''		'''
Line 68:		Line 68:
	'''To run it you will need to store the folder with the library, html page and images in webserver'''.		'''To run it you will need to store the folder with the library, html page and images in webserver'''.

	=Example=		==Example==
	See live example in http://publicationstation.wdka.hro.nl/pannellum/		See live example in http://publicationstation.wdka.hro.nl/pannellum/


	==HTML code==		==HTML code==
Line 124:		Line 123:
	</source>		</source>

	=Interaction=		==Interaction==
	Programmatic interaction with the panorama can be achieved by using Pannellum [https://pannellum.org/documentation/api/ API]		Programmatic interaction with the panorama can be achieved by using Pannellum [https://pannellum.org/documentation/api/ API]
	* <code>viewer.getYawBounds()</code> returns the boundaries ( minimum and maximum) allowed pitches (in degrees)		* <code>viewer.getYawBounds()</code> returns the boundaries ( minimum and maximum) allowed pitches (in degrees)

Andre at 19:46, 18 December 2016

2016-12-18T19:46:25Z

← Older revision		Revision as of 19:46, 18 December 2016
Line 1:		Line 1:
	Panorama images for the Web can be easily be created using a '''Equirectangular panorama image'''.		Panorama images for the Web can be easily be created using a '''Equirectangular panorama image'''.

	==A-frame==		Here are two ways of doing it using '''A-frame''' Mozilla framework for VR and '''Pannellum''' a Javascript library for displaying panorama images.

			=A-frame=
	[https://aframe.io/ A-Frame] is a web framework for building virtual reality experiences. It was started by Mozilla VR to make WebVR content creation easier, faster, and more accessible. It spares you having to use a complex JavaScript libraries like ThreeJS and presents a simple HTML like language to build VR projects.		[https://aframe.io/ A-Frame] is a web framework for building virtual reality experiences. It was started by Mozilla VR to make WebVR content creation easier, faster, and more accessible. It spares you having to use a complex JavaScript libraries like ThreeJS and presents a simple HTML like language to build VR projects.

Line 20:		Line 22:
	</code>		</code>

	See it running in:		See it running in: http://publicationstation.wdka.hro.nl/D&T/AframeVR/panorama/

	~~Source code~~

			Source code:
	<source lang="html4strict">		<source lang="html4strict">
	<!DOCTYPE html>		<!DOCTYPE html>
Line 45:		Line 46:
	</source>		</source>

			===Links==
			* [http://www.stefankaltenegger.com/playground/capture-embed-vr-360-images/ Capture and embed VR 360 images]
			* [https://davidwalsh.name/3d-panorama-image Create a 3D Panorama Image with A-Frame]
			* https://aframe.io/

	==Pannellum==		==Pannellum==

Andre at 19:41, 18 December 2016

2016-12-18T19:41:26Z

← Older revision		Revision as of 19:41, 18 December 2016
Line 1:		Line 1:
			Panorama images for the Web can be easily be created using a '''Equirectangular panorama image'''.

			==A-frame==
			[https://aframe.io/ A-Frame] is a web framework for building virtual reality experiences. It was started by Mozilla VR to make WebVR content creation easier, faster, and more accessible. It spares you having to use a complex JavaScript libraries like ThreeJS and presents a simple HTML like language to build VR projects.

			A-frame allows interaction with rotation sensors and stereo images (for VR goggles) out of the box, without having to write any code

			One of the examples that is present in Aframe website is of a [https://aframe.io/examples/showcase/sky/ Panoranama]
			.

			What do you need:
			* Equirectangular panorama image
			* Load: aframe library <code><script src="https://aframe.io/releases/0.4.0/aframe.min.js"></script></code>
			* create a aframe a-sence
			** inside add the a-sky element which include the panorama image
			<code>
			<a-scene>
			<a-sky src="puydesancy.jpg" rotation="0 -130 0"></a-sky>
			</a-scene>
			</code>

			See it running in:

			Source code

			<source lang="html4strict">
			<!DOCTYPE html>
			<html>
			<head>
			<meta charset="utf-8">
			<title>Panorama</title>
			<meta name="description" content="Panorama — A-Frame">

			<script src="https://aframe.io/releases/0.4.0/aframe.min.js"></script>

			</head>
			<body>
			<a-scene>
			<a-sky src="Mars.jpg" rotation="0 -130 0"></a-sky>
			</a-scene>
			</body>
			</html>


			</source>




			==Pannellum==
	'''[https://pannellum.org/ Pannellum] is JavaScript library for displaying and navigate panorama images on web pages.		'''[https://pannellum.org/ Pannellum] is JavaScript library for displaying and navigate panorama images on web pages.
	'''		'''

Andre: /* Interaction */

2016-12-12T17:31:14Z

Interaction

← Older revision		Revision as of 17:31, 12 December 2016
Line 73:		Line 73:
	=Interaction=		=Interaction=
	Programmatic interaction with the panorama can be achieved by using Pannellum [https://pannellum.org/documentation/api/ API]		Programmatic interaction with the panorama can be achieved by using Pannellum [https://pannellum.org/documentation/api/ API]
			* <code>viewer.getYawBounds()</code> returns the boundaries ( minimum and maximum) allowed pitches (in degrees)
	* <code>viewer.setYaw(10)</code> set Yaw to 10		* <code>viewer.setYaw(10)</code> set Yaw to 10
	* <code>viewer.setYaw(viewer.getYaw()-100)</code> get current yaw and move -100 from it		* <code>viewer.setYaw(viewer.getYaw()-100)</code> get current yaw and move -100 from it

Andre at 12:19, 12 December 2016

2016-12-12T12:19:57Z

← Older revision		Revision as of 12:19, 12 December 2016
Line 72:		Line 72:

	=Interaction=		=Interaction=
	Programmatic interaction with the panorama can be achieved by using Pannellum API		Programmatic interaction with the panorama can be achieved by using Pannellum [https://pannellum.org/documentation/api/ API]
	* <code>viewer.setYaw(10)</code> set Yaw to 10		* <code>viewer.setYaw(10)</code> set Yaw to 10
	* <code>viewer.setYaw(viewer.getYaw()-100)</code> get current yaw and move -100 from it		* <code>viewer.setYaw(viewer.getYaw()-100)</code> get current yaw and move -100 from it

			Example in https://pannellum.org/documentation/examples/custom-controls/

	[[Category:Research]] [[Category:Tutorial]]		[[Category:Research]] [[Category:Tutorial]]

Andre at 12:18, 12 December 2016

2016-12-12T12:18:47Z

← Older revision		Revision as of 12:18, 12 December 2016
Line 31:		Line 31:
	<style>		<style>

	~~/CSS for fullscreen /~~
	html {		html {
	height: 100%;		height: 100%;
Line 46:		Line 46:
	}		}
	/*		/*
	~~/* CSS for non-full screen */~~
	#panorama {		#panorama {
	width: 600px;		width: 600px;
Line 57:		Line 56:

	<div id="panorama"></div>		<div id="panorama"></div>

	<script>		<script>
	pannellum.viewer('panorama', {		viewer = pannellum.viewer('panorama', {
	"type": "equirectangular",		"type": "equirectangular",
	"panorama": "Mars.jpg",		"panorama": "Mars.jpg",
Line 64:		Line 64:
	"showFullscreenCtrl":false		"showFullscreenCtrl":false
	});		});
	</script>		</script>
	</body>
	</html>		</body>
			</html>

	</source>		</source>

			=Interaction=
			Programmatic interaction with the panorama can be achieved by using Pannellum API
			* <code>viewer.setYaw(10)</code> set Yaw to 10
			* <code>viewer.setYaw(viewer.getYaw()-100)</code> get current yaw and move -100 from it

	[[Category:Research]] [[Category:Tutorial]]		[[Category:Research]] [[Category:Tutorial]]

Andre at 12:02, 12 December 2016

2016-12-12T12:02:12Z

← Older revision		Revision as of 12:02, 12 December 2016
Line 1:		Line 1:
	[https://pannellum.org/ Pannellum] JavaScript library ~~is a panorama viewer, that allows to easily display~~ and navigate panorama images on web pages.		'''[https://pannellum.org/ Pannellum] is JavaScript library for displaying and navigate panorama images on web pages.
			'''
	In order to use Pannellum you must:		In order to use Pannellum you must:
	* Download Pannellum: https://pannellum.org/download/		* Download Pannellum: https://pannellum.org/download/

Andre: /* Example */

2016-12-12T12:01:06Z

Example

← Older revision		Revision as of 12:01, 12 December 2016
Line 18:		Line 18:
	See live example in http://publicationstation.wdka.hro.nl/pannellum/		See live example in http://publicationstation.wdka.hro.nl/pannellum/

	~~<iframe width="300px src="http://publicationstation.wdka.hro.nl/pannellum/"></iframe>~~

	==HTML code==		==HTML code==
Line 70:		Line 69:

	</source>		</source>

			[[Category:Research]] [[Category:Tutorial]]