3DHOP 2.0

3D Heirage Online Presenter
cnr-isti-vclab · Jul 2, 2015 · 3b4842e · 3b4842e
1 parent 18bed78
commit 3b4842e
Show file tree

Hide file tree

Showing 55 changed files with 3,443 additions and 1,298 deletions.
diff --git a/3dhop backward compatibility issues.pdf b/3dhop backward compatibility issues.pdf
diff --git a/3dhop.html b/3dhop.html
@@ -2,13 +2,13 @@
 <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
 <head>
 <meta content="charset=UTF-8"/>
-<title>3DHOP</title>
+<title>3DHOP - 3D Heritage Online Presenter</title>
 <!--STYLESHEET-->
 <link type="text/css" rel="stylesheet" href="stylesheet/3dhop.css"/>  
 <!--SPIDERGL-->
 <script type="text/javascript" src="js/spidergl.js"></script>
 <!--JQUERY-->
-<script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
+<script type="text/javascript" src="js/jquery.js"></script>
 <!--PRESENTER-->
 <script type="text/javascript" src="js/presenter.js"></script>
 <!--3D MODELS LOADING AND RENDERING-->
@@ -24,53 +24,55 @@
 <body>
 <div id="3dhop" class="tdhop" onmousedown="if (event.preventDefault) event.preventDefault()"><div id="tdhlg"></div>
  <div id="toolbar">
-  <img id="home"    title="Home Position" src="skins/dark/home.png"/><br/>		  
-  <img id="zoomin"  title="Zoom In"       src="skins/dark/zoomin.png"/><br/>
-  <img id="zoomout" title="Zoom Out"      src="skins/dark/zoomout.png"/><br/>
-  <img id="light"   title="Light Control" src="skins/dark/light.png"/><br/>
+  <img id="home"     title="Home"                  src="skins/dark/home.png"   /><br/>
+  <img id="zoomin"   title="Zoom In"               src="skins/dark/zoomin.png" /><br/>
+  <img id="zoomout"  title="Zoom Out"              src="skins/dark/zoomout.png"/><br/>
+  <img id="light_on" title="Disable Light Control" src="skins/dark/light_on.png" style="position:absolute; visibility:hidden;"/>
+  <img id="light"    title="Enable Light Control"  src="skins/dark/light.png"/><br/>
+  <img id="full_on"  title="Exit Full Screen"      src="skins/dark/full_on.png" style="position:absolute; visibility:hidden;"/>
+  <img id="full"     title="Full Screen"           src="skins/dark/full.png"   />
  </div>
- <canvas id="draw-canvas" style="background-image: url(skins/light/background.png)"/>
+ <canvas id="draw-canvas" style="background-image: url(skins/backgrounds/light.jpg)"/>
 </div>
 </body>
 
 <script type="text/javascript">
 var presenter = null;
 
 function setup3dhop() { 
-    presenter = new Presenter("draw-canvas");
+	presenter = new Presenter("draw-canvas");
 
 	presenter.setScene({
 		meshes: {
-			"Axis" : { url: "models/singleres/axis.ply" }			
+			"Axis" : { url: "models/singleres/axis.ply" }
 		},
 		modelInstances : {
-			"Model1" : {	mesh : "Axis" }									
+			"Model1" : { mesh : "Axis" }
 		},
 		trackball: { 
 			type : TurnTableTrackball 
 		},
 		space: {
-		  centerMode: "explicit",
-		  radiusMode: "explicit",
-		  explicitCenter: [0.0, 0.0, 0.0],
-		  explicitRadius: 100.0
+			centerMode: "explicit",
+			radiusMode: "explicit",
+			explicitCenter: [0.0, 0.0, 0.0],
+			explicitRadius: 100.0
 		}
-    });
+	});
 }
 
 function actionsToolbar(action) {
-  switch(action) {
-   case 'home'   : presenter.resetTrackball(); break;  
-   case 'zoomin' : presenter.zoomIn(); break;
-   case 'zoomout': presenter.zoomOut(); break;
-   case 'light'  : presenter.enableLightTrackball(!presenter.isLightTrackballEnabled()); lightSwitch(); break;
-  }
+	if(action=='home') presenter.resetTrackball(); 
+	else if(action=='zoomin') presenter.zoomIn();
+	else if(action=='zoomout') presenter.zoomOut(); 
+	else if(action=='light' || action=='light_on') { presenter.enableLightTrackball(!presenter.isLightTrackballEnabled()); lightSwitch(); } 
+	else if(action=='full'  || action=='full_on') fullscreenSwitch(); 
 }
 
 $(document).ready(function(){
 	init3dhop();
 
-	setup3dhop();		
+	setup3dhop();
 });
 </script>
 </html>
diff --git a/CHANGELOG.txt b/CHANGELOG.txt
@@ -0,0 +1,30 @@
+3D Heritage Online Presenter [http://www.3dhop.net] - CHANGELOG FILE
+
+3DHOP by Visual Computing Laboratory - ISTI - CNR [http://vcg.isti.cnr.it]
+
+Contact Us           [info@3dhop.net]
+
+Marco Callieri       [marco.callieri@isti.cnr.it]
+Massimiliano Corsini [massimiliano.corsini@isti.cnr.it]
+Marco Potenziani     [marco.potenziani@isti.cnr.it]
+
+24 September 2014
+
+ * --------- Main Changes -----------
+ * + Added INSTANCES and HOTSPOTS VISIBILITY features;
+ * + Added geometries PICKING and ONHOVER EVENT HANDLERS;
+ * + Added FULL SCREEN feature;
+ * = Updated UI event listener for touch screen compatibility;
+ * = Updated TOOLBAR features for faster loading and touch events support;
+ * + Added basic DOCUMENTATION;
+ * + Added HOW-TO example for VISIBILITY and HOTSPOTS-EVENTS new advanced features explanation (only in the "3DHOP Full Version" package);
+
+ * --------- Files Added/Modified -----------
+ * = Updated "spidergl.js" file;
+ * = Updated "init.js" file;
+ * = Updated "presenter.js" file;
+ * = Updated "css" file;
+ * = Updated all ".html" files;
+ * = Updated "skins" directory;
+ * + Added "docs" directory with 3DHOP documentation files;
+ * + Added how-to ".html" files for visibility and hotspots-events new advanced features explanation (only in "3DHOP Full Version" package);
diff --git a/HOWTO_0.0_html_environment.html b/HOWTO_0.0_html_environment.html
@@ -0,0 +1,52 @@
+<!DOCTYPE>
+<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
+<head>
+<meta content="charset=UTF-8"/>
+<title>3DHOP - 3D Heritage Online Presenter</title>
+<!--STYLESHEET-->
+<link type="text/css" rel="stylesheet" href="stylesheet/3dhop.css"/>  
+<!--SPIDERGL-->
+<script type="text/javascript" src="js/spidergl.js"></script>
+<!--JQUERY-->
+<script type="text/javascript" src="js/jquery.js"></script>
+<!--PRESENTER-->
+<script type="text/javascript" src="js/presenter.js"></script>
+<!--3D MODELS LOADING AND RENDERING-->
+<script type="text/javascript" src="js/nexus.js"></script>
+<script type="text/javascript" src="js/ply.js"></script>
+<!--TRACKBALLS-->
+<script type="text/javascript" src="js/trackball_sphere.js"></script>
+<script type="text/javascript" src="js/trackball_turntable.js"></script>
+<script type="text/javascript" src="js/trackball_pantilt.js"></script>
+<!--UTILITY-->
+<script type="text/javascript" src="js/init.js"></script>
+</head>
+<body>
+<div id="3dhop" class="tdhop" onmousedown="if (event.preventDefault) event.preventDefault()"><div id="tdhlg"></div>
+ <canvas id="draw-canvas" style="background-image: url(skins/backgrounds/light.jpg)"/>
+</div>
+</body>
+
+<script type="text/javascript">
+var presenter = null;
+
+function setup3dhop() { 
+	presenter = new Presenter("draw-canvas");
+
+	presenter.setScene({
+		meshes: {
+			"Gargoyle" : { url: "models/singleres/gargo.ply" }
+		},
+		modelInstances : {
+			"Model1" : { mesh : "Gargoyle" }
+		}
+	});
+}
+
+$(document).ready(function(){
+	init3dhop();
+
+	setup3dhop();
+});
+</script>
+</html>
diff --git a/HOWTO_1.0_canvas_personalization.html b/HOWTO_1.0_canvas_personalization.html
@@ -0,0 +1,73 @@
+<!DOCTYPE>
+<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
+<head>
+<meta content="charset=UTF-8"/>
+<title>3DHOP - 3D Heritage Online Presenter</title>
+<!--STYLESHEET-->
+<link type="text/css" rel="stylesheet" href="stylesheet/3dhop.css"/>  
+<!--SPIDERGL-->
+<script type="text/javascript" src="js/spidergl.js"></script>
+<!--JQUERY-->
+<script type="text/javascript" src="js/jquery.js"></script>
+<!--PRESENTER-->
+<script type="text/javascript" src="js/presenter.js"></script>
+<!--3D MODELS LOADING AND RENDERING-->
+<script type="text/javascript" src="js/nexus.js"></script>
+<script type="text/javascript" src="js/ply.js"></script>
+<!--TRACKBALLS-->
+<script type="text/javascript" src="js/trackball_sphere.js"></script>
+<script type="text/javascript" src="js/trackball_turntable.js"></script>
+<script type="text/javascript" src="js/trackball_pantilt.js"></script>
+<!--UTILITY-->
+<script type="text/javascript" src="js/init.js"></script>
+</head>
+<body>
+<div id="3dhop" class="tdhop" onmousedown="if (event.preventDefault) event.preventDefault()"><div id="tdhlg"></div>
+ <div id="toolbar">
+  <img id="home"     title="Home"                  src="skins/dark/home.png"   /><br/>
+  <img id="zoomin"   title="Zoom In"               src="skins/dark/zoomin.png" /><br/>
+  <img id="zoomout"  title="Zoom Out"              src="skins/dark/zoomout.png"/><br/>
+  <img id="light_on" title="Disable Light Control" src="skins/dark/light_on.png" style="position:absolute; visibility:hidden;"/>
+  <img id="light"    title="Enable Light Control"  src="skins/dark/light.png"/><br/>
+  <img id="full_on"  title="Exit Full Screen"      src="skins/dark/full_on.png" style="position:absolute; visibility:hidden;"/>
+  <img id="full"     title="Full Screen"           src="skins/dark/full.png"   />
+ </div>
+ <canvas id="draw-canvas" style="background-image: url(skins/backgrounds/light.jpg)"/>
+</div>
+</body>
+
+<script type="text/javascript">
+var presenter = null;
+
+function setup3dhop() { 
+	presenter = new Presenter("draw-canvas");
+
+	presenter.setScene({
+		meshes: {
+			"Gargoyle" : { url: "models/multires/gargo.nxs" }
+		},
+		modelInstances : {
+			"Model1" : { mesh : "Gargoyle" } 
+		}
+	});
+}
+
+function actionsToolbar(action) {
+	if(action=='home') presenter.resetTrackball(); 
+	else if(action=='zoomin') presenter.zoomIn();
+	else if(action=='zoomout') presenter.zoomOut(); 
+	else if(action=='light' || action=='light_on') { presenter.enableLightTrackball(!presenter.isLightTrackballEnabled()); lightSwitch(); } 
+	else if(action=='full'  || action=='full_on') fullscreenSwitch(); 
+}
+
+$(document).ready(function(){
+	init3dhop();
+
+	setup3dhop();
+
+	resizeCanvas(800,600);
+
+	moveToolbar(20,20);
+});
+</script>
+</html>
diff --git a/HOWTO_2.0_models_loading.html b/HOWTO_2.0_models_loading.html
@@ -0,0 +1,76 @@
+<!DOCTYPE>
+<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
+<head>
+<meta content="charset=UTF-8"/>
+<title>3DHOP - 3D Heritage Online Presenter</title>
+<!--STYLESHEET-->
+<link type="text/css" rel="stylesheet" href="stylesheet/3dhop.css"/>  
+<!--SPIDERGL-->
+<script type="text/javascript" src="js/spidergl.js"></script>
+<!--JQUERY-->
+<script type="text/javascript" src="js/jquery.js"></script>
+<!--PRESENTER-->
+<script type="text/javascript" src="js/presenter.js"></script>
+<!--3D MODELS LOADING AND RENDERING-->
+<script type="text/javascript" src="js/nexus.js"></script>
+<script type="text/javascript" src="js/ply.js"></script>
+<!--TRACKBALLS-->
+<script type="text/javascript" src="js/trackball_sphere.js"></script>
+<script type="text/javascript" src="js/trackball_turntable.js"></script>
+<script type="text/javascript" src="js/trackball_pantilt.js"></script>
+<!--UTILITY-->
+<script type="text/javascript" src="js/init.js"></script>
+</head>
+<body>
+<div id="3dhop" class="tdhop" onmousedown="if (event.preventDefault) event.preventDefault()"><div id="tdhlg"></div>
+ <div id="toolbar">
+  <img id="home"     title="Home"                  src="skins/dark/home.png"   /><br/>
+  <img id="zoomin"   title="Zoom In"               src="skins/dark/zoomin.png" /><br/>
+  <img id="zoomout"  title="Zoom Out"              src="skins/dark/zoomout.png"/><br/>
+  <img id="light_on" title="Disable Light Control" src="skins/dark/light_on.png" style="position:absolute; visibility:hidden;"/>
+  <img id="light"    title="Enable Light Control"  src="skins/dark/light.png"/><br/>
+  <img id="full_on"  title="Exit Full Screen"      src="skins/dark/full_on.png" style="position:absolute; visibility:hidden;"/>
+  <img id="full"     title="Full Screen"           src="skins/dark/full.png"   />
+ </div>
+ <canvas id="draw-canvas" style="background-image: url(skins/backgrounds/light.jpg)"/>
+</div>
+</body>
+
+<script type="text/javascript">
+var presenter = null;
+
+function setup3dhop() { 
+	presenter = new Presenter("draw-canvas");
+
+	presenter.setScene({
+		meshes: {
+			"Gargoyle" : { url: "models/multires/gargo.nxs" },
+			"Cage" : { url: "models/singleres/cage.ply" }
+		},
+		modelInstances : {
+			"Model1" : {
+				mesh : "Cage"
+			},
+			"Model2" : {
+				mesh : "Gargoyle"
+			}
+		}
+	});
+}
+
+function actionsToolbar(action) {
+	if(action=='home') presenter.resetTrackball(); 
+	else if(action=='zoomin') presenter.zoomIn();
+	else if(action=='zoomout') presenter.zoomOut(); 
+	else if(action=='light' || action=='light_on') { presenter.enableLightTrackball(!presenter.isLightTrackballEnabled()); lightSwitch(); } 
+	else if(action=='full'  || action=='full_on') fullscreenSwitch(); 
+}
+
+$(document).ready(function(){
+	init3dhop();
+
+	setup3dhop();
+});
+</script>
+
+</html>