From b15495092020de741e45b3fa4957531428f27626 Mon Sep 17 00:00:00 2001
From: Amanda Ghassaei <amandaghassaei@gmail.com>
Date: Thu, 8 Jan 2015 17:39:40 -0500
Subject: [PATCH] organization
---
js/main.js | 3 +-
js/navbar.js | 14 ++++++--
js/threeMain.js | 91 ++++++++++++++++++++++++++++++++++++++++++++++++
js/threeSetup.js | 89 ----------------------------------------------
main.html | 13 ++-----
5 files changed, 107 insertions(+), 103 deletions(-)
create mode 100644 js/threeMain.js
delete mode 100644 js/threeSetup.js
diff --git a/js/main.js b/js/main.js
index 28fcb95e..afb37063 100644
--- a/js/main.js
+++ b/js/main.js
@@ -7,6 +7,7 @@ var Parallel = Parallel || {};
$(function(){
- threeSetup();
+ var threeMain = ThreeMain();
+ setupNavBar(threeMain);
});
diff --git a/js/navbar.js b/js/navbar.js
index dee5fb96..379c3444 100644
--- a/js/navbar.js
+++ b/js/navbar.js
@@ -2,7 +2,7 @@
* Created by aghassaei on 1/7/15.
*/
-$(function(){
+function setupNavBar(threeSpace){
var allMenus = $(".navMenu");
var allNavMenuLinks = $(".menuHoverControls");
@@ -47,4 +47,14 @@ $(function(){
return false;
});
-});
\ No newline at end of file
+ //clear canvas
+ $("#clearAll").click(function(){
+ _.each(threeSpace.scene.children, function(object) {
+ if (object instanceof THREE.Mesh){
+ threeSpace.scene.remove(object);
+ }
+ });
+ threeSpace.render();
+ });
+
+}
\ No newline at end of file
diff --git a/js/threeMain.js b/js/threeMain.js
new file mode 100644
index 00000000..753a6cc3
--- /dev/null
+++ b/js/threeMain.js
@@ -0,0 +1,91 @@
+/**
+ * Created by aghassaei on 1/8/15.
+ */
+
+function ThreeMain(){
+
+ 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 );
+ }
+
+ return {//public properties
+ scene:scene,
+// camera:camera,
+// controls:controls,
+// renderer:renderer,
+ render:render
+ }
+}
\ No newline at end of file
diff --git a/js/threeSetup.js b/js/threeSetup.js
deleted file mode 100644
index 1efa3653..00000000
--- a/js/threeSetup.js
+++ /dev/null
@@ -1,89 +0,0 @@
-/**
- * Created by aghassaei on 1/7/15.
- */
-
-function threeSetup(){
-
- var camera, controls, scene, renderer;
-
- init();
- animate();
-
- function init() {
-
- var container = $("#threeContainer");
-
- camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 1000 );
- camera.position.z = 500;
-
- controls = new THREE.OrbitControls( camera, container.get(0) );
- controls.addEventListener( 'change', render );
-
- scene = new THREE.Scene();
- scene.fog = new THREE.FogExp2( 0xcccccc, 0.002 );
-
- // 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 );
-
- }
-
- 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 );
- }
-}
\ No newline at end of file
diff --git a/main.html b/main.html
index 9c0f7a86..16e88208 100644
--- a/main.html
+++ b/main.html
@@ -26,7 +26,7 @@
<!--threeJS-->
<script src="dependencies/three.js"></script>
<script src="dependencies/OrbitControls.js"></script>
- <script src="js/threeSetup.js"></script>
+ <script src="js/threeMain.js"></script>
<!--multi-threading-->
<script src="dependencies/parallel.js"></script>
@@ -63,16 +63,7 @@
</ul>
</li>
</ul>
- <form class="navbar-form navbar-right" action="#" role="search">
- <div class="form-group">
- <div class="input-group">
- <input class="form-control" id="navbarInput-01" type="search" placeholder="Search">
- <span class="input-group-btn">
- <button type="submit" class="btn"><span class="fui-search"></span></button>
- </span>
- </div>
- </div>
- </form>
+ <a href="#fakelink" id="clearAll" class="navbar-right btn btn-lg btn-primary">Clear All</a>
</div><!-- /.navbar-collapse -->
</nav>
<div id="controls1Menu" class="row navMenu">
--
GitLab