LBS Quickstart: 360 Degree Views

Scan this marker with
junaio to see what you are
getting in this tutorial.

What should you have done by now?

360° Image
  1. You should have followed the "Hello World POI" - Tutorial
  2. You should have followed the "Location-Based 3D Objects" - Tutorial

What will you learn?

Scan the QR Code on the right with junaio to see what you are getting.

  • Create 360° Channel
  • Using Customization idle to start a sound on start

Download

NOTE: The information provided here is with an image created with Photosynth by Microsoft (available in the App Store for free). Feel free to create your own image, downscale it to 2048x1024 or lower and use it with the model provided here.

Get started

  1. Within this tutorial, it will be shown, how you can create a 360° experience to your user. Basically, a user will then have the chance to look around with his/her mobile device and look through a different space.

    Most important is the modeling part for this tutorial. You will have to create a model that is placed around the user, with a picture textured on the inside. Depending on the way the picture was created, different models are to be applied. Most of the time cubes or spheres are used.

    For this example adjust the search.php to simple return one model by calling the create360POI() - Method. Note that the model is scaled quite big to be rendered around the user.

$poi = new SinglePOI();
$poi = $jPoiBuilder->create360POI(
		"360", //name
		"0,0,-1500", //translation
		WWW_ROOT . "/resources/360_new.md2_enc", //mainresource
		WWW_ROOT . "/resources/photo.JPG", //resource
		40000, //size
		"", //description
		"",//thumbnail
		"360",//id
		"1.57,0,0", //orientation
		"click" //interactionfeedback

);

$jPoiBuilder->outputPOI($poi);
  1. To start the sound, once the channel is opened, please add the following customization to your POI.
$cust = new Customization();
$cust->setName("StartSound");
$cust->setType("sound");
$cust->setNodeID("idle");
$cust->setValue(WWW_ROOT . "/resources/channelOpenTest.mp3");

$poi->addCustomization($cust);

  1. Please have a look at Interactionsfor more information on customizations to link to sounds, movies, websites on clicking a model or opening the channel.

    Do not forget to frame this in the start() and end() call and you are actually done already, so the entire search.php looks like this:
<?php

require_once '../library/poibuilder.class.php';
 
//get the position of the user (see pois/search in the documentation)
if(!empty($_GET['l']))
	$position = explode(",", $_GET['l']);
else
trigger_error("user position (l) missing. For testing, please provide a 'l' GET parameter with your request. e.g. pois/search/?l=23.34534,11.56734,0");

$jPoiBuilder = new JunaioBuilder($position, MAX_DISTANCE);
//start the output and output buffering
$jPoiBuilder->start();
$poi = new SinglePOI();
$poi = $jPoiBuilder->create360POI(
		"360", //name
		"0,0,-1500", //translation
		WWW_ROOT . "/resources/360_new.md2_enc", //mainresource
		WWW_ROOT . "/resources/photo.JPG", //resource
		40000,
		"",
		"",
		"360",
		"1.57,0,0"
);

//start the sound once the channel is opened
$cust = new Customization();
$cust->setName("StartSound");
$cust->setType("sound");
$cust->setNodeID("idle");
$cust->setValue(WWW_ROOT . "/resources/channelOpenTest.mp3");

//add this customization to the POI
$poi->addCustomization($cust);

//send the POI to the client
$jPoiBuilder->outputPOI($poi);

//end xml and output buffering 
$jPoiBuilder->end();
© metaio Inc. 2013