main.js

// Amira Abdel-Rahman
// (c) Massachusetts Institute of Technology 2019

var color1= 0xffffff; /*white*/
var color2= 0x020227;  /*kohly*/
var color3= 0x1c5c61; /*teal*/
var color4= "#fa6e70"; //red/orange
var color5="#380152"; //purple
var color6="#696767"; //grey
var color7="#03dbfc"; //blue

///////////globals (in case of hierarichal)/////////////
var camera;
var gui = new dat.GUI();

var clock = new THREE.Clock();

var timeElapsed = clock.getElapsedTime();
var currTimeStep=0;
var increase=true;

var setupEmpty={//empty
	nodes: [
		],
	edges: [
		],

	//material properties - AISI 1095 Carbon Steel (Spring Steel)
	ndofs   : 3*6,

	animation :  {
	
		showDisplacement : false,
		exaggeration : 1000,
		speed:3.0
		
	},
	viz :  {
		minStress:10e6,
		maxStress: -10e6,
		colorMaps:[coolwarm,YlGnBu, winter ,jet],
		colorMap:0,
		
	},
	
};

var setup=JSON.parse(JSON.stringify(setupEmpty));


function animate(){
	timeElapsed = clock.getElapsedTime();
	requestAnimationFrame(animate);
	if(increase){
		currTimeStep+=setup.animation.speed*setup.animation.speed*2.0; //todo change to globalSetup
	}else{
		currTimeStep-=setup.animation.speed*setup.animation.speed*2.0; //todo change to globalSetup
	}
	
}
animate();
///////////////////////////////

////////////threejs object and utils//////////////////////

function threejs(setup,containerName,container1Name,static=true,live=false,empty=false){
	// this.line;
	this.setup=setup;
	this.renderer;
	this.scene;
	// this.camera;
	this.controls;
	this.containerName=containerName;
	this.container = document.getElementById( this.containerName );
	this.container1Name=container1Name;
	// this.line1;
	this.matLineBasic;
	this.matLineDashed;
	this.matLineBasicBasic;
	this.matLineBasicDashed;
	this.static=static;
	this.labelRenderer=[];
	this.counter=0;
	this.numFile=0;
	this.live=live;
	this.thinLines=false;
	this.speed=this.setup.animation.speed;
	this.empty=empty;
	
	// viewport
	

}

threejs.prototype.init=function() {

	this.renderer = new THREE.WebGLRenderer( { antialias: true } );
	this.renderer.setPixelRatio( window.devicePixelRatio );
	this.renderer.setClearColor( color2, 1.0 );
	this.renderer.setSize( this.getWidth(), this.getHeight() );
	this.container.appendChild( this.renderer.domElement );
	this.scene = new THREE.Scene();

	camera = new THREE.PerspectiveCamera( 60, this.getWidth() / this.getHeight(), 1, 10000 );
	camera.position.set( - 40, 40, 60 );
	camera = new THREE.OrthographicCamera( this.getWidth() / - 2, this.getWidth() / 2, this.getHeight() / 2, this.getHeight() / - 2, 1, 1000 );
	camera.position.set( 0, 125, 0 );

	this.controls = new THREE.OrbitControls( camera, this.renderer.domElement );
	// this.controls.target.set( this.setup.voxelSize/2.0*this.setup.scale, this.setup.voxelSize*2.0*this.setup.scale, this.setup.voxelSize/2.0*this.setup.scale );
	this.controls.minDistance = 1;
	this.controls.maxDistance = 500;

	

	var helper = new THREE.GridHelper( 100, 100 );
    helper.position.y = -this.setup.voxelSize/2.0;
    helper.material.opacity = 0.5;
	helper.material.transparent = true;
	helper.scale.x=2.0
	helper.scale.z=2.0
	this.scene.add( helper );

	

	// this.labelRenderer = new THREE.CSS2DRenderer();
	// this.labelRenderer.setSize( this.getWidth(), this.getHeight() );
	// this.labelRenderer.domElement.style.position = 'absolute';
	// this.labelRenderer.domElement.style.top = 0;
	// this.container.appendChild( this.labelRenderer.domElement ); 
	// this.controls = new THREE.OrbitControls( camera, this.labelRenderer.domElement );
	
	
	// draw forces
	
	// draw degrees of freedom
	window.addEventListener( 'resize', onWindowResize, false );
	onWindowResize();
	if(!this.empty){

		this.matLineBasic = new THREE.LineMaterial( {
			color: 0xffffff,
			vertexColors: THREE.VertexColors,
			linewidth: 5, // in pixels
			//resolution:  // to be set by renderer, eventually
			dashed: false
	
		} );
	
		this.matLineBasicBasic = new THREE.LineBasicMaterial( {
			color: 0xffffff,
			vertexColors: THREE.VertexColors,
			linewidth: 5, // in pixels
			//resolution:  // to be set by renderer, eventually
	
		} );
	
		
		// matLineDashed.defines.USE_DASH = ""; 
		this.matLineDashed = new THREE.LineMaterial( {
			color: 0xffffff,
			linewidth: 5, // in pixels
			vertexColors: THREE.VertexColors,
			//resolution:  // to be set by renderer, eventually
			dashed: false
		} );
	
		this.matLineBasicDashed = new THREE.LineBasicMaterial( {
			color: 0xffffff,
			linewidth: 5, // in pixels
			vertexColors: THREE.VertexColors,
	
		} );

		this.drawStructure();
		this.colorEdges();
		this.drawConstraintBoundingBoxes();

		if(!this.live){
			if(!this.static){//dynamic
				// initialize(this.setup);
				this.renderEuler();
				this.animateEuler()
			}else{
				this.render();
				this.animate();
			}

		}else{
			this.renderLive();
			this.animateLive();
		}

		guiCreate(this);

	}else{


		this.renderEmpty();
		this.animateEmpty();