From 0c821e22d96c2aeef789e45895491c2d71542767 Mon Sep 17 00:00:00 2001
From: Amanda Ghassaei <amandaghassaei@gmail.com>
Date: Sat, 31 Jan 2015 21:05:33 -0500
Subject: [PATCH] basePlane class
---
js/models/BasePlane.js | 108 +++++++++++++++++++++++++++++++++++++
js/models/lattice.js | 15 +++++-
js/threeViews/threeView.js | 78 +--------------------------
main.html | 1 +
4 files changed, 124 insertions(+), 78 deletions(-)
create mode 100644 js/models/BasePlane.js
diff --git a/js/models/BasePlane.js b/js/models/BasePlane.js
new file mode 100644
index 00000000..9773bb61
--- /dev/null
+++ b/js/models/BasePlane.js
@@ -0,0 +1,108 @@
+/**
+ * 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
diff --git a/js/models/lattice.js b/js/models/lattice.js
index 91ac2250..0f5c22e9 100644
--- a/js/models/lattice.js
+++ b/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///////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////////
diff --git a/js/threeViews/threeView.js b/js/threeViews/threeView.js
index 2a2c35d7..a2a9f512 100644
--- a/js/threeViews/threeView.js
+++ b/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
diff --git a/main.html b/main.html
index 1a9ebc8a..93a870d5 100644
--- a/main.html
+++ b/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>
--
GitLab