Skip to content
Snippets Groups Projects
indexCMODS.html 10.1 KiB
Newer Older
Amira Abdel-Rahman's avatar
Amira Abdel-Rahman committed
<!DOCTYPE html>
<html lang="en">
	<head>
Amira Abdel-Rahman's avatar
Amira Abdel-Rahman committed
		<title>CMODS</title>
Amira Abdel-Rahman's avatar
Amira Abdel-Rahman committed
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
		<!-- <link type="text/css" rel="stylesheet" href="main.css"> -->
		<style>
			body {
				background-color: #f0f0f0;
				color: #444;
			}
			a {
				color: #08f;
			}
			.label {
				color: #FFF;
				font-family: sans-serif;
				padding: 2px;
				background: rgba( 0, 0, 0, .6 );
			}
		</style>
	</head>
	<body>
		<div id="3d-graph"></div>

		
		


		<script src="//unpkg.com/three"></script>
		<script src="../lib/TransformControls.js"></script>
		<script src="../lib/STLLoader.js"></script>
	
		<script src="../lib/js-colormaps.js"></script>
	
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
		<!-- <script src="//unpkg.com/3d-force-graph"></script> -->
		<script src="../lib/3d-force-graph.js"></script>
		<script src="//unpkg.com/three-spritetext"></script>

		<script src="../lib/dat.gui.js"></script>

		<script src="../visualization/utils.js"></script>
		<script src="../visualization/geometry.js"></script>
		<script src="../visualization/boundaryUtils.js"></script>
		<!-- <script src="../visualization/boundary.js"></script> -->

		<script>

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


			var setup,Graph,gData,scene,camera,renderer,orbit,gui,guiSupport,guiLoad;
			var scale=10.0;

			setup=setupEmpty;


			var supportCount=0;
			var supportBoxes=[];
			var supportControls=[];
			var guiSupports=[];

			var loadCount=0;
			var loadBoxes=[];
			var loadControls=[];
			var guiLoads=[];

			var name="test1";

			//////////////init///////////////////////
			// $.getJSON("../json/"+fileName+".json", function(json) {
			[scene,camera,renderer,orbit]=loadGraph(setup,scale);
			

			setup.supports=[];
			setup.loads=[];
Amira Abdel-Rahman's avatar
Amira Abdel-Rahman committed
			setup.viz=[];
Amira Abdel-Rahman's avatar
Amira Abdel-Rahman committed


			gui = new dat.GUI();

Amira Abdel-Rahman's avatar
Amira Abdel-Rahman committed
			setup.cmods={
				STL_particles:{
					nlattice:"100",
					stlName:'test',
				},
				particles_bonds:{
					grid:"1024",
					block:"1024",
				},
				bonds_stress_strain:{
					grid:"512",
					block: "512",
					spring: "30000000",
					mass: "1",
					dissipation: "100",
					dt: "0.0001",
					nloop: "1000",
					fraction: "0.04",
					step: "-0.0002",
					bond:"15"

				},
				strain_GL:{
					size:"1.5",
					scale:"200",
					rx:"1.55",
					ry:"0.0",
					rz:"0.0",
					sxyz:"0.25",
					perspective:"0.05"

				}

			}
			var guiCMODS=gui.addFolder('CMODS Setup');

			var gui_STL_particles=guiCMODS.addFolder('STL_particles');
			gui_STL_particles.add(setup.cmods.STL_particles,'nlattice').listen();
			gui_STL_particles.add(setup.cmods.STL_particles,'stlName').listen();

			var gui_particles_bonds=guiCMODS.addFolder('particles_bonds');
			gui_particles_bonds.add(setup.cmods.particles_bonds,'grid').listen();
			gui_particles_bonds.add(setup.cmods.particles_bonds,'block').listen();

			var gui_bonds_stress_strain=guiCMODS.addFolder('bonds_stress_strain');
			gui_bonds_stress_strain.add(setup.cmods.bonds_stress_strain,'grid').listen();
			gui_bonds_stress_strain.add(setup.cmods.bonds_stress_strain,'block').listen();
			gui_bonds_stress_strain.add(setup.cmods.bonds_stress_strain,'spring').listen();
			gui_bonds_stress_strain.add(setup.cmods.bonds_stress_strain,'mass').listen();
			gui_bonds_stress_strain.add(setup.cmods.bonds_stress_strain,'dissipation').listen();
			gui_bonds_stress_strain.add(setup.cmods.bonds_stress_strain,'dt').listen();
			gui_bonds_stress_strain.add(setup.cmods.bonds_stress_strain,'nloop').listen();
			gui_bonds_stress_strain.add(setup.cmods.bonds_stress_strain,'fraction').listen();
			gui_bonds_stress_strain.add(setup.cmods.bonds_stress_strain,'step').listen();
			gui_bonds_stress_strain.add(setup.cmods.bonds_stress_strain,'bond').listen();


			var gui_strain_GL=guiCMODS.addFolder('strain_GL');
			gui_strain_GL.add(setup.cmods.strain_GL,'size').listen();
			gui_strain_GL.add(setup.cmods.strain_GL,'scale').listen();
			gui_strain_GL.add(setup.cmods.strain_GL,'rx').listen();
			gui_strain_GL.add(setup.cmods.strain_GL,'ry').listen();
			gui_strain_GL.add(setup.cmods.strain_GL,'rz').listen();
			gui_strain_GL.add(setup.cmods.strain_GL,'sxyz').listen();
			gui_strain_GL.add(setup.cmods.strain_GL,'perspective').listen();



Amira Abdel-Rahman's avatar
Amira Abdel-Rahman committed
			
			var loader = new THREE.STLLoader();
			var group;;
			loader.load( "../CAD/"+name+".stl", function ( geometry ) {

Amira Abdel-Rahman's avatar
Amira Abdel-Rahman committed
				// var material = new THREE.MeshPhongMaterial( { color: 0xff5533, specular: 0x111111, shininess: 200 } );
				// var material = new THREE.MeshBasicMaterial( { color: color3 } );
Amira Abdel-Rahman's avatar
Amira Abdel-Rahman committed

				var material = new THREE.MeshPhongMaterial(
				{
Amira Abdel-Rahman's avatar
Amira Abdel-Rahman committed
					 vertexColors: THREE.VertexColors
Amira Abdel-Rahman's avatar
Amira Abdel-Rahman committed
				});
				// material.vertexColors = THREE.VertexColors;

				
				
				var count=geometry.attributes.position.count*3;
				var colors=[]
				for(var i=0;i<count/3.0;i++){
					colors.push(28.0/255.0);
					colors.push(92.0/255.0);
					colors.push(97.0/255.0); //teal
				}

				var colors = new Float32Array( colors );

				
				geometry.setAttribute('color', new THREE.BufferAttribute(colors, 3));

				// for(var faceIndex=0;faceIndex<geometry.faces.length;faceIndex++){
				// 	for(var vertexIndex=0;vertexIndex<geometry.faces[ faceIndex ].vertexColors.length;vertexIndex++){
				// 		geometry.faces[ faceIndex ].vertexColors[ vertexIndex ] = new THREE.Color( color3 );
						
				// 	}

				// }

				group = new THREE.Mesh( geometry, material );
				// console.log(geometry.attributes.position.array);

				// group.geometry.colorsNeedUpdate = true;
				group.geometry.attributes.color.needsUpdate = true;




				group.position.set( 0, -5.0*scale, 0.0 );
				group.rotation.set( - Math.PI / 2, 0, 0 );
				group.scale.set( scale, scale, scale );
				group.name=name;
				

				scene.add( group.clone() );

			} );

			guiAddSupports();

			function updateNodeColors(){
				var count=group.geometry.attributes.position.count*3;
				var colors=[]
				for(var i=0;i<count/3.0;i++){
Amira Abdel-Rahman's avatar
Amira Abdel-Rahman committed


					colors.push(28.0/255.0);
Amira Abdel-Rahman's avatar
Amira Abdel-Rahman committed
					colors.push(92.0/255.0);
					colors.push(97.0/255.0); //teal

Amira Abdel-Rahman's avatar
Amira Abdel-Rahman committed
					//check if load
					for(var j=0;j<loadCount;j++){
Amira Abdel-Rahman's avatar
Amira Abdel-Rahman committed
						var box1 = new THREE.Box3();
						loadBoxes[j].geometry.computeBoundingBox();
						box1.copy( loadBoxes[j].geometry.boundingBox ).applyMatrix4( loadBoxes[j].matrixWorld );
						setup.loads[j][0].min.x=box1.min.x;
						setup.loads[j][0].min.y=box1.min.y;
						setup.loads[j][0].min.z=box1.min.z;
Amira Abdel-Rahman's avatar
Amira Abdel-Rahman committed
						setup.loads[j][0].max.x=box1.max.x;
						setup.loads[j][0].max.y=box1.max.y;
						setup.loads[j][0].max.z=box1.max.z;
Amira Abdel-Rahman's avatar
Amira Abdel-Rahman committed
						if(box1.containsPoint(new THREE.Vector3(
Amira Abdel-Rahman's avatar
Amira Abdel-Rahman committed
							scale*group.geometry.attributes.position.array[i*3],
							scale*group.geometry.attributes.position.array[i*3+2]-5.0*scale,
							scale*group.geometry.attributes.position.array[i*3+1]))){
Amira Abdel-Rahman's avatar
Amira Abdel-Rahman committed
							// && group.geometry.attributes.color.array[i*3]==0.10980392247438431){
							colors[i*3]=(3.0/255.0);
							colors[i*3+1]=(219.0/255.0);
							colors[i*3+2]=(252.0/255.0); //blue

Amira Abdel-Rahman's avatar
Amira Abdel-Rahman committed
					//check if support
					for(var j=0;j<supportCount;j++){
Amira Abdel-Rahman's avatar
Amira Abdel-Rahman committed
						var box = new THREE.Box3();
						supportBoxes[j].geometry.computeBoundingBox();
						box.copy( supportBoxes[j].geometry.boundingBox ).applyMatrix4( supportBoxes[j].matrixWorld );
						setup.supports[j][0].min.x=box.min.x;
						setup.supports[j][0].min.y=box.min.y;
						setup.supports[j][0].min.z=box.min.z;
Amira Abdel-Rahman's avatar
Amira Abdel-Rahman committed
						setup.supports[j][0].max.x=box.max.x;
						setup.supports[j][0].max.y=box.max.y;
						setup.supports[j][0].max.z=box.max.z;
						if(box.containsPoint(new THREE.Vector3(
Amira Abdel-Rahman's avatar
Amira Abdel-Rahman committed
							scale*group.geometry.attributes.position.array[i*3],
							scale*group.geometry.attributes.position.array[i*3+2]-5.0*scale,
							scale*group.geometry.attributes.position.array[i*3+1]))){
Amira Abdel-Rahman's avatar
Amira Abdel-Rahman committed

							colors[i*3]=(255.0/255.0);
							colors[i*3+1]=(92.0/255.0);
							colors[i*3+2]=(97.0/255.0); //orange
Amira Abdel-Rahman's avatar
Amira Abdel-Rahman committed

Amira Abdel-Rahman's avatar
Amira Abdel-Rahman committed
				}

				var colors = new Float32Array( colors );
				
				group.geometry.setAttribute('color', new THREE.BufferAttribute(colors, 3));

				// console.log(group.geometry.attributes.position.array);
				// group.geometry.colorsNeedUpdate = true;
				group.geometry.attributes.color.needsUpdate = true;
			}

Amira Abdel-Rahman's avatar
Amira Abdel-Rahman committed
			function exportBoundaryConditions(){
				//check if load
				for(var j=0;j<loadCount;j++){

					var box1 = new THREE.Box3();
					loadBoxes[j].geometry.computeBoundingBox();
					box1.copy( loadBoxes[j].geometry.boundingBox ).applyMatrix4( loadBoxes[j].matrixWorld );

					setup.loads[j][0].min.x=box1.min.x;
					setup.loads[j][0].min.y=box1.min.y;
					setup.loads[j][0].min.z=box1.min.z;

					setup.loads[j][0].max.x=box1.max.x;
					setup.loads[j][0].max.y=box1.max.y;
					setup.loads[j][0].max.z=box1.max.z;
				}

				//check if support
				for(var j=0;j<supportCount;j++){

					var box = new THREE.Box3();
					supportBoxes[j].geometry.computeBoundingBox();
					box.copy( supportBoxes[j].geometry.boundingBox ).applyMatrix4( supportBoxes[j].matrixWorld );
					
					setup.supports[j][0].min.x=box.min.x;
					setup.supports[j][0].min.y=box.min.y;
					setup.supports[j][0].min.z=box.min.z;

					setup.supports[j][0].max.x=box.max.x;
					setup.supports[j][0].max.y=box.max.y;
					setup.supports[j][0].max.z=box.max.z;
				}
				// let data = {element: "barium"};

				// fetch("/", {
				// 	method: "POST", 
				// 	body: JSON.stringify(data)
				// 	}).then(res => {
				// 	console.log("Request complete! response:", res);
				// });
				console.log("send")
				

				$.post("/", { data : { foo : JSON.stringify(setup) } }, function(temp) {
					// temp === "I am done";    
				});

				


			}

			// var yourUrl="http://localhost:8080/demos/indexCMODS.html";
			// // var yourUrl="/";

			// var xhr = new XMLHttpRequest();
			// 	xhr.open("POST", yourUrl, true);
			// 	xhr.setRequestHeader('Content-Type', 'application/json');
			// 	xhr.send(JSON.stringify({
			// 		value: 10
			// }));

			$.post("/", { data : { foo : JSON.stringify(setup) } }, function(temp) {
				// temp === "I am done";    
			});