Added folder to gui

www/WebDevPlayground/three.js/examples/ARforCIFT.js

@@ -19,6 +19,9 @@
 	var maxRange = 4.0;
 	var minRange = 0.0;
 
+	var minColor = 'red';
+	var maxColor = 'blue';
+
 	// ====Default sizes for non depictable arrows ======
 	var nonArrowLength = 0.1;
 	var nonArrowHeadLength = 0.05;
@@ -260,12 +263,12 @@
 						// look up if the length is exceedes the set limits and set arrow to specific color and shape
 						if (vecLength > arrowMaxLength){
 							vectorlist[i].arrow.setLength(nonArrowLength, nonArrowHeadLength, nonArrowHeadWidth)
-							vectorlist[i].arrow.setColor( new THREE.Color(0,0,1));
+							vectorlist[i].arrow.setColor( new THREE.Color(maxColor));
 
 						}; 
 						if (vecLength < arrowMinLength){
 							vectorlist[i].arrow.setLength(nonArrowLength, nonArrowHeadLength, nonArrowHeadWidth)
-							vectorlist[i].arrow.setColor( new THREE.Color(1,0,0));
+							vectorlist[i].arrow.setColor( new THREE.Color(minColor));
 						}
 					};
 					// set not needed arrowHelper objects invisible
@@ -299,18 +302,20 @@
 		onRenderFcts.push(function(){
 			renderer.render( scene, camera );
 		})	
-	}, 500);
+	}, 1000);
 	
 	scene.add(vectorfield)
 	
 	//==================================GUI=============================================
 	
 	var gui = new dat.GUI();
-	gui.add(controls, 'offsetX', offsetXmin, offsetXmax);
-	gui.add(controls, 'offsetY', offsetYmin, offsetYmax);
-	gui.add(controls, 'offsetZ', offsetZmin, offsetZmax);
-	gui.add(controls, 'arrowMaxLength', minRange, maxRange);
-	gui.add(controls, 'arrowMinLength', minRange, maxRange);
+	var f1 = gui.addFolder('Transformation');
+	var f2 = gui.addFolder('Max and min length control')
+	f1.add(controls, 'offsetX', offsetXmin, offsetXmax);
+	f1.add(controls, 'offsetY', offsetYmin, offsetYmax);
+	f1.add(controls, 'offsetZ', offsetZmin, offsetZmax);
+	f2.add(controls, 'arrowMaxLength', minRange, maxRange);
+	f2.add(controls, 'arrowMinLength', minRange, maxRange);