<!DOCTYPE html>
<html lang="en">
<head>
<title>CMODS</title>
<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=[];
setup.viz=[];
gui = new dat.GUI();
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();
var loader = new THREE.STLLoader();
var group;;
loader.load( "../CAD/"+name+".stl", function ( geometry ) {
// var material = new THREE.MeshPhongMaterial( { color: 0xff5533, specular: 0x111111, shininess: 200 } );
// var material = new THREE.MeshBasicMaterial( { color: color3 } );
var material = new THREE.MeshPhongMaterial(
{
vertexColors: THREE.VertexColors
});
// 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++){
colors.push(28.0/255.0);
colors.push(92.0/255.0);
colors.push(97.0/255.0); //teal
//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;
if(box1.containsPoint(new THREE.Vector3(
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]))){
// && 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
}
}
//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;
if(box.containsPoint(new THREE.Vector3(
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]))){
colors[i*3]=(255.0/255.0);
colors[i*3+1]=(92.0/255.0);
colors[i*3+2]=(97.0/255.0); //orange
}
}
}
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;
}
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";
});
</script>
</body>
</html>