moving to backbone

js/main.js

@@ -6,6 +6,22 @@
 $(function(){
 
     three = Three();
+    _.extend(three, Backbone.Events);
+    three.on("threeRender", three.render);
+    three.on("threeAdd", function(object){
+        three.scene.add(object);
+    });
+    three.on("threeRemove", function(object){
+        three.scene.remove(object);
+    });
+
+    //init models and views
+    window.fillGeometry = new FillGeometry();//init a singleton, add to global scope
+    new ImportView({model: window.fillGeometry});
+
+
+    //window.fillGeometry.set({geometry:"stuff"});
+
     setupNavBar();
     workers = persistentWorkers(8);
 

js/models/fillGeometry.js

+/**
+ * Created by aghassaei on 1/16/15.
+*/
+
+
+FillGeometry = Backbone.Model.extend({
+
+    defaults: {
+        scale: 1.0,
+        material: new THREE.MeshLambertMaterial(
+            {color:0xffa500,
+                shading: THREE.FlatShading,
+                transparent:true,
+                opacity:0.5,
+                side:THREE.DoubleSide}),
+        geometry: new THREE.BoxGeometry(100, 100, 100),
+        filename: "no file loaded",
+        dimensions: "",
+        orientation: ""
+    },
+
+    initialize: function(){
+
+        this.buildNewMesh();
+        this.renderMesh();
+
+        //bind events
+        this.on("change:mesh change:scale change:orientation", this.renderMesh);
+        this.on("change:geometry", this.buildNewMesh);
+    },
+
+    buildNewMesh:function(){
+
+        three.trigger("threeRemove", this.previous("mesh"));//remove current mesh from scene
+        this.set(_.omit(this.defaults, ["geometry", "material"]), {silent:true});//restore defaults
+        this.set(
+            {mesh: new THREE.Mesh(this.get("geometry"), this.get("material"))});
+//            _.each(workers.allWorkers, function(worker){
+//                worker.postMessage({model: JSON.stringify(e.content)});
+//            });
+    },
+
+    renderMesh: function(){
+        console.log("renderfillgeo");
+        three.trigger("threeAdd", this.get("mesh"));
+        three.trigger("threeRender");
+    },
+
+    rotate: function(axis){
+        var mesh = this.get("mesh");
+        if (axis == "x"){
+            mesh.rotateX(Math.PI/2);
+        } else if (axis == "y"){
+            mesh.rotateX(Math.PI/2);
+        } else {
+            mesh.rotateX(Math.PI/2);
+        }
+    }
+
+});
+

js/threeMain.js

@@ -77,7 +77,6 @@ function Three(){
     }
     
     function render(){
-        
       renderer.render( scene, camera );
     }
 

js/views/importView.js

+/**
+ * Created by aghassaei on 1/16/15.
+ */
+
+
+ImportView = Backbone.View.extend({
+
+    el: "#importGeometry",
+
+    events: {
+        "change #uploadMesh":               "uploadMesh",
+        "click .selectMesh":                "selectMesh",
+        "fileselect .btn-file :file":       "readDataURL",
+        "click .stlRotate":                 "rotate",
+        "slide #modelScale":                "scale"
+    },
+
+    initialize: function(){
+
+        _.bindAll(this, "render", "onMeshLoad");
+        this.model.bind("change", this.render);
+
+        this.render();
+    },
+
+    selectMesh: function(e){//select mesh from dropdown list
+        e.preventDefault();
+        var filename = $(e.target).data("file");
+        this.loadMeshFromURL('data/' + filename);
+        this.model.set("filename", filename);
+    },
+
+    uploadMesh: function(e){//select a mesh to upload
+        var input = $(e.target),
+        numFiles = input.get(0).files ? input.get(0).files.length : 1,
+        label = input.val().replace(/\\/g, '/').replace(/.*\//, '');
+        input.trigger('fileselect', [numFiles, label, input.get(0).files]);
+        input.val("");
+    },
+
+    readDataURL: function(event, numFiles, filename, files){
+        if (files.length>1) console.log("too many files selected");
+        var reader = new FileReader();
+        reader.readAsDataURL(files[0]);
+        var self = this;
+        reader.onload = (function() {
+        return function(e) {
+            self.loadMeshFromURL(e.target.result);
+            self.model.set("filename", filename);
+        }
+        })();
+    },
+
+    loadMeshFromURL: function(url){
+        var loader = new THREE.STLLoader();
+  	    loader.addEventListener('load', this.onMeshLoad);
+  	    loader.load(url);
+    },
+
+    onMeshLoad: function(e){
+        this.model.set("geometry", e.content);
+    },
+
+    scale: function(e){
+        this.model.set("scale", $(e.target).slider('getValue'));
+    },
+
+    rotate: function(e){
+        e.preventDefault();
+        var axis = $(e.target).data("axis");
+        this.model.rotate(axis);
+    },
+
+    render: function(){
+
+        console.log("renderView");
+        this.$el.html(this.template(this.model.attributes));
+
+//        $(".slider").slider({//format slider
+//            formatter: function(value) {
+//                console.log(value);
+//                return value;
+//            }
+//        });
+    },
+
+    template: _.template(
+        '<div class="row demo-row">\
+            <div class="col-xs-3">\
+            <div>\
+               <span class="btn btn-default btn-file fullWidth">\
+                    Upload STL<input id="uploadMesh" type="file">\
+               </span>\
+            </div>\
+            <div class="text-center">\
+                OR\
+            </div>\
+            <div>\
+              <div class="btn-group fullWidth">\
+                <button data-toggle="dropdown" class="btn btn-primary dropdown-toggle fullWidth" type="button">Select Model <span class="caret"></span></button>\
+                <ul role="menu" class="dropdown-menu">\
+                  <li><a class="selectMesh" data-file="Airbus_A300-600.stl" href="#">Plane</a></li>\
+                </ul>\
+              </div><!-- /btn-group -->\
+            </div>\
+            </div> <!-- /.col-xs-3 -->\
+            <div class="col-xs-9">\
+                Current File:&nbsp;&nbsp;<%= filename %><br/>\
+                <%= dimensions %>\
+                <div>Change model scale:</div>\
+                <div class="col-xs-4">\
+                    <a href="#" data-axis="z" class="stlRotate btn btn-block btn-lg btn-default">Rotate X</a>\
+                </div>\
+                <div class="col-xs-4">\
+                    <a href="#" data-axis="y" class="stlRotate btn btn-block btn-lg btn-default">Rotate Y</a>\
+                </div>\
+                <div class="col-xs-4">\
+                    <a href="#" data-axis="x" class="stlRotate btn btn-block btn-lg btn-default">Rotate Z</a>\
+                </div>\
+            </div>\
+        </div>')
+
+
+});
\ No newline at end of file

main.html

@@ -2,7 +2,7 @@
 <html>
 <head>
 
-    <title>Title</title>
+    <title></title>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <script src="js/analytics.js"></script>
@@ -11,7 +11,7 @@
     <script src="dependencies/jquery-2.1.3.js"></script>
     <script src="dependencies/underscore.js"></script>
 
-    <!--backbone model view framework-->
+    <!--backbone model/view framework-->
     <script src="dependencies/backbone.js"></script>
 
     <!--flatUI bootstrap theme-->
@@ -40,9 +40,18 @@
     <script src="js/persistentWorkers.js"></script><!--global workers-->
 
     <script src="js/main.js"></script>
+
+    <!--models-->
+    <script src="js/models/fillGeometry.js"></script>
+
+    <!--views-->
+    <script src="js/views/importView.js"></script>
+
+
+
     <script src="dependencies/loaders/STLLoader.js"></script>
-    <script src="js/views/importMenu.js"></script>
-    <script src="js/views/elementMenu.js"></script>
+    <!--<script src="js/views/importMenu.js"></script>-->
+    <!--<script src="js/views/elementMenu.js"></script>-->
     <script src="js/views/exportMenu.js"></script>
     <script src="js/views/navbar.js"></script>
     <link rel="stylesheet" type="text/css" href="css/main.css">
@@ -87,40 +96,6 @@
     </div><!-- /.navbar-collapse -->
   </nav>
 <div id="importGeometry" class="row navMenu">
-    <div class="row demo-row">
-        <div class="col-xs-3">
-        <div>
-           <span class="btn btn-default btn-file fullWidth">
-                Upload STL<input id="uploadSTL" type="file">
-           </span>
-        </div>
-        <div class="text-center">
-            OR
-        </div>
-        <div>
-          <div class="btn-group fullWidth">
-            <button data-toggle="dropdown" class="btn btn-primary dropdown-toggle fullWidth" type="button">Select Model <span class="caret"></span></button>
-            <ul role="menu" class="dropdown-menu">
-              <li><a class="stlImport" data-file="Airbus_A300-600.stl" href="#">Plane</a></li>
-            </ul>
-          </div><!-- /btn-group -->
-        </div>
-        </div> <!-- /.col-xs-3 -->
-        <div id="STLImportStats" class="col-xs-9">
-            <div id="STLFilename"></div><br/><div id="meshDimensions"></div>
-            <div>Change model scale:</div>
-            <input id="stlModelScale" type="text" data-slider-min="0.0" data-slider-max="20" data-slider-step="0.1" data-slider-value="1"/>
-            <div class="col-xs-4">
-                <a href="#" id="stlRotateX" class="btn btn-block btn-lg btn-default">Rotate X</a>
-            </div>
-            <div class="col-xs-4">
-                <a href="#" id="stlRotateY" class="btn btn-block btn-lg btn-default">Rotate Y</a>
-            </div>
-            <div class="col-xs-4">
-                <a href="#" id="stlRotateZ" class="btn btn-block btn-lg btn-default">Rotate Z</a>
-            </div>
-        </div>
-    </div>
 </div>
 <div id="element" class="row navMenu">
     <div class="row demo-row">