Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Stable version for release w/ transparent 3D grid and axis helper #12

Open
wants to merge 4 commits into
base: master
Choose a base branch
from
Open

Stable version for release w/ transparent 3D grid and axis helper #12

Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
4ac1d5d
Figured out grid transparency.
Jan 28, 2015
c110b9a
Final version of grid and axees
Jan 31, 2015
bc7e9e9
Stable - Clean code version.
Feb 2, 2015
359de3c
Bug fixes.
Feb 3, 2015
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
105 changes: 78 additions & 27 deletions lib/viewers/stlviewer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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,
Expand Down Expand Up @@ -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));
Expand All @@ -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) {
Expand All @@ -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) {
Expand All @@ -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];

Expand All @@ -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';
Expand Down Expand Up @@ -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

Expand All @@ -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);
}
};
};

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;