toggle mesh vis

index.html

@@ -423,18 +423,24 @@
         <div class="indent">
             Mesh Material:
             <div class="indent">
-                <label class="radio">
-                    <input name="colorMode" value="color" data-toggle="radio" class="custom-radio" type="radio"><span class="icons"><span class="icon-unchecked"></span><span class="icon-checked"></span></span>
-                    Colored Material
+                <label class="checkbox" for="meshVisible">
+                    <input id="meshVisible" data-toggle="checkbox" class="custom-checkbox layersSelector" type="checkbox"><span class="icons"><span class="icon-unchecked"></span><span class="icon-checked"></span></span>
+                    Mesh Visible
                 </label>
-                <div id="coloredMaterialOptions" class="indent">
-                    <label>Color 1 (rgb hex): &nbsp;&nbsp;</label><input id="color1" value="" placeholder="" class="hexVal form-control" type="text"><br/>
-                    <label>Color 2 (rgb hex): &nbsp;&nbsp;</label><input id="color2" value="" placeholder="" class="hexVal form-control" type="text"><br/>
+                <div id="meshMaterialOptions">
+                    <label class="radio">
+                        <input name="colorMode" value="color" data-toggle="radio" class="custom-radio" type="radio"><span class="icons"><span class="icon-unchecked"></span><span class="icon-checked"></span></span>
+                        Colored Material
+                    </label>
+                    <div id="coloredMaterialOptions" class="indent">
+                        <label>Color 1 (rgb hex): &nbsp;&nbsp;</label><input id="color1" value="" placeholder="" class="hexVal form-control" type="text"><br/>
+                        <label>Color 2 (rgb hex): &nbsp;&nbsp;</label><input id="color2" value="" placeholder="" class="hexVal form-control" type="text"><br/>
+                    </div>
+                    <label class="radio">
+                        <input name="colorMode" value="normal" data-toggle="radio" class="custom-radio" type="radio"><span class="icons"><span class="icon-unchecked"></span><span class="icon-checked"></span></span>
+                        Face Normals Material
+                    </label>
                 </div>
-                <label class="radio">
-                    <input name="colorMode" value="normal" data-toggle="radio" class="custom-radio" type="radio"><span class="icons"><span class="icon-unchecked"></span><span class="icon-checked"></span></span>
-                    Face Normals Material
-                </label>
             </div><br/>
             Edges:
             <div class="indent">

js/controls.js

@@ -119,6 +119,13 @@ function initControls(globals){
         globals.model.updateEdgeVisibility();
     });
 
+    setCheckbox("#meshVisible", globals.meshVisible, function(val){
+        globals.meshVisible = val;
+        globals.model.updateMeshVisibility();
+        if (globals.meshVisible) $("#meshMaterialOptions").show();
+        else $("#meshMaterialOptions").hide();
+    });
+
     function setButtonGroup(id, callback){
         $(id+" a").click(function(e){
             e.preventDefault();

js/globals.js

@@ -14,6 +14,7 @@ function initGlobals(){
         color1: "ec008b",
         color2: "dddddd",
         edgesVisible: true,
+        meshVisible: true,
 
         //flags
         fixedHasChanged: false,

js/model.js

@@ -27,6 +27,10 @@ function initModel(globals){
         }
     }
 
+    function updateMeshVisibility(){
+        object3D.visible = globals.meshVisible;
+    }
+
     var geometry = new THREE.Geometry();
     geometry.dynamic = true;
     var object3D = new THREE.Mesh(geometry, material);
@@ -231,6 +235,7 @@ function initModel(globals){
         getObjectsToIntersect: getObjectsToIntersect,
         setMeshMaterial: setMeshMaterial,
         updateEdgeVisibility: updateEdgeVisibility,
+        updateMeshVisibility: updateMeshVisibility,
         getGeometry: getGeometry
     }
 }
\ No newline at end of file