diff --git a/js/main.js b/js/main.js
index ec7d27621ba958a1c305c55e68e5b28db579d820..d11e8da7b724c4f29f996fb7391cb6324fd49c37 100644
--- a/js/main.js
+++ b/js/main.js
@@ -7,7 +7,8 @@ $(function(){
window.workers = persistentWorkers(8);
- var three = new ThreeView();//singleton, my threejs view
+ var threeModel = new ThreeModel();
+ var three = new ThreeView({model:threeModel});//singleton, my threejs view
//init models and views
var fillGeometry = new FillGeometry();//singleton, mesh to fill with lattice
diff --git a/js/models/threeModel.js b/js/models/threeModel.js
new file mode 100644
index 0000000000000000000000000000000000000000..e7f2480b68dcc11f5f28744824b3a7c1da1d98cd
--- /dev/null
+++ b/js/models/threeModel.js
@@ -0,0 +1,91 @@
+/**
+ * Created by aghassaei on 1/17/15.
+ */
+
+
+function ThreeModel(){
+
+ var camera = new THREE.PerspectiveCamera(60, window.innerWidth/window.innerHeight, 1, 1000);
+ var scene = new THREE.Scene();
+ var renderer = new THREE.WebGLRenderer({antialias:false});
+
+ initialize();
+
+ function initialize(){
+
+ camera.position.z = 500;
+ scene.fog = new THREE.FogExp2(0xcccccc, 0.002);
+
+ drawRandomStuff();
+
+ // lights
+ var light = new THREE.DirectionalLight(0xffffff);
+ light.position.set(1, 1, 1);
+ scene.add(light);
+ light = new THREE.DirectionalLight(0x002288);
+ light.position.set(-1, -1, -1);
+ scene.add(light);
+ light = new THREE.AmbientLight(0x222222);
+ scene.add(light);
+
+ // renderer
+ renderer.setClearColor(scene.fog.color, 1);
+ renderer.setSize(window.innerWidth, window.innerHeight);
+
+ window.addEventListener('resize', onWindowResize, false);
+ }
+
+ function drawRandomStuff(){
+ var geometry = new THREE.CylinderGeometry(0, 10, 30, 4, 1);
+ var material = new THREE.MeshLambertMaterial({color:0xffffff, shading: THREE.FlatShading});
+
+ for ( var i = 0; i < 500; i ++ ) {
+ var mesh = new THREE.Mesh( geometry, material );
+ mesh.position.x = ( Math.random() - 0.5 ) * 1000;
+ mesh.position.y = ( Math.random() - 0.5 ) * 1000;
+ mesh.position.z = ( Math.random() - 0.5 ) * 1000;
+ mesh.updateMatrix();
+ mesh.matrixAutoUpdate = false;
+ scene.add(mesh);
+ }
+ }
+
+ function onWindowResize(){
+ camera.aspect = window.innerWidth/window.innerHeight;
+ camera.updateProjectionMatrix();
+ renderer.setSize(window.innerWidth, window.innerHeight);
+ render();
+ }
+
+ function sceneAdd(object){
+ scene.add(object)
+ }
+
+ function sceneRemove(object){
+ scene.remove(object);
+ }
+
+ function render(){
+ renderer.render(scene, camera);
+ }
+
+ function clearAll(){
+ var children = scene.children;
+ for (var i=children.length;i>=0;i--){
+ var object = children[i];
+ if (object instanceof THREE.Mesh){// && object != this.fillGeometry.get("mesh")
+ scene.remove(object);
+ }
+ }
+ render();
+ }
+
+ return {//return public properties
+ render:render,
+ clearAll: clearAll,
+ sceneRemove:sceneRemove,
+ sceneAdd:sceneAdd,
+ domElement:renderer.domElement,
+ camera:camera
+ }
+}
\ No newline at end of file
diff --git a/js/views/threeView.js b/js/views/threeView.js
index 8513e2913244e3cfcb1926a3802656b9fae1d533..e3a8f9bf09fcc7a3620877df6c44fd2c91db4144 100644
--- a/js/views/threeView.js
+++ b/js/views/threeView.js
@@ -6,95 +6,35 @@ ThreeView = Backbone.View.extend({
el: "#threeContainer",
- //this could break off into a model
- camera: new THREE.PerspectiveCamera(60, window.innerWidth/window.innerHeight, 1, 1000),
- scene: new THREE.Scene(),
- renderer: new THREE.WebGLRenderer({antialias:false}),
+ controls: null,
initialize: function(){
- _.bindAll(this, "render", "animate", "onWindowResize", "clearAll");
+ _.bindAll(this, "animate");
- this.camera.position.z = 500;
- this.scene.fog = new THREE.FogExp2( 0xcccccc, 0.002);
- this.controls = new THREE.OrbitControls(this.camera, this.$el.get(0));
- this.controls.addEventListener('change', this.render);
+ this.controls = new THREE.OrbitControls(this.model.camera, this.$el.get(0));
+ this.controls.addEventListener('change', this.model.render);
- this.drawRandomStuff();
-
- // lights
- var light = new THREE.DirectionalLight( 0xffffff );
- light.position.set( 1, 1, 1 );
- this.scene.add(light);
- light = new THREE.DirectionalLight( 0x002288 );
- light.position.set( -1, -1, -1 );
- this.scene.add(light);
- light = new THREE.AmbientLight( 0x222222 );
- this.scene.add(light);
-
-
- // renderer
- this.renderer.setClearColor(this.scene.fog.color, 1);
- this.renderer.setSize(window.innerWidth, window.innerHeight);
- this.$el.append(this.renderer.domElement);
-
- window.addEventListener('resize', this.onWindowResize, false);
+ this.$el.append(this.model.domElement);
this.animate();
},
- drawRandomStuff: function(){
- var geometry = new THREE.CylinderGeometry( 0, 10, 30, 4, 1 );
- var material = new THREE.MeshLambertMaterial( { color:0xffffff, shading: THREE.FlatShading } );
-
- for ( var i = 0; i < 500; i ++ ) {
- var mesh = new THREE.Mesh( geometry, material );
- mesh.position.x = ( Math.random() - 0.5 ) * 1000;
- mesh.position.y = ( Math.random() - 0.5 ) * 1000;
- mesh.position.z = ( Math.random() - 0.5 ) * 1000;
- mesh.updateMatrix();
- mesh.matrixAutoUpdate = false;
- this.scene.add(mesh);
- }
- },
-
setFillGeometry: function(fillGeometry){//call this once
this.fillGeometry = fillGeometry;
this.listenTo(fillGeometry, "change:geometry", this.replaceFillGeometry);
- this.listenTo(fillGeometry, "change:orientation", this.render);
+ this.listenTo(fillGeometry, "change:orientation", this.model.render);
this.replaceFillGeometry();
},
replaceFillGeometry: function(){
- if (this.fillGeometry.previous("mesh")) this.scene.remove(this.fillGeometry.previous("mesh"));
- this.scene.add(this.fillGeometry.get("mesh"));
- this.render();
- },
-
- onWindowResize: function(){
- this.camera.aspect = window.innerWidth/window.innerHeight;
- this.camera.updateProjectionMatrix();
- this.renderer.setSize(window.innerWidth, window.innerHeight);
- this.render();
+ if (this.fillGeometry.previous("mesh")) this.model.sceneRemove(this.fillGeometry.previous("mesh"));
+ this.model.sceneAdd(this.fillGeometry.get("mesh"));
+ this.model.render();
},
animate: function(){
requestAnimationFrame(this.animate);
this.controls.update();
- },
-
- render: function(){
- this.renderer.render(this.scene, this.camera);
- },
-
- clearAll: function(){
- var children = this.scene.children;
- for (var i=children.length;i>=0;i--){
- var object = children[i];
- if (object instanceof THREE.Mesh && object != this.fillGeometry.get("mesh")){
- this.scene.remove(object);
- }
- }
- this.render();
}
});
\ No newline at end of file
diff --git a/main.html b/main.html
index 58745767d5c58542d6c3b635be9dc949eba43a97..6e8122c4dcae61f56d949eaf6d6461ce6109ef71 100644
--- a/main.html
+++ b/main.html
@@ -40,6 +40,7 @@
<script src="js/persistentWorkers.js"></script><!--global workers-->
<!--models-->
+ <script src="js/models/threeModel.js"></script>
<script src="js/models/fillGeometry.js"></script>
<script src="js/models/lattice.js"></script>