From 4ac1d5d19edd2a3bc987984e2d2a3089d7ba3ee2 Mon Sep 17 00:00:00 2001 From: dria7226 Date: Tue, 27 Jan 2015 17:12:24 -0700 Subject: [PATCH 1/4] Figured out grid transparency. --- lib/viewers/stlviewer.js | 36 +++++++++++++++++++----------------- 1 file changed, 19 insertions(+), 17 deletions(-) diff --git a/lib/viewers/stlviewer.js b/lib/viewers/stlviewer.js index 218d7d3..becbfcd 100644 --- a/lib/viewers/stlviewer.js +++ b/lib/viewers/stlviewer.js @@ -13,7 +13,6 @@ var Viewer = module.exports = function(element) { }; var grids = [[1,0,0,0],[0,1,0,0],[0,0,1,0]]; -var gridHelpers = []; Viewer.prototype = { constructor: Viewer, @@ -95,23 +94,24 @@ Viewer.prototype = { //Grid + var grid; //x - yz - gridHelpers[gridHelpers.length] = new THREE.GridHelper(1, 0.05); - gridHelpers[gridHelpers.length-1].material = new THREE.MeshBasicMaterial({transparent:true}); - gridHelpers[gridHelpers.length-1].rotation.z = Math.PI/2; - this.scene.add(gridHelpers[gridHelpers.length-1]); + grid = new THREE.GridHelper(1, 0.05); + grid.material = new THREE.MeshBasicMaterial({transparent:true}); + grid.rotation.z = Math.PI/2; + this.scene.add(grid); //y - xz - gridHelpers[gridHelpers.length] = new THREE.GridHelper(1, 0.05); - gridHelpers[gridHelpers.length-1].material = new THREE.MeshBasicMaterial({transparent:true}); - gridHelpers[gridHelpers.length-1].rotation.y = Math.PI/2; - this.scene.add(gridHelpers[gridHelpers.length-1]); + grid = new THREE.GridHelper(1, 0.05); + grid.material = new THREE.MeshBasicMaterial({transparent:true}); + grid.rotation.y = Math.PI/2; + this.scene.add(grid); //z - xy - gridHelpers[gridHelpers.length] = new THREE.GridHelper(1, 0.05); - gridHelpers[gridHelpers.length-1].material = new THREE.MeshBasicMaterial({transparent:true}); - gridHelpers[gridHelpers.length-1].rotation.x = Math.PI/2; - this.scene.add(gridHelpers[gridHelpers.length-1]); + grid = new THREE.GridHelper(1, 0.05); + grid.material = new THREE.MeshBasicMaterial({transparent:true}); + grid.rotation.x = Math.PI/2; + this.scene.add(grid); // Lights this.scene.add(new THREE.AmbientLight(0x777777)); @@ -264,18 +264,20 @@ Viewer.prototype = { dir[1] = dir[1]/length; dir[2] = dir[2]/length; - console.log(gridHelpers[0]); + console.log(this.scene); for(var i = 0; i < grids.length; i++) { // / //calculate relative angle v - var alpha = Math.sin(Math.acos(grids[i][0]*dir[0] + grids[i][1]*dir[1] + grids[i][2]*dir[2])); + var alpha = Math.cos(Math.acos(grids[i][0]*dir[0] + grids[i][1]*dir[1] + grids[i][2]*dir[2])); // //assign alpha - not done - gridHelpers[i].material.opacity = Math.abs(alpha); - console.log("ALPHA IS: ",gridHelpers[i].material.opacity); + //this.scene.children[i+1].material = new THREE.MeshBasicMaterial({transparent:true}); + this.scene.children[i+1].material.opacity = Math.abs(alpha); + this.scene.children[i+1].needsUpdate = true; + //console.log("ALPHA IS: ",gridHelpers[i].material.opacity); } this.renderer.render(this.scene, this.camera); From c110b9a7c2267febaffe2df1b74cca1745139a13 Mon Sep 17 00:00:00 2001 From: dria7226 Date: Fri, 30 Jan 2015 22:01:04 -0700 Subject: [PATCH 2/4] Final version of grid and axees --- lib/viewers/stlviewer.js | 39 ++++++++++++++++++++++++++++++--------- 1 file changed, 30 insertions(+), 9 deletions(-) diff --git a/lib/viewers/stlviewer.js b/lib/viewers/stlviewer.js index becbfcd..49dc421 100644 --- a/lib/viewers/stlviewer.js +++ b/lib/viewers/stlviewer.js @@ -3,6 +3,7 @@ require('../../js/TrackballControls') require('./Projector') require('./CanvasRenderer') require('../../js/STLLoader') +//require('../../js/keyboardstate') var Viewer = module.exports = function(element) { this.renderer = null; @@ -12,6 +13,7 @@ var Viewer = module.exports = function(element) { this.init(element); }; +//var keyboard = new KeyboardState(); var grids = [[1,0,0,0],[0,1,0,0],[0,0,1,0]]; Viewer.prototype = { @@ -92,7 +94,7 @@ Viewer.prototype = { this.scene.fog = this.fog; this.scene.add(this.camera); - //Grid + //Grids var grid; //x - yz @@ -113,6 +115,19 @@ Viewer.prototype = { grid.rotation.x = Math.PI/2; this.scene.add(grid); + var color = 0xBBBBBB; + this.scene.children[1].material.color.setHex(color); + this.scene.children[2].material.color.setHex(color); + this.scene.children[3].material.color.setHex(color); + + // Axis + var axis; + + axis = new THREE.AxisHelper(1); + axis.position.set(0.01,0.01,0.01); + //axis.material = new THREE.MeshBasicMaterial({transparent:true}); + this.scene.add(axis); + // Lights this.scene.add(new THREE.AmbientLight(0x777777)); this.addShadowedLight(1, 1, 1, 0xffffff, 1.35); @@ -123,7 +138,7 @@ Viewer.prototype = { init: function(element) { this.container = document.getElementById(element); - this.fog = new THREE.Fog(0x72645b, 2, 15); + this.fog = new THREE.Fog(0xffffff, 2, 15); if (0) { @@ -244,6 +259,13 @@ Viewer.prototype = { if (!this.off) { requestAnimationFrame(this.animate.bind(this)); } + + // keyboard.update(); + + // if(keyboard.pressed('f')) + // { + // console.log("F\n"); + // } this.render(); }, @@ -270,14 +292,13 @@ Viewer.prototype = { { // / //calculate relative angle v - var alpha = Math.cos(Math.acos(grids[i][0]*dir[0] + grids[i][1]*dir[1] + grids[i][2]*dir[2])); - - // - //assign alpha - not done - //this.scene.children[i+1].material = new THREE.MeshBasicMaterial({transparent:true}); - this.scene.children[i+1].material.opacity = Math.abs(alpha); + var alpha = Math.abs(grids[i][0]*dir[0] + grids[i][1]*dir[1] + grids[i][2]*dir[2])/4; + if(alpha < 0.05){this.scene.children[i+1].visible = false;}else + {this.scene.children[i+1].visible = true; } + // / + //assign alpha v + this.scene.children[i+1].material.opacity = alpha; this.scene.children[i+1].needsUpdate = true; - //console.log("ALPHA IS: ",gridHelpers[i].material.opacity); } this.renderer.render(this.scene, this.camera); From bc7e9e9cd0607081a63e9ae8c8bdb8ccc5c3f8c6 Mon Sep 17 00:00:00 2001 From: dria7226 Date: Mon, 2 Feb 2015 14:36:46 -0700 Subject: [PATCH 3/4] Stable - Clean code version. --- lib/viewers/stlviewer.js | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/lib/viewers/stlviewer.js b/lib/viewers/stlviewer.js index 49dc421..37867b8 100644 --- a/lib/viewers/stlviewer.js +++ b/lib/viewers/stlviewer.js @@ -186,7 +186,7 @@ Viewer.prototype = { this.controls = new THREE.TrackballControls(this.camera, this.renderer.domElement); - this.controls.rotateSpeed = 1.0; + this.controls.rotateSpeed = 1.0; this.controls.zoomSpeed = 1.2; this.controls.panSpeed = 0.2; this.controls.noZoom = false; @@ -271,6 +271,7 @@ Viewer.prototype = { render: function() { this.controls.update(); + //calculate the angle between camera and the 3 grids //multiply alpha for grids by their relative angle @@ -286,8 +287,6 @@ Viewer.prototype = { dir[1] = dir[1]/length; dir[2] = dir[2]/length; - console.log(this.scene); - for(var i = 0; i < grids.length; i++) { // / From 359de3c05e579a47a9db845c1790805b2101be09 Mon Sep 17 00:00:00 2001 From: dria7226 Date: Tue, 3 Feb 2015 13:46:30 -0700 Subject: [PATCH 4/4] Bug fixes. --- lib/viewers/stlviewer.js | 47 ++++++++++++++++++++++++++++++++-------- 1 file changed, 38 insertions(+), 9 deletions(-) diff --git a/lib/viewers/stlviewer.js b/lib/viewers/stlviewer.js index 37867b8..41f6acd 100644 --- a/lib/viewers/stlviewer.js +++ b/lib/viewers/stlviewer.js @@ -98,20 +98,20 @@ Viewer.prototype = { var grid; //x - yz - grid = new THREE.GridHelper(1, 0.05); - grid.material = new THREE.MeshBasicMaterial({transparent:true}); + grid = new Grid(1, 0.05); + //grid.material = new THREE.MeshBasicMaterial({transparent:true}); grid.rotation.z = Math.PI/2; this.scene.add(grid); //y - xz - grid = new THREE.GridHelper(1, 0.05); - grid.material = new THREE.MeshBasicMaterial({transparent:true}); + grid = new Grid(1, 0.05); + //grid.material = new THREE.MeshBasicMaterial({transparent:true}); grid.rotation.y = Math.PI/2; this.scene.add(grid); //z - xy - grid = new THREE.GridHelper(1, 0.05); - grid.material = new THREE.MeshBasicMaterial({transparent:true}); + grid = new Grid(1, 0.05); + //grid.material = new THREE.MeshBasicMaterial({transparent:true}); grid.rotation.x = Math.PI/2; this.scene.add(grid); @@ -164,7 +164,7 @@ Viewer.prototype = { // Camera this.camera = new THREE.PerspectiveCamera(35, this.container.clientWidth / this.container.clientHeight, 0.1, 100); - this.camera.position.set(0, 0, 1); + this.camera.position.set(0, -1, 0); // renderer if (window.WebGLRenderingContext) { @@ -191,7 +191,7 @@ Viewer.prototype = { this.controls.panSpeed = 0.2; this.controls.noZoom = false; this.controls.noPan = false; - this.controls.staticMoving = false; + this.controls.staticMoving = false; this.controls.dynamicDampingFactor = 0.3; this.controls.keys = [65, 83, 68]; @@ -205,6 +205,7 @@ Viewer.prototype = { // turn off the animatation at the start of a trackball control event self.animateOff(); }); + // stats // stats = new Stats(); // stats.domElement.style.position = 'absolute'; @@ -302,4 +303,32 @@ Viewer.prototype = { this.renderer.render(this.scene, this.camera); } -}; \ No newline at end of file +}; + +Grid = function ( size, step ) { + + var geometry = new THREE.Geometry(); + var material = new THREE.MeshBasicMaterial({transparent:true}); + + this.color1 = new THREE.Color( 0x444444 ); + this.color2 = new THREE.Color( 0x888888 ); + + for ( var i = - size; i <= size+step; i += step ) { + + geometry.vertices.push( + new THREE.Vector3( - size, 0, i ), new THREE.Vector3( size, 0, i ), + new THREE.Vector3( i, 0, - size ), new THREE.Vector3( i, 0, size ) + ); + + var color = i === 0 ? this.color1 : this.color2; + + geometry.colors.push( color, color, color, color ); + + } + + THREE.Line.call( this, geometry, material, THREE.LinePieces ); + +}; + +Grid.prototype = Object.create( THREE.Line.prototype ); +Grid.prototype.constructor = Grid; \ No newline at end of file