From 5eae14563d99a84c53492cc7f643edfb7af75ece Mon Sep 17 00:00:00 2001
From: Amanda Ghassaei <amandaghassaei@gmail.com>
Date: Sat, 17 Jan 2015 03:21:53 -0500
Subject: [PATCH] threejs view added as backbone
---
js/main.js | 2 +-
js/threeMain.js | 103 ------------------------------------------
js/views/threeView.js | 91 +++++++++++++++++++++++++++++++++++++
main.html | 2 +-
4 files changed, 93 insertions(+), 105 deletions(-)
delete mode 100644 js/threeMain.js
create mode 100644 js/views/threeView.js
diff --git a/js/main.js b/js/main.js
index 9dd30edd..3eb1a8dd 100644
--- a/js/main.js
+++ b/js/main.js
@@ -5,7 +5,7 @@
$(function(){
- three = Three();
+ three = new ThreeView();
//init models and views
fillGeometry = new FillGeometry();//init a singleton, add to global scope
diff --git a/js/threeMain.js b/js/threeMain.js
deleted file mode 100644
index d364f279..00000000
--- a/js/threeMain.js
+++ /dev/null
@@ -1,103 +0,0 @@
-/**
- * Created by aghassaei on 1/8/15.
- */
-
-function Three(){
-
- var self = this;
-
- var container = $("#threeContainer");
- var camera, scene, renderer, controls;
-
- camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 1000 );
- camera.position.z = 500;
-
- scene = new THREE.Scene();
- scene.fog = new THREE.FogExp2( 0xcccccc, 0.002 );
-
- controls = new THREE.OrbitControls( camera, container.get(0) );
- controls.addEventListener( 'change', render );
-
- // world
-
- 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 );
-
- }
-
- // lights
-
- 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 = new THREE.WebGLRenderer( { antialias: false } );
- renderer.setClearColor( scene.fog.color, 1 );
- renderer.setSize( window.innerWidth, window.innerHeight );
-
- container.append(renderer.domElement);
-
- window.addEventListener( 'resize', onWindowResize, false );
-
- animate();
-
- function onWindowResize() {
-
- camera.aspect = window.innerWidth / window.innerHeight;
- camera.updateProjectionMatrix();
-
- renderer.setSize( window.innerWidth, window.innerHeight );
- render();
- }
-
- function animate() {
-
- requestAnimationFrame( animate );
- controls.update();
- }
-
- 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){
- scene.remove(object);
- }
- }
- render();
- }
-
- return {//public properties
- scene:scene,
-
-// camera:camera,
-// controls:controls,
-// renderer:renderer,
- render:render,
- clearAll:clearAll
- }
-}
\ No newline at end of file
diff --git a/js/views/threeView.js b/js/views/threeView.js
new file mode 100644
index 00000000..c14b31f2
--- /dev/null
+++ b/js/views/threeView.js
@@ -0,0 +1,91 @@
+
+
+ThreeView = Backbone.View.extend({
+
+ el: "#threeContainer",
+
+ events: {
+
+
+ },
+
+ camera: new THREE.PerspectiveCamera(60, window.innerWidth/window.innerHeight, 1, 1000),
+ scene: new THREE.Scene(),
+ renderer: new THREE.WebGLRenderer({antialias:false}),
+
+ initialize: function(){
+
+ _.bindAll(this, "render", "animate", "onWindowResize");
+
+ 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.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.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);
+
+ }
+ },
+
+ onWindowResize: function(){
+ this.camera.aspect = window.innerWidth/window.innerHeight;
+ this.camera.updateProjectionMatrix();
+ this.renderer.setSize(window.innerWidth, window.innerHeight);
+ this.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){
+ this.scene.remove(object);
+ }
+ }
+ this.render();
+ }
+});
\ No newline at end of file
diff --git a/main.html b/main.html
index 66b4b354..58745767 100644
--- a/main.html
+++ b/main.html
@@ -27,7 +27,6 @@
<!--threeJS-->
<script src="dependencies/three.js"></script>
<script src="dependencies/OrbitControls.js"></script>
- <script src="js/threeMain.js"></script>
<!--stl import/export-->
<script src="dependencies/THREE2STL.js"></script>
@@ -45,6 +44,7 @@
<script src="js/models/lattice.js"></script>
<!--views-->
+ <script src="js/views/threeView.js"></script>
<script src="js/views/importView.js"></script>
<script src="js/main.js"></script>
--
GitLab