Fix icon

resources/json/sample.json

@@ -1,5 +1,5 @@
 {
-	"startLocation": 2,
+	"startLocation": 1,
 	"maps": [
 		{
 			"uid": 1,
@@ -58,6 +58,16 @@
 				"posX": -61,
 				"posY": 114,
 				"posZ": 145
+			},
+			{
+				"uid": 1,
+				"title": "Title",
+				"tooltip": "Information",
+			 	"text": "Example with audio.",
+				"audio": "resources/audio/audiosample",
+				"posX": 15.990196593435574,
+				"posY": -102.75193814694006,
+				"posZ": -170.41940189961457
 			}
 		  ]
 		},

src/hotspot.js

@@ -15,6 +15,7 @@ Hotspot = function (parameters) {
 	this.infoContent = parameters.hasOwnProperty('content') ? parameters['content'] : "No content";
 	this.infoTitle = parameters.hasOwnProperty('title') ? parameters['title'] : "";
 	this.infoImages = parameters.hasOwnProperty('images') ? parameters['images'] : null;
+	this.uid = parameters['uid'];
 
 
 	this.tooltip = parameters.hasOwnProperty('tooltip') ? parameters['tooltip'] : null;
@@ -23,7 +24,7 @@ Hotspot = function (parameters) {
 	// setting size and material of hotspot icon in panorama
 	var geometry = new THREE.PlaneGeometry(16, 16);
 	var material = new THREE.MeshBasicMaterial({
-		map: THREE.ImageUtils.loadTexture("resources/icons/information.png"),
+		map: THREE.ImageUtils.loadTexture("http://vtour.local.com/app/bower_components/virtualTour/resources/icons/information.png"),
 		transparent: true
 
 	});

src/lib/location_loader.js

@@ -35,7 +35,7 @@ LocationLoader.prototype.loadLocation = function (uid, onLoadComplete) {
 			imgUrl = item.image.hq;
 		}
 
-
+		THREE.ImageUtils.crossOrigin = '';
 		THREE.ImageUtils.loadTexture(imgUrl,
 			{},
 			function (texture) {
@@ -54,7 +54,9 @@ LocationLoader.prototype.loadLocation = function (uid, onLoadComplete) {
 						title: hData.title,
 						images: hData.images,
 						audio: hData.audio,
-						tooltip: hData.tooltip
+						tooltip: hData.tooltip,
+						type:hData.type,
+						uid:hData.uid
 					};
 					location.addHotspot(hParam);
 				});

src/panorama.js

@@ -25,22 +25,35 @@ var panoramaData;
 var isLoading = false;
 var lastPanoramaUID = -1;
 var mapUid = 0;
+var showHotspotOptions = false;
 
 var toolTip;
 
 var timerId;
+var container;
 var resolution = "default";
 
 /**
  * Starts panorama, creates a loading scene and triggers the loading of the start location. Starts animating.
  * @param dataURL URL to the config JSON
  */
-function startPanorama(dataURL, res) {
+// function startPanorama(dataURL, res) {
+// 	resolution = res;
+// 	setMapandNavigationHidden(true);
+// 	init();
+// 	isLoading = true;
+// 	parseConfigJSON(dataURL, function (data) {
+// 		var loader = new LocationLoader();
+// 		loader.loadLocation(data.startLocation, startComplete);
+// 	});
+// 	animate();
+// }
+function startPanorama(jsonData, res) {
 	resolution = res;
 	setMapandNavigationHidden(true);
 	init();
 	isLoading = true;
-	parseConfigJSON(dataURL, function (data) {
+	parseConfigJSON(jsonData, function (data) {
 		var loader = new LocationLoader();
 		loader.loadLocation(data.startLocation, startComplete);
 	});
@@ -59,24 +72,43 @@ function initTooltip() {
  * @param dataURL URL to config JSON.
  * @param callback function that gets called after parsing is finished.
  */
-function parseConfigJSON(dataURL, callback) {
-	var request = new XMLHttpRequest();
-	request.open("GET", dataURL, true);
-	request.onreadystatechange = function () {
-		if (request.readyState === 4 && request.status === 200) {
-			panoramaData = JSON.parse(request.responseText);
+function parseConfigJSON(jsonData, callback) {
+	// var request = new XMLHttpRequest();
+	// request.open("GET", dataURL, true);
+	// request.onreadystatechange = function () {
+		// if (request.readyState === 4 && request.status === 200) {
+		// console.log(jsonData);
+			// panoramaData = JSON.parse(jsonData);
+			panoramaData = jsonData;
 			callback(panoramaData);
-		}
-	};
-	request.send(null);
+	// 	}
+	// };
+	// request.send(null);
 }
+// function parseConfigJSON(dataURL, callback) {
+// 	var request = new XMLHttpRequest();
+// 	request.open("GET", dataURL, true);
+// 	request.onreadystatechange = function () {
+// 		if (request.readyState === 4 && request.status === 200) {
+// 			panoramaData = JSON.parse(request.responseText);
+// 			callback(panoramaData);
+// 		}
+// 	};
+// 	request.send(null);
+// }
+
 
 
 /**
  * Initializes renderer, camera, projector, tooltip
  */
 function init() {
-	camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 200);
+	container = _('panorama');
+	divWidth = container.offsetWidth
+	divHeight = window.innerHeight-(window.innerHeight*20/100);
+	// console.log(window.innerWidth);
+	// console.log(divHeight);
+	camera = new THREE.PerspectiveCamera(60, divWidth / divHeight, 1, 200);
 	camera.target = new THREE.Vector3(0, 0, 1);
 	// initialize object to perform world/screen calculations
 	projector = new THREE.Projector();
@@ -85,8 +117,8 @@ function init() {
 	} else {
 		renderer = new THREE.CanvasRenderer();
 	}
-	renderer.setSize(window.innerWidth, window.innerHeight);
-	var container = _('panorama');
+	renderer.setSize(divWidth, divHeight);
+	// var container = _('panorama');
 	container.appendChild(renderer.domElement);
 	initTooltip()
 }
@@ -180,7 +212,7 @@ function transitToLocation(locationIndex, reset) {
  */
 function initEventListener() {
 	var container = _('panorama');
-	THREEx.FullScreen.bindKey({charCode: 'f'.charCodeAt(0), element: _('panorama')});
+	// THREEx.FullScreen.bindKey({charCode: 'f'.charCodeAt(0), element: _('panorama')});
 
 	container.addEventListener('mousedown', onMouseDown, false);
 	container.addEventListener('mousemove', onMouseMove, false);
@@ -205,6 +237,7 @@ function initEventListener() {
 	}, false);
 	container.addEventListener('drop', function (event) {
 		event.preventDefault();
+		return false;
 		var reader = new FileReader();
 		reader.addEventListener('load', function (event) {
 			material.map.image.src = event.target.result;
@@ -368,9 +401,10 @@ function setMapandNavigationHidden(hidden) {
  * @param event not used.
  */
 function onWindowResize(event) {
-	camera.aspect = window.innerWidth / window.innerHeight;
+	divHeight = window.innerHeight-(window.innerHeight*20/100);
+	camera.aspect = divWidth / divHeight;
 	camera.updateProjectionMatrix();
-	renderer.setSize(window.innerWidth, window.innerHeight);
+	renderer.setSize(divWidth, divHeight);
 }
 
 /**
@@ -380,7 +414,7 @@ function onWindowResize(event) {
 function onMouseDown(event) {
 	var eventX = event.pageX;
 	var eventY = event.pageY;
-	downEventHandler(eventX, eventY, event);
+	// downEventHandler(eventX, eventY, event);
 }
 
 /**
@@ -390,7 +424,7 @@ function onMouseDown(event) {
 function onMouseMove(event) {
 	var eventX = event.pageX;
 	var eventY = event.pageY;
-	moveEventHandler(eventX, eventY, event);
+	// moveEventHandler(eventX, eventY, event);
 }
 
 /**
@@ -451,16 +485,16 @@ function onDocumentTouchEnd(event) {
 
 function moveEventHandler(eventX, eventY, event) {
 	// Position of toolTips
-	toolTip.style.left = eventX + 20 + "px";
-	toolTip.style.top = eventY + 20 + "px";
+	toolTip.style.left = mouseX + 20 + "px";
+	toolTip.style.top = mouseY + 20 + "px";
 
 	if (isPopupOpen) {
 		return;
 	}
-
-	mouse.x = ( eventX / window.innerWidth ) * 2 - 1;
-	mouse.y = -( eventY / window.innerHeight ) * 2 + 1;
-
+	// mouse.x = ( eventX / window.innerWidth ) * 2 - 1;
+	// mouse.y = -( eventY / window.innerHeight ) * 2 + 1;
+	mouse.x = (mouseX/ renderer.domElement.width ) * 2 - 1;
+	mouse.y = - ( mouseY / renderer.domElement.height ) * 2 + 1;
 	if (isUserInteracting === true) {
 		lonFactor = mouse.x;
 		latFactor = mouse.y;
@@ -472,7 +506,7 @@ function moveEventHandler(eventX, eventY, event) {
 
 		// create an array containing all objects in the scene with which the ray intersects
 		var intersects = ray.intersectObjects(targetList);
-
+		// console.log(targetList);
 		// if there is one (or more) intersections
 		if (intersects.length > 0) {
 			if (intersects[0].object != hoverIntersected) {
@@ -511,18 +545,22 @@ function moveEventHandler(eventX, eventY, event) {
  * @param eventY y-Value of event
  * @param event input event
  */
+ var mouseX,mouseY,showHotspotOptions;
 function downEventHandler(eventX, eventY, event) {
 	if (isPopupOpen) {
 		return;
 	}
-	event.preventDefault();
 
+	event.preventDefault();
+
 	// update the mouse variable
 	// canvas position has to be 'static'
-	//mouse.x = ( ( eventX - renderer.domElement.offsetLeft ) / renderer.domElement.width ) * 2 - 1;
-	//mouse.y = - ( ( eventY - renderer.domElement.offsetTop ) / renderer.domElement.height ) * 2 + 1;
-	mouse.x = ( eventX / window.innerWidth ) * 2 - 1;
-	mouse.y = -( eventY / window.innerHeight ) * 2 + 1;
+	mouse.x = (mouseX/ renderer.domElement.width ) * 2 - 1;
+	mouse.y = - ( mouseY / renderer.domElement.height ) * 2 + 1;
+	// mouse.x = ( ( eventX - renderer.domElement.offsetLeft ) / renderer.domElement.width ) * 2 - 1;
+	// mouse.y = - ( ( eventY - renderer.domElement.offsetTop ) / renderer.domElement.height ) * 2 + 1;
+	// mouse.x = ( eventX / window.innerWidth ) * 2 - 1;
+	// mouse.y = -( eventY / window.innerHeight ) * 2 + 1;
 
 	// find intersections
 	// create a Ray with origin at the mouse position
@@ -532,14 +570,21 @@ function downEventHandler(eventX, eventY, event) {
 	var ray = new THREE.Raycaster(camera.position, vector.sub(camera.position).normalize());
 
 	// create an array containing all objects in the scene with which the ray intersects
-	var intersects = ray.intersectObjects(targetList);
+	if(showHotspotOptions){
+		var intersects = ray.intersectObjects(scene.children);	
+	}else{
+		var intersects = ray.intersectObjects(targetList);	
+	}
 
 	// if there is one (or more) intersections
 	if (intersects.length > 0) {
-		intersects[0].object.onClick();
+
 		if (intersects[0].object instanceof Hotspot) {
+			intersects[0].object.onClick();
 			isPopupOpen = true;
-		}
+			}else{
+				return intersects[0].point;
+			}
 	} else {
 		lonFactor = mouse.x;
 		latFactor = mouse.y;
@@ -771,8 +816,4 @@ function _(id) {
  */
 function vectorToString(v) {
 	return "[ " + v.x + ", " + v.y + ", " + v.z + " ]";
-}
-
-
-
-
+}

src/transition.js

@@ -17,7 +17,7 @@ Transition = function (parameters) {
 
 	var geometry = new THREE.PlaneGeometry(15, 15);
 	var material = new THREE.MeshBasicMaterial({
-		map: THREE.ImageUtils.loadTexture("resources/icons/transfer.png"),
+		map: THREE.ImageUtils.loadTexture("http://vtour.local.com/app/bower_components/virtualTour/resources/icons/transfer.png"),
 		transparent: true
 	});
 	THREE.Mesh.call(this, geometry, material);