diff --git a/lib/viewers/stlviewer.js b/lib/viewers/stlviewer.js index 218d7d3..41f6acd 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,8 +13,8 @@ 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]]; -var gridHelpers = []; Viewer.prototype = { constructor: Viewer, @@ -93,25 +94,39 @@ Viewer.prototype = { this.scene.fog = this.fog; this.scene.add(this.camera); - //Grid + //Grids + 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 Grid(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 Grid(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 Grid(1, 0.05); + //grid.material = new THREE.MeshBasicMaterial({transparent:true}); + 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)); @@ -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) { @@ -149,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) { @@ -171,12 +186,12 @@ 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; this.controls.noPan = false; - this.controls.staticMoving = false; + this.controls.staticMoving = false; this.controls.dynamicDampingFactor = 0.3; this.controls.keys = [65, 83, 68]; @@ -190,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'; @@ -244,11 +260,19 @@ Viewer.prototype = { if (!this.off) { requestAnimationFrame(this.animate.bind(this)); } + + // keyboard.update(); + + // if(keyboard.pressed('f')) + // { + // console.log("F\n"); + // } this.render(); }, render: function() { this.controls.update(); + //calculate the angle between camera and the 3 grids //multiply alpha for grids by their relative angle @@ -264,20 +288,47 @@ Viewer.prototype = { dir[1] = dir[1]/length; dir[2] = dir[2]/length; - console.log(gridHelpers[0]); - 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])); - - // - //assign alpha - not done - gridHelpers[i].material.opacity = Math.abs(alpha); - console.log("ALPHA IS: ",gridHelpers[i].material.opacity); + 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; } 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