<!DOCTYPE html>
<html lang="en">
<head>
<title>MetaVoxel</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;
}
</style>
<link rel="stylesheet" type="text/css" href="style.css" media="screen"/>
</head>
<body>
<div id="threejs">
<div class="header1">
<i> Hierarchical Simulation</i>
<!-- Three.js -->
</div>
<div id="webgl"></div>
</div>
<div id="graph">
<div class="header2">
<div class="dragbar"></div>
<i>. Detailed Simulation</i>
</div>
<div class="dragbar"></div>
<div id="webgl1"></div>
</div>
<div class="footer1">
<strong>left-click left window</strong>: orbit, <strong>right-click</strong>: zoom
</div>
<div class="footer2" id="footer2">
<!-- update change to more instructions/feedback -->
<i> Loading RhinoScript</i>
</div>
<!-- <div id="container"></div>
<div id="container"></div> -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript" src="https://files.mcneel.com/rhino3dm/js/latest/rhino3dm.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@1.0.0/dist/tf.min.js"></script>
<!-- <script src="./lib/require.js"></script> -->
<script src="../lib/three.min.js"></script>
<script src="../lib/stats.js"></script>
<script src="../lib/dat.gui.js"></script>
<script src="../lib/SVGRenderer.js"></script>
<script src="../lib/DragControls.js"></script>
<script src="../lib/OrbitControls.js"></script>
<script src="../lib/TransformControls.js"></script>
<script src="../lib/js-colormaps.js"></script>
<script src="../lib/LineSegments2.js"></script>
<script src="../lib/LineSegmentsGeometry.js"></script>
<script src="../lib/Line2.js"></script>
<script src="../lib/LineMaterial.js"></script>
<script src="../lib/LineGeometry.js"></script>
<script src="../lib/GeometryUtils.js"></script>
<script src="../visualization/utils.js"></script>
<script src="../visualization/geometry.js"></script>
<!-- <script src="./beamFea.js"></script>
<script src="./geometry.js"></script> -->
<script src="../visualization/main.js"></script>
<script src="../fea/parallelFea.js"></script>
<script type="text/javascript" src="./rhino3dm.js"></script>
<!-- <script src="../visualization/draw.js"></script> -->
<script>
////////////////////////dragbar///////////////
$('.dragbar').mousedown(function(e){
e.preventDefault();
$(document).mousemove(function(e){
// $('#position').html(e.pageX +', '+ e.pageY);
$('#threejs').css("width",e.pageX+2);
$('#webgl').css("width",e.pageX+2);
$('#graph').css("left",e.pageX+2);
// $('#json').css("left",e.pageX+2);
$('.footer1').css("width",e.pageX+2);
$('.footer2').css("left",e.pageX+2);
})
onWindowResize();//todo change location
});
$(document).mouseup(function(e){
$(document).unbind('mousemove');
onWindowResize();//todo change location
});
//////////////////////////////////////////////////////////////////
/////////////////seemless mirror control/////////////////////
$('#graph').on('click mousedown touchstart', function(){
three.controls = new THREE.OrbitControls( camera, three.renderer.domElement );
})
$('#threejs').on('click mousedown touchstart', function(){
three1.controls = new THREE.OrbitControls( camera, three1.renderer.domElement );
})
</script>
<script>
var three; //todo change location
var three1; //todo change location
var setup;
var setup1;
var globalSetup={
exaggeration:10e3,
speed:3.0
};
var ex=gui.add(globalSetup, 'exaggeration', 0, 10e4).listen();
var sp=gui.add(globalSetup, 'speed', 0, 5).listen();
ex.onChange(updateExSpeed);
sp.onChange();
rhino3dm().then(async m => {
console.log('Loaded rhino3dm.');
document.getElementById("footer2").innerHTML = "Loaded rhino3dm.";
_rhino3dm = m; // global
var latticeSize=3;
var voxelSize=5;
setup=JSON.parse(JSON.stringify(setupEmpty));
var material={
area:1.0,
density:0.028,
stiffness:10000000
};
var material2={
area:1.0,
density:0.028,
stiffness:10000000
};
setup.hierarchical=false;
setup.voxelSize=voxelSize;
const position=new THREE.Vector3(0,0,0);
const position2=new THREE.Vector3(voxelSize*2,0,0);
///
//try bounding box conditions
var support=new _rhino3dm.BoundingBox([-voxelSize/2+position.x,-voxelSize/2+position.y,-voxelSize/2+position.z], [voxelSize/2+position.x,voxelSize/2+position.y,voxelSize/2+position.z]);
var temp=voxelSize*latticeSize-voxelSize/8;
var load=new _rhino3dm.BoundingBox([-voxelSize/2+position.x,temp-voxelSize/2+position.y,-voxelSize/2+position.z], [voxelSize/2+position.x,temp+voxelSize/2+position.y,+voxelSize/2+position.z]);
var support2=new _rhino3dm.BoundingBox([-voxelSize/2+position2.x,-voxelSize/2+position2.y,-voxelSize/2+position2.z], [voxelSize/2+position2.x,voxelSize/2+position2.y,voxelSize/2+position2.z]);
var load2=new _rhino3dm.BoundingBox([-voxelSize/2+position2.x,temp-voxelSize/2+position2.y,-voxelSize/2+position2.z], [voxelSize/2+position2.x,temp+voxelSize/2+position2.y,0+voxelSize/2+position2.z]);
var temp1=voxelSize*latticeSize-3*voxelSize;
var matB=new _rhino3dm.BoundingBox([-voxelSize/2+position2.x,-voxelSize/2+position2.y,temp1-voxelSize/2+position2.z], [voxelSize/2+position2.x,voxelSize/2+position2.y,temp]);
var dof=[true,true,true,true,true,true];
var supports=[[support,dof],[support2,dof]];
var loads=[[load,{x:0,y:-400,z:0}],[load2,{x:0,y:-400,z:0}]];
var diffMaterialBox=[[matB,material2]];
///
lateralLoadSetup1(setup,position,latticeSize,voxelSize,createChiralVoxel,[],[],material);
lateralLoadSetup1(setup,position2,latticeSize,voxelSize,createVoxel,supports,loads,material2);
// changeMaterialFromBox(setup,diffMaterialBox);
setup.viz.colorMaps=[YlGnBu,coolwarm, winter ,jet];
setup.viz.minStress=10e6;
setup.viz.maxStress=-10e6;
setup.viz.exaggeration=globalSetup.exaggeration;
setup.solve=solveParallel;
setup.numTimeSteps=100;
setup.supports=supports;
setup.loads=loads;
three= new threejs(setup,"webgl1","graph");
three.init();
three.drawConstraintBoundingBoxes([support],[load]);
////////////////////////////////////
setup1=JSON.parse(JSON.stringify(setupEmpty));
setup1.hierarchical=true;
setup1.voxelSize=voxelSize;
lateralLoadSetup1(setup1,position,latticeSize,voxelSize,createHierarchalVoxel,[],[],material);
lateralLoadSetup1(setup1,position2,latticeSize,voxelSize,createHierarchalVoxel,supports,loads,material2);
// changeMaterialFromBox(setup1,diffMaterialBox);
setup1.viz.colorMaps=[YlGnBu,coolwarm, winter ,jet];
setup1.viz.minStress=10e6;
setup1.viz.maxStress=-10e6;
setup1.viz.exaggeration=globalSetup.exaggeration;
setup1.solve=solveParallel;
setup1.supports=supports;
setup1.loads=loads;
three1= new threejs(setup1,"webgl","threejs");
three1.init();
gui.add(three.setup,"numTimeSteps", 0, 500).listen();
gui.add(three.setup,"solve");
document.getElementById("footer2").innerHTML = "Press solve for structure simulation.";
// more stuff
});
function solveParallel(){
document.getElementById("footer2").innerHTML = "Running...";
var numTimeSteps=250;
/////////////////////////////////////////////////////
var dt=0.0251646; //?? todo change to recommended step
// var dt=0.01; //?? todo change to recommended step
setTimeout(function() {
simulateParallel(setup,three.setup.numTimeSteps,dt);
simulateParallel(setup1,three.setup.numTimeSteps,dt);
}, 1);
// var dt=0.0251646; //?? todo change to recommended step
// simulateParallel(setup1,numTimeSteps,dt);
///////////////////////////////////////
// updateColors();
// three.animate();
// three1.animate();
/////////////////////
}
function updateExSpeed(){
three.setup.animation.exaggeration=globalSetup.exaggeration;
three1.setup.animation.exaggeration=globalSetup.exaggeration;
three.setup.animation.speed=globalSetup.speed;
three1.setup.animation.speed=globalSetup.speed;
}
</script>
</body>
</html>