diff --git a/js/models/extrudeVisualizer.js b/js/models/extrudeVisualizer.js new file mode 100644 index 0000000000000000000000000000000000000000..e58d4c02b13ada65f7747cf1772a116c64e9e41a --- /dev/null +++ b/js/models/extrudeVisualizer.js @@ -0,0 +1,51 @@ +/** + * Created by aghassaei on 1/22/15. + */ + + +function ExtrudeVisualizer(){ + + var triRad = 30*Math.sqrt(3)/4; + var geometry = new THREE.CylinderGeometry(triRad, triRad, 1, 3);//1 unit tall + geometry.applyMatrix(new THREE.Matrix4().makeRotationX(Math.PI/2)); + var material = new THREE.MeshBasicMaterial({color:0xff0000, transparent:true, opacity:0.2}); + var meshes = []; + + function makeMeshFromProfile(profiles){//profiles is an array of meshes + _.each(profiles, function(profile){ + var mesh = new THREE.Mesh(geometry, material); + var profilePos = profile.geometry.vertices[0]; + mesh.position.x = profilePos.x; + mesh.position.y = profilePos.y; + mesh.position.z = profilePos.z; + window.three.sceneAdd(mesh, false); + meshes.push(mesh); + }); + window.three.render(); + } + + function makeHandle(){ + + } + + function getMeshNum(){ + return meshes.length; + } + + function dragHandle(height){ + _.each(meshes, function(mesh){ + mesh.scale.z = height; + }) + window.three.render(); + } + + function renderIntoCells(){ + + } + + return {//return public properties/methods + makeMeshFromProfile:makeMeshFromProfile, + getMeshNum:getMeshNum, + dragHandle:dragHandle + } +} \ No newline at end of file diff --git a/js/models/lattice.js b/js/models/lattice.js index 3232ae4ed6f58cca8b79b8f482829fd139901654..0d1aee28e00102ff2f6c20d2065ccdb176d735f8 100644 --- a/js/models/lattice.js +++ b/js/models/lattice.js @@ -24,6 +24,11 @@ Lattice = Backbone.Model.extend({ window.three.render(); }, + removeCell: function(object){ + window.three.sceneRemove(object); + window.three.render(); + }, + clearCells: function(){ _.each(this.get("cells"), function(cell){ cell.remove(); diff --git a/js/models/threeModel.js b/js/models/threeModel.js index 1623aef7b56d2b0ae8064242c3f12ba15386202d..9b91ba5d97b1bd3f5aa3440f373a0da27c9cee62 100644 --- a/js/models/threeModel.js +++ b/js/models/threeModel.js @@ -76,7 +76,7 @@ function ThreeModel(){ render(); } - return {//return public properties + return {//return public properties/methods render:render, clearAll: clearAll, sceneRemove:sceneRemove, diff --git a/js/threeViews/threeView.js b/js/threeViews/threeView.js index f016582534947addd772778d5f44ef12c352fb02..6a95debb0bc2cfac3de3c871ff1f84d3f31b1a60 100644 --- a/js/threeViews/threeView.js +++ b/js/threeViews/threeView.js @@ -13,6 +13,8 @@ ThreeView = Backbone.View.extend({ mouseIsDown: false,//store state of mouse click shiftIsDown: false,//used to add many voxels at once deleteMode: false,//delete cells instead of adding (space bar) + extrudeMode: false,//extrude a column of cells + extrudeVisualizer: ExtrudeVisualizer(), mouseProjection: new THREE.Raycaster(), highlighter: null, currentHighlightedFace: null, @@ -75,7 +77,14 @@ ThreeView = Backbone.View.extend({ case 32://space bar this.deleteMode = state; this.controls.enabled = !state; + break; + case 69://e + this.extrudeMode = state; + this.controls.enabled = !state; + break; + default: + break; } }, @@ -95,11 +104,17 @@ ThreeView = Backbone.View.extend({ return; } + if (this.extrudeMode && this.mouseIsDown && this.extrudeVisualizer.getMeshNum()>0){ + this.extrudeVisualizer.dragHandle(1-2*(e.pageY-this.$el.offset().top)/this.$el.height()); + return; + } + //make projection vector var vector = new THREE.Vector2(2*(e.pageX-this.$el.offset().left)/this.$el.width()-1, 1-2*(e.pageY-this.$el.offset().top)/this.$el.height()); var camera = this.model.camera; this.mouseProjection.setFromCamera(vector, camera); + //check if we're intersecting anything var intersections = this.mouseProjection.intersectObjects(this.model.objects, true); if (intersections.length == 0) { @@ -115,6 +130,12 @@ ThreeView = Backbone.View.extend({ return; } + if (this.extrudeMode && this.mouseIsDown){ + if (!this.highlighter.visible) return; + this.extrudeVisualizer.makeMeshFromProfile([this.highlighter]); + return; + } + //check if we've moved to a new face var intersection = intersections[0].face; if (this.highlighter.visible && this.currentHighlightedFace == intersection) return; @@ -145,8 +166,7 @@ ThreeView = Backbone.View.extend({ if (this.deleteMode){ if (this.currentIntersectedObject === this.basePlane) return; - window.three.sceneRemove(this.currentIntersectedObject); - window.three.render(); + this.lattice.removeCell(this.currentIntersectedObject); } else { if (!this.highlighter.visible) return; this.lattice.addCell(this.highlighter.geometry.vertices[0]); @@ -234,6 +254,6 @@ ThreeView = Backbone.View.extend({ console.log("scale base plane"); - }, + } }); \ No newline at end of file diff --git a/main.html b/main.html index 5290fddf69490a09987228b08d719437e9531d26..2abde63631c49e87e1385812b73bf692d7d7dd92 100644 --- a/main.html +++ b/main.html @@ -49,6 +49,7 @@ <script src="js/models/threeModel.js"></script> <script src="js/models/fillGeometry.js"></script> <script src="js/models/lattice.js"></script> + <script src="js/models/extrudeVisualizer.js"></script> <!--views--> <script src="js/threeViews/meshHandle.js"></script>