basePlane class

js/models/BasePlane.js

+/**
+ * Created by aghassaei on 1/31/15.
+ */
+
+
+BasePlane = Backbone.Model.extend({
+
+    defaults: {
+        zIndex: 0,
+        mesh: null,
+        dimX: 100,
+        dimY: 100,
+        material: new THREE.MeshBasicMaterial({color:0x000000, transparent:true, opacity:0.2, wireframe:true, side:THREE.DoubleSide})
+    },
+
+    //pass in fillGeometry
+
+    initialize: function(options){
+
+        //draw mesh
+        this.set("mesh", this._makeBasePlaneMesh(options.cellType, options.connectionType, options.scale));
+        this._showMesh();
+
+    },
+
+    updateGeometry: function(cellType, connectionType, scale){
+        this._removeMesh();
+        this.set("mesh", this._makeBasePlaneMesh(cellType, connectionType, scale));
+        this._showMesh();
+    },
+
+    updateScale: function(scale){
+
+    },
+
+    _makeBasePlaneMesh: function(cellType, connectionType, scale){
+        if (cellType == "cube"){
+            return this._createGridMesh();
+        } else if (cellType == "octa"){
+            if (connectionType == "face"){
+                return this._createOctaFaceMesh(scale);
+            } else if (connectionType == "edge"){
+
+            } else if (connectionType == "vertex"){
+
+            }
+        }
+    },
+
+    _createOctaFaceMesh: function(scale){
+
+        var geometry = new THREE.Geometry();
+
+        var vertices = geometry.vertices;
+        var faces = geometry.faces;
+
+        var triangleHeight = scale/2*Math.sqrt(3);
+        var dimX = this.get("dimX");
+        var dimY = this.get("dimY");
+
+        for (var j=-dimX;j<=dimX;j++){
+            for (var i=-dimY;i<=dimY;i++){
+
+                var xOffset = 0;
+                if (Math.abs(j)%2==1) xOffset = scale/2;
+                vertices.push(new THREE.Vector3(i*scale + xOffset, j*triangleHeight, 0));
+
+                if (j == -dimX || i == -dimY) continue;
+
+                var currentOffset = vertices.length;
+
+                if (Math.abs(j)%2==1){
+//                        faces.push(new THREE.Face3(currentOffset-1, currentOffset-2, currentOffset-2-2*baseDim));
+                    faces.push(new THREE.Face3(currentOffset-2, currentOffset-3-2*dimX, currentOffset-2-2*dimY));
+                } else {
+                    faces.push(new THREE.Face3(currentOffset-1, currentOffset-3-2*dimX, currentOffset-2-2*dimY));
+//                        faces.push(new THREE.Face3(currentOffset-1, currentOffset-2, currentOffset-3-2*baseDim));
+                }
+
+            }
+
+        }
+        geometry.computeFaceNormals();
+
+        return new THREE.Mesh(geometry, this.get("material"));
+    },
+
+    _createGridMesh: function(){
+
+    },
+
+    _showMesh: function(){
+        window.three.sceneAdd(this.get("mesh"), "basePlane");
+        window.three.render();
+    },
+
+    _removeMesh: function(){
+        window.three.sceneRemove(this.get("mesh"), "basePlane");
+    },
+
+
+    destroy: function(){
+        this.set("zIndex", null);
+        this.set("mesh", null);
+        this.set("material, null");
+    }
+
+});
\ No newline at end of file

js/models/lattice.js

@@ -15,7 +15,8 @@ Lattice = Backbone.Model.extend({
         cellsMax: {x:0, y:0, z:0},//max position of cells matrix
         numCells: 0,
         partType: "triangle",
-        cellMode: "cell"
+        cellMode: "cell",
+        basePlane: null//plane to build from
     },
 
     //pass in fillGeometry
@@ -25,6 +26,11 @@ Lattice = Backbone.Model.extend({
         //bind events
         this.listenTo(this, "change:cellMode", this._cellModeDidChange);
         this.listenTo(this, "change:scale", this._scaleDidChange);
+        this.listenTo(this, "change:cellType, change:connectionType", this._changeLatticeStructure);
+
+        this.set("basePlane", new BasePlane({cellType:this.get("cellType"),
+            connectionType:this.get("connectionType"),
+            scale:this.get("scale")}));
     },
 
     ////////////////////////////////////////////////////////////////////////////////////
@@ -92,7 +98,9 @@ Lattice = Backbone.Model.extend({
         this.set("cells", this.defaults.cells);
         this.set("cellsMax", this.defaults.cellsMax);
         this.set("cellsMin", this.defaults.cellsMin);
+        this.set("nodes", this.defaults.nodes);
         this.set("numCells", 0);
+        this.get("basePlane").set("zIndex", 0);
         window.three.render();
     },
 
@@ -204,6 +212,11 @@ Lattice = Backbone.Model.extend({
         window.three.render();
     },
 
+    _changeLatticeStructure: function(){
+        this.clearCells();
+        this.get("basePlane").updateGeometry(this.get("cellType"), this.get("connectionType"), this.get("scale"));
+    },
+
     ////////////////////////////////////////////////////////////////////////////////////
     ////////////////////////////////////UTILS///////////////////////////////////////////
     ////////////////////////////////////////////////////////////////////////////////////

js/threeViews/threeView.js

@@ -21,8 +21,6 @@ ThreeView = Backbone.View.extend({
     currentIntersectedCell: null,
     currentIntersectedPart:null,
 
-    basePlane: null,//plane to draw on
-
     el: "#threeContainer",
 
     controls: null,
@@ -32,10 +30,9 @@ ThreeView = Backbone.View.extend({
         this.lattice = options.lattice;
         this.appState = options.appState;
 
-        _.bindAll(this, "_animate", "_mouseMoved", "_drawBasePlane");
+        _.bindAll(this, "_animate", "_mouseMoved");
 
         //bind events
-        this.listenTo(this.lattice, "change:type change:scale", this._drawBasePlane);
         this.listenTo(this.appState, "change:deleteMode change:extrudeMode change:shift", this._setControlsEnabled);
 
         this.controls = new THREE.OrbitControls(this.model.camera, this.$el.get(0));
@@ -43,8 +40,6 @@ ThreeView = Backbone.View.extend({
 
         this.$el.append(this.model.domElement);//render only once
 
-        this.basePlane = this._drawBasePlane();
-
         //init highlighter
         this.highlighter = this._initHighlighter();
         window.three.sceneAdd(this.highlighter, null);
@@ -222,77 +217,6 @@ ThreeView = Backbone.View.extend({
             this.highlighter.visible = false;
             window.three.render();
         }
-    },
-
-    _drawBasePlane: function(){
-
-        if (this.basePlane) window.three.sceneRemove(this.basePlane, "basePlane");
-
-        var type = this.lattice.get("cellType");
-        var connectionType = this.lattice.get("connectionType");
-
-        var baseDim = 100;
-        var gridSize = this.lattice.get("scale");
-        var geometry = new THREE.Geometry();
-        var planeMaterial = new THREE.MeshBasicMaterial({color:0x000000, transparent:true, opacity:0.2, wireframe:true, side:THREE.DoubleSide});
-
-        var vertices = geometry.vertices;
-        var faces = geometry.faces;
-
-        if (type == "octa" && (connectionType == "face" || connectionType == "edge")){
-
-            var triangleHeight = gridSize/2*Math.sqrt(3);
-
-            for (var j=-baseDim;j<=baseDim;j++){
-                for (var i=-baseDim;i<=baseDim;i++){
-
-                    var xOffset = 0;
-                    if (Math.abs(j)%2==1) xOffset = gridSize/2;
-                    vertices.push(new THREE.Vector3(i*gridSize + xOffset, j*triangleHeight, 0));
-
-                    if (j==-baseDim || i==-baseDim) continue;
-
-                    var currentOffset = vertices.length;
-
-                    if (Math.abs(j)%2==1){
-//                        faces.push(new THREE.Face3(currentOffset-1, currentOffset-2, currentOffset-2-2*baseDim));
-                        faces.push(new THREE.Face3(currentOffset-2, currentOffset-3-2*baseDim, currentOffset-2-2*baseDim));
-                    } else {
-                        faces.push(new THREE.Face3(currentOffset-1, currentOffset-3-2*baseDim, currentOffset-2-2*baseDim));
-//                        faces.push(new THREE.Face3(currentOffset-1, currentOffset-2, currentOffset-3-2*baseDim));
-                    }
-
-                }
-
-            }
-
-
-        } else if (type == "octa" && connectionType == "vertex"){
-
-//            geometry.vertices.push(new THREE.Vector3(-baseSize, 0, 0));
-//            geometry.vertices.push(new THREE.Vector3(baseSize, 0, 0));
-//
-//            for ( var i = 0; i <= baseSize/gridSize; i ++ ) {
-//
-//                var line = new THREE.Line(geometry, linesMaterial);
-//                line.position.y = (i * gridSize) - baseSize;
-//                window.three.sceneAdd(line);
-//
-//                line = new THREE.Line(geometry, linesMaterial);
-//                line.position.x = (i * gridSize) - baseSize;
-//                line.rotation.z = 90 * Math.PI / 180;
-//                window.three.sceneAdd(line);
-//            }
-        }
-
-        geometry.computeFaceNormals();
-
-        var basePlane = new THREE.Mesh(geometry, planeMaterial);
-        window.three.sceneAdd(basePlane, "basePlane");
-        window.three.render();
-
-        if (this.basePlane) this.basePlane = basePlane;
-        return basePlane;
     }
 
 });
\ No newline at end of file

main.html

@@ -54,6 +54,7 @@
     <script src="js/models/AppState.js"></script>
     <script src="js/models/threeModel.js"></script>
     <script src="js/models/fillGeometry.js"></script>
+    <script src="js/models/BasePlane.js"></script>
     <script src="js/models/lattice.js"></script>
     <script src="js/models/extrudeVisualizer.js"></script>